Find and Replace in ASP.NET MVC DOCX Editor
14 Aug 202613 minutes to read
The ASP.NET MVC DOCX Editor (Document Editor) component searches for a portion of text in the document through a built-in interface called OptionsPane or rich APIs. When used in combination with selection, it performs various operations on the search results like replacing it with some other text, highlighting it, making it bold, and more.
Options pane
This provides options to search for a portion of text in the document. After the search operation is completed, the search results will be displayed in a list with options to navigate between them. The current occurrence of matched text or all occurrences can be replaced with other text by switching to the Replace tab. This pane is opened using the keyboard shortcut Ctrl+F.
@Html.EJS().Button("showhidepane").Content("Show hide pane").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").EnableSelection(true).EnableSearch(true).IsReadOnly(false).EnableEditor(true).EnableOptionsPane(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var sfdt = {
"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."
}
]
}
]
}
]
};
documenteditor.open(JSON.stringify(sfdt));
document.getElementById('showhidepane').addEventListener('click', function () {
documenteditor.showOptionsPane();
});
});
</script>public ActionResult Default()
{
return View();
}You can close the options pane by pressing the Esc key.
Search
The Search module of the 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 | Finds the immediate occurrence of specified text from the cursor position in the document and highlights it with yellow. |
Find the immediate occurrence in the document
Using the find() method, you can find the immediate occurrence of specified text from the current cursor position in the document.
documenteditor.search.find('Some text', 'None');NOTE
The second parameter is an 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 the findAll() method, you can find all the occurrences of specified text in the whole document and highlight them with yellow.
documenteditor.search.findAll('Some text', 'None');NOTE
The second parameter is an 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 the search operation is completed, which 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 the specified text. |
clear() |
Method | Clears the search results. |
Replace all the occurrences
Using replaceAll, you can replace all the occurrences with the specified text.
documentEditor.search.findAll ('Some text');
// Replace all the searched text with word 'Mike'
documentEditor.search.searchResults.replaceAll("Mike");Replace
Using insertText, you can replace the currently searched text with the specified text and it replaces a single occurrence.
NOTE
This
insertTextAPI accepts the 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 a new line.
* Tab character (“\t”) - Allocates a tab space and continues with the next character.
container.documentEditor.search.findAll('works');
let searchLength: number = container.documentEditor.search.searchResults.length;
for (let i = searchLength - 1; i >= 0; i--) {
// It will move selection to specific searched index, move to each occurrence one by one
container.documentEditor.search.searchResults.index = i;
// Replace it with some text
container.documentEditor.editor.insertText('Hello');
}
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, which will be cleared automatically.
- The results are cleared explicitly.
documentEditor.searchResultsChange = function() {
};Customize find and replace
Using the exposed APIs, you can customize the find and replace functionality in your application.
@Html.EJS().Button("replace_all").Content("Replace All").Render()
<div id="documenteditor" style="width:100%;height:100%">
@Html.EJS().DocumentEditor("container").IsReadOnly(false).EnableEditor(true).EnableSelection(true).EnableSearch(true).Render()
</div>
<script>
var documenteditor;
document.addEventListener('DOMContentLoaded', function () {
documenteditor = document.getElementById("container").ej2_instances[0];
var sfdt = {
"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."
}
]
}
]
}
]
};
documenteditor.open(JSON.stringify(sfdt));
document.getElementById('replace_all').addEventListener('click', function () {
var textToFind = document.getElementById('find_text').value;
var textToReplace = document.getElementById('replace_text').value;
if (textToFind !== '') {
// Find all the occurences of given text
documenteditor.searchModule.findAll(textToFind);
if (documenteditor.searchModule.searchResults.length > 0) {
// Replace all the occurences of given text
documenteditor.searchModule.searchResults.replaceAll(textToReplace);
}
}
});
});
</script>public ActionResult Default()
{
return View();
}