How to Find and Highlight Text in PDF Using JavaScript

In today’s digital age, the ability to search for and highlight text within PDF documents is a critical feature for many web applications. Whether you’re developing an application for document management, legal research, or educational purposes, a JavaScript PDF Viewer control offers the powerful tools needed for these tasks. This blog will guide you through the process of finding and highlighting text through UI or programmatically in PDF documents using the MESCIUS JavaScript Document Solutions PDF Viewer.

The MESCIUS JavaScript Document Solutions PDF Viewer (DsPdfViewer) included with Document Solutions for PDF (DsPdf), is a feature-rich, robust tool designed to handle complex PDF viewing and interaction needs within web applications. It provides extensive features for developers, allowing deep customization and control over PDF rendering, annotation, and interaction features, including text search and highlighting.

In this blog, we will explore reasons to implement text search and highlighting in your application and will learn how to:

• Set Up the JavaScript Document Solutions PDF Viewer
• Find Text Through the PDF Viewer UI
• Find Text Programmatically with JavaScript
  • Highlight Found Text
  • Highlight Results with Highlight Annotations

Ready to Get Started? Download Document Solutions for PDF Today!

Why Implement Text Search and Highlighting?

Adding programmatic text search and highlighting capabilities can greatly enhance your application’s functionality:

• Improved Navigation: Users can easily locate and focus on important information within large or complex documents.
• Enhanced User Experience: Highlighting text helps users quickly identify relevant sections, improving readability and comprehension.
• Customizable Workflows: Automated text highlighting can be tailored to specific business needs, such as highlighting keywords in legal documents or marking up study materials.

Set Up the JavaScript Document Solutions PDF Viewer

Before we dive into the code, follow these steps to integrate DsPdfViewer in your project.

Find Text Through the PDF Viewer UI

DsPdfViewer offers advanced search capabilities within PDF documents, including options like match case, wildcards, proximity search, and more. The default search tool is a floating search bar, accessible through the toolbar or Ctrl+F, which allows real-time, dynamic searching as you type. Advanced settings can be customized through the floating search bar, which can be closed using the ESC key. 

Alternatively, users can opt for a sidebar search panel by disabling the floating bar. This panel provides similar advanced search options and displays the total count of results and page numbers. To activate the sidebar search panel, set useFloatingSearchBar to False.

// Use sidebar search panel instead of floating search bar.
var viewer = new DsPdfViewer("#root", { useFloatingSearchBar: false });

Press Ctrl+F and the sidebar will open. Enter search keywords and try out the advanced search options in the Viewer.

Find Text Programmatically with JavaScript

To search for text within a PDF document using DsPdfViewer, you can leverage the built-in text search API. This API allows you to search for specific text across the document or within specified pages.

After the viewer is set up, modify the loadPdfViewer function by setting up the search terms ‘searchText’ and ‘findOptions’ to set search parameters. You can pass the findOptions parameter in the viewer.searcher.search(..) method. The viewer.searcher class generates the search results.

var afterOpenPromise = new Promise((resolve) => { viewer.onAfterOpen.register(() => { resolve(); }); });
    await afterOpenPromise;
    var searchText="wetlands";
    // Adjust search options as needed:
    var findOptions = {
        Text: searchText,
        MatchCase: true,
        WholeWord: true,
        StartsWith: false,
        EndsWith: false,
        Wildcards: false,
        Proximity: false,
        SearchBackward: false,
        HighlightAll: true
    };
var searchIterator = await viewer.searcher.search(findOptions);
var searchResult = await searchIterator.next();
viewer.searcher.cancel();

Highlight Found Text 

After setting up these parameters, you can programmatically call the viewer.searcher.highlight(..) method to highlight the search term.

viewer.searcher.highlight(searchResult.value);

Highlight Results with Highlight Annotations

Alternatively, you can set up Highlight Annotations programmatically to customize the highlighting of words in the viewer. The annotation provides additional properties that can be applied while highlighting the search results. The annotations are stored in the saved PDF and will show in Acrobat Reader and other viewers.

Within the loadPdfViewer function, call the createHighlights(..) method and pass the ‘viewer’ instance and 'searchResults' parameter.

 createHighlights(viewer, searchResults);

Add the createHighlights() method and code to set customization options for highlighting the search results.

// Create highlight annotations for search results:
async function createHighlights(viewer, searchResults) {
    for (let i = 0; i < searchResults.length; i++) {
        const searchResultValue = searchResults[i].value;
        await viewer.addAnnotation(searchResultValue.PageIndex, {
            annotationType: 9, // AnnotationTypeCode.HIGHLIGHT
            subtype: "Highlight",
            color: [255, 63, 127], // Highlight color (RGB)
            rect: searchResultValue.coordinates.outerRect // Rectangle coordinates of the text
        });
}

You can add Highlight annotations and save PDF documents without a trip to the server. Follow these steps to configure the PDF Viewer for Wasm-based editing.

Additionally, if you want to save the PDF document on the server, follow these steps to configure the viewer for server-side editing.

Refer to the following resources to learn more about finding and highlighting text with DsPdfViewer:

Demo

• Find Text Using Code
• Using Search API from Code
• Add Markup in Code

Documentation

• Using Search in a JavaScript PDF Viewer
• Floating Search Bar
• Sidebar Search Panel
• Advanced Search Options

Ready to Try It Out? Download Document Solutions for PDF Today!

Conclusion

Finding and highlighting text in PDF documents using DsPdfViewer is a powerful way to enhance user interaction and navigation within your web applications. With its robust API and extensive customization options, DsPdfViewer allows you to build a highly interactive and user-friendly PDF viewer tailored to your application’s needs.

Whether you’re building a document management system, an educational platform, or any application that requires advanced PDF handling, DsPdf offers the tools you need to deliver a top-notch user experience.

If you found this guide helpful or have any questions, feel free to leave a comment below. Happy coding!