Search results

Customize the text search color in JavaScript PDF Viewer control

06 Jun 2023 / 2 minutes to read

To change the text search color in the Syncfusion PDF viewer, you can use the searchColor property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format.

Copied to clipboard
viewer.textSearchColorSettings.searchColor = "#FF0000";

This will set the text search color to red. You can use any valid hexadecimal color code to set the text search color to the desired color.

You can also use the searchHighlightColor property of the searchModule object to change the highlight color of the search results. This property also accepts a string value in hexadecimal format.

Copied to clipboard
viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";

This will set the highlight color of the search results to blue.

Here is an example of how you can use the searchHighlightColor property and searchColor property:

Copied to clipboard
<button id="search">SearchText</button>
<button id="searchNext">SearchNext</button>
<button id="searchPervious">searchPervious</button>
<button id="searchCancel">CancelSearch</button>
Copied to clipboard
viewer.enableTextSearch = true;
// customize the textSeach color
viewer.textSearchColorSettings.searchColor = "#FF0000";
// customize the highlight color of the search results
viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";
document.getElementById("search").addEventListener("click", () => {
  viewer.textSearchModule.searchText("pdf", false);
});
document.getElementById("searchNext").addEventListener("click", () => {
  viewer.textSearchModule.searchNext();
});
document.getElementById("searchPervious").addEventListener("click", () => {
  viewer.textSearchModule.searchPrevious();
});
document.getElementById("searchCancel").addEventListener("click", () => {
  viewer.textSearchModule.cancelTextSearch();
});

Find the sample how to customize the text search color