Angular

Search results

Find and Replace in Angular DocumentEditor component

21 Dec 2022 / 6 minutes to read

The document editor component searches a portion of text in the document through a built-in interface called OptionsPane or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.

Options pane

This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to Replace tab. This pane is opened using the keyboard shortcut CTRL+F. You can also open it programmatically using the following sample code.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
    DocumentEditorComponent, SelectionService, EditorService, SearchService, OptionsPaneService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
      selector: 'app-container',
      //specifies the template string for the Document Editor component
      template: `<div>
      <button ejs-button (click)="showOptionsPane()" >Show</button>
      <ejs-documenteditor #document_editor height="330px" style="display:block" id="container" height="330px" style="display:block" [enableSelection]=true [enableSearch]=true [enableEditor]=true [isReadOnly]=false [enableOptionsPane]=true (created)="onCreated()"></ejs-documenteditor>
      </div>`,
      encapsulation: ViewEncapsulation.None,
      providers: [SelectionService, EditorService, SearchService, OptionsPaneService]
})

export class AppComponent {
    @ViewChild('document_editor')
    public documentEditor: DocumentEditorComponent;

    onCreated(): void {
        if (this.documentEditor.isDocumentLoaded) {
            let sfdt: string = `{
                "sections": [
                    {
                        "blocks": [
                            {
                                "inlines": [
                                    {
                                        "characterFormat": {
                                            "bold": true,
                                            "italic": true
                                        },
                                        "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }`;
            //Open the document in Document Editor
            this.documentEditor.open(sfdt);
        }
    }

    public showOptionsPane(): void {
        //Open options pane.
        this.documentEditor.showOptionsPane();
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';



/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        ToolbarModule,
        DocumentEditorAllModule,
        ComboBoxModule,
        ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

You can close the options pane by pressing Esc key.

Search

The Search module of Document Editor exposes the following APIs:

API Name	Type	Description
`findAll()`	Method	Searches for specified text in the whole document and highlights it with yellow.
`searchResults`	Property	This is an instance of `SearchResults`.
`find()`	Method	Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.

Find the immediate occurrence in the document

Using find() method, you can find the immediate occurrence of specified text from current cursor position in the document.

The following example code illustrates how to use find in Document editor.

this.documenteditor.search.find('Some text', 'None');

Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are 'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'.

Find all the occurrences in the document

Using findAll() method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.

The following example code illustrates how to find All the text in the document.

this.documenteditor.search.findAll('Some text', 'None');

Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are 'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'.

Search results

The SearchResults class provides information about the search results after a search operation is completed that can be identified using the searchResultsChange event. This will expose the following APIs:

API Name	Type	Description
`length`	Property	Returns the total number of results found on the search.
`index`	Property	Returns the index of selected search result. You can change the value for this property to move the selection.
`replaceAll()`	Method	Replaces all the occurrences with specified text.
`clear()`	Method	Clears the search result.

Replace all the occurrences

Using replaceAll, you can replace all the occurrences with specified text.

The following example code illustrates how to use replace All in Document editor.

this.documentEditor.search.findAll ('Some text');
// Replace all the searched text with word 'Mike'
this.documentEditor.search.searchResults.replaceAll("Mike");

Replace

Using insertText, you can replace the current searched text with specified text and it replace single occurrence.

Note: This insertText API accepts following control characters

New line characters (“\r”, “\r\n”, “\n”) - Inserts a new paragraph and appends the remaining text to the new paragraph.

Line break character (“\v”) - Moves the remaining text to start in new line.

Tab character (“\t”) - Allocates a tab space and continue the next character.

The following example code illustrates how to find a text in the document and replace each occurrence of the text one by one programmatically.

this.container.documentEditor.search.findAll('works');

let searchLength: number = this.container.documentEditor.search.searchResults.length;

for (let i = 0; i < searchLength; i++) {
  // It will move selection to specific searched index,move to each occurrence one by one
  this.container.documentEditor.search.searchResults.index = i;
  // Replace it with some text
  this.container.documentEditor.editor.insertText('Hello');
}

this.container.documentEditor.search.searchResults.clear();

SearchResultsChange event

DocumentEditor exposes the searchResultsChange event that will be triggered whenever search results are changed. Consider the following scenarios:

A search operation is completed with some results.
The results are replaced with some other text, since it will be cleared automatically.
The results are cleared explicitly.

Refer to the following code example.

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
DocumentEditorComponent, EditorService, SelectionService, SfdtExportService, EditorHistoryService, BookmarkDialogService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  //specifies the template string for the Document Editor component
  template: `<ejs-documenteditor #document_editor  id="container" height="330px" style="display:block" [isReadOnly]=false [enableSelection]=true [enableSearch]=true (searchResultsChange)="onSearchResultChange()" > </ejs-documenteditor>`,
  encapsulation: ViewEncapsulation.None,
  providers: [EditorService, SelectionService, SfdtExportService]
})

export class AppComponent {
@ViewChild('document_editor')
public documentEditor: DocumentEditorComponent;

// search result change event handler
public onSearchResultChange(): void {

}
}

Customize find and replace

Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.

Source

Preview

app.component.ts

app.module.ts

main.ts

import { Component, ViewEncapsulation, ViewChild } from '@angular/core';
import {
DocumentEditorComponent, SelectionService, EditorService, SearchService, OptionsPaneService
} from '@syncfusion/ej2-angular-documenteditor';

@Component({
  selector: 'app-container',
  //specifies the template string for the Document Editor component
  template: `<div style="width:100%;">
  <table>
      <tr>
          <td>
              <label>Text to find:</label>
          </td>
          <td>
              <input type="text" id="find_text" />
          </td>
      </tr>
      <tr>
          <td>
              <label>Text to replace:</label>
          </td>
          <td>
              <input type="text" id="replace_text" />
          </td>
      </tr>
      <tr>
          <td colspan="2">
              <button ejs-button (click)="onReplaceButtonClick()" >Replace all</button>
          </td>
      </tr>
  </table>
  <ejs-documenteditor #document_editor id="container" height="330px" style="display:block" [enableSelection]=true [enableSearch]=true [enableEditor]=true [isReadOnly]=false (created)="onCreated()"></ejs-documenteditor>
  </div>`,
  encapsulation: ViewEncapsulation.None,
  providers: [SelectionService, EditorService, SearchService]
})

export class AppComponent {
@ViewChild('document_editor')
public documentEditor: DocumentEditorComponent;

onCreated(): void {
    if (this.documentEditor.isDocumentLoaded) {
        let sfdt: string = `{
        "sections": [
            {
                "blocks": [
                    {
                        "inlines": [
                            {
                                "characterFormat": {
                                    "bold": true,
                                    "italic": true
                                },
                                "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
                            }
                        ]
                    }
                ]
            }
        ]
    }`;
        this.documentEditor.open(sfdt);
    }
}

public onReplaceButtonClick(): void {
    let textToFind: string = (document.getElementById('find_text') as HTMLInputElement).value;
    let textToReplace: string = (document.getElementById('replace_text') as HTMLInputElement).value;
    if (textToFind !== '') {
        // Find all the occurences of given text
        this.documentEditor.searchModule.findAll(textToFind);
        if (this.documentEditor.searchModule.searchResults.length > 0) {
            // Replace all the occurences of given text
            this.documentEditor.searchModule.searchResults.replaceAll(textToReplace);
        }
    }
}
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { DocumentEditorAllModule } from '@syncfusion/ej2-angular-documenteditor';
import { ToolbarModule } from '@syncfusion/ej2-angular-navigations';
import { ComboBoxModule } from '@syncfusion/ej2-angular-dropdowns';
import {ColorPickerModule } from '@syncfusion/ej2-angular-inputs';
import { AppComponent } from './app.component';



/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        ButtonModule,
        ToolbarModule,
        DocumentEditorAllModule,
        ComboBoxModule,
        ColorPickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

Contents

Options pane
Search
Find the immediate occurrence in the document
Find all the occurrences in the document
Search results
Replace all the occurrences
Replace
SearchResultsChange event
Customize find and replace

Contents

Options pane
Search
Find the immediate occurrence in the document
Find all the occurrences in the document
Search results
Replace all the occurrences
Replace
SearchResultsChange event
Customize find and replace

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!