--- title: "Customized PDF text search using JavaScript | Nutrient Web SDK" canonical_url: "https://www.nutrient.io/guides/web/features/customized-search/" md_url: "https://www.nutrient.io/guides/web/features/customized-search.md" last_updated: "2026-05-22T22:19:39.091Z" description: "Learn how to implement and customize full-text search functionality in PDF documents using JavaScript with Nutrient Web SDK. Start your free trial today!" --- # Search text in PDFs using JavaScript Nutrient Web SDK provides a robust full-text search functionality for PDFs. It counts the occurrences of a search term, allows seamless navigation through the results, and highlights all matches directly in the document. Essentially, it operates much like your browser’s search feature. But what if you need a customized PDF search using JavaScript to behave differently or meet specific requirements? [Try for free](https://www.nutrient.io/sdk/web/getting-started.md) [Launch demo](https://www.nutrient.io/demo/pdf-search-ui/) ## Customizing PDF search with JavaScript Nutrient Web SDK enables developers to customize search behavior by hooking into search queries via the `search.termChange` event, which triggers on every text change in the search field: ```js let lastSearchTerm = ""; instance.addEventListener("search.termChange", async (event) => { // Opt out from the default implementation. event.preventDefault(); const { term } = event; // Update the search term in the search box. Without this line, // the search box would stay empty. instance.setSearchState((state) => state.set("term", term)); lastSearchTerm = term; // Perform a custom search for the term. const results = await customSearch(term, instance); // Our results could return in a different order than expected. // Let's make sure only results matching our current term are applied. if (term!== lastSearchTerm) { return; } // Finally, we apply the results. Note that you can also modify // the search state first and then pass the new state // to `instance.setSearchState`. const newState = instance.searchState.set("results", results); instance.setSearchState(newState); }); ``` For instance, if you want your PDF search results to match only whole words, you can achieve this by leveraging the `customSearch` function. This function utilizes Nutrient Web SDK’s `instance.search` API, requiring `instance` as an argument. After executing the default search, results can be filtered to display only whole-word matches, ensuring a more precise customized PDF search experience: ```js async function customSearch(term, instance) { // We would get an error if we called `instance.search` with a term of // 2 characters or less. if (term.length <= 2) { return NutrientViewer.Immutable.List([]); } // Let's take the results from the default search as the foundation. const results = await instance.search(term); // We only want to find whole words that match the term we entered. const filteredResults = results.filter((result) => { const searchWord = new RegExp(`\\b${term}\\b`, "i"); return searchWord.test(result.previewText); }); return filteredResults; } ``` ## Highlighting custom search results You can highlight custom search results using one of the following: - [With highlight annotations](https://www.nutrient.io/guides/web/features/customized-search.md#highlighting-custom-search-results-with-highlight-annotations) - [With custom overlay items](https://www.nutrient.io/guides/web/features/customized-search.md#highlighting-custom-search-results-with-custom-overlay-items) ### Highlighting custom PDF search results with highlight annotations To enhance your customized PDF search experience, you can visually emphasize search results with highlight annotations. Follow the steps below: 1. Use the [`search`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#search) API to perform a search across the entire PDF or a specific page range. 2. Use the [`create`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#create) API to generate highlight annotations around the search results, ensuring users can easily locate key information. The code below highlights the word `hello` on all the pages of a PDF document: ```js try { const results = await instance.search("hello"); const annotations = results.map((result) => { return new NutrientViewer.Annotations.HighlightAnnotation({ pageIndex: result.pageIndex, rects: result.rectsOnPage, boundingBox: NutrientViewer.Geometry.Rect.union(result.rectsOnPage) }); }); await instance.create(annotations); console.log(`Created ${annotations.size} highlight annotations`); } catch (error) { console.error("Failed to search and highlight:", error.message); } ``` ### Highlighting custom PDF search results with custom overlay items For a more dynamic approach to emphasizing PDF search results, you can use custom overlay items. Follow the steps below: 1. Perform a search across the PDF or specific pages using the [`search`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#search) API. 2. Surround the search results with [custom overlay items](https://www.nutrient.io/api/web/NutrientViewer.CustomOverlayItem.html) to add a layer of interactivity and style to the document. The code below highlights the word `hello` on all the pages of a PDF document: ```js instance.search("hello").then((results) => { results.toJS().forEach((result, i) => { const div = document.createElement("div"); div.style.backgroundColor = "#808000"; div.style.mixBlendMode = "multiply"; div.style.opacity = 0.5; div.style.width = result.rectsOnPage[0].width + "px"; div.style.height = result.rectsOnPage[0].height + "px"; const item = new NutrientViewer.CustomOverlayItem({ id: "overlay" + i, node: div, pageIndex: result.pageIndex, position: new NutrientViewer.Geometry.Point({ x: result.rectsOnPage[0].left, y: result.rectsOnPage[0].top }) }); instance.setCustomOverlayItem(item); }); }).catch(console.log); ``` ## Implementing a custom PDF search functionality Take your customized PDF search experience to the next level by implementing your own search logic. Your `customSearch` function could range from a simple local implementation, like the one in the example above, to a robust query sent to a large search data center. The key is to return the search results in the correct format for the `searchState`. Ensure your results are provided as a [`NutrientViewer.Immutable.List`](https://www.nutrient.io/api/web/NutrientViewer.Immutable.List.html) of [`NutrientViewer.SearchResult`](https://www.nutrient.io/api/web/NutrientViewer.SearchResult.html) for seamless integration with Nutrient Web SDK’s customized PDF search capabilities. ## Additional information For more information, see our detailed API documentation pages: - [`NutrientViewer.SearchTermChangeEvent`](https://www.nutrient.io/api/web/NutrientViewer.SearchTermChangeEvent.html) - [`NutrientViewer.SearchState`](https://www.nutrient.io/api/web/NutrientViewer.SearchState.html) - [`NutrientViewer.Instance.setSearchState`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#setSearchState) - [`NutrientViewer.SearchResult`](https://www.nutrient.io/api/web/NutrientViewer.SearchResult.html) --- ## Related pages - [JavaScript PDF search library](/guides/web/search.md) - [Search PDFs in our JavaScript viewer](/guides/web/search/built-in-ui.md) - [Search PDF annotations](/guides/web/search/annotation-search.md)