Searching Text in PDF Documents using JavaScript

WebViewer UI has a built-in search panel and provides an API for controlling the search UI. Launch Demo to see WebViewer search. The following functions can be used to interact with the text search:

• addSearchListener: Add a function that is called whenever there is a match or when finishing a full search.
• removeSearchListener: Remove a search callback function.
• searchText: Search and highlight the first instance of a search term. Can be called more than once to search for the next instance.
• searchTextFull: Search for all instances of a search term. This will also bring up the search sidebar shown in the image below.

The following is an example of searchTextFull being used to search text and adding a searchListener callback to create annotations on top of the results.

WebViewer({ ... }, viewerElement).then(instance => {
  const { annotationManager, documentViewer, Annotations } = instance.Core;

  const searchListener = (searchPattern, options, results) => {
    // add redaction annotation for each search result
    const newAnnotations = results.map(result => {
      const annotation = new Annotations.RedactionAnnotation();
      annotation.PageNumber = result.pageNum;
      annotation.Quads = result.quads.map(quad => quad.getPoints());
      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
      return annotation;
    });

    annotationManager.addAnnotations(newAnnotations);
    annotationManager.drawAnnotationsFromList(newAnnotations);
  };

  documentViewer.addEventListener('documentLoaded', () => {
    const searchPattern = 'text to search';
    // searchPattern can be something like "search*m" with "wildcard" option set to true
    // searchPattern can be something like "search1|search2" with "regex" option set to true

    // options default values are false
    const searchOptions = {
      caseSensitive: true,  // match case
      wholeWord: true,      // match whole words only
      wildcard: false,      // allow using '*' as a wildcard value
      regex: false,         // string is treated as a regular expression
      searchUp: false,      // search from the end of the document upwards
      ambientString: true,  // return ambient string as part of the result
    };

    instance.UI.addSearchListener(searchListener);
    // start search after document loads
    instance.UI.searchTextFull(searchPattern, searchOptions);
  });
});

After the document been loaded, a searchListener callback function is added and searchTextFull is used to search the document. When calling searchTextFull, the searchListener callback is invoked once and receives an array of all the results (even if nothing was found). When using the searchText method, the 'searchListener' callback will only be invoked if a result was found.

When the searchListener callback function is called, it'll receive the searchPattern and options used for the search and an array containing ofSearchResults objects. In the above example, it creates redaction annotations on top of the matching text to illustrate how SearchResults objects can be used.