Section:

Searching Text in PDF Documents using JavaScript

WebViewer UI

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.

Apryse Docs Image

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.

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { annotationManager, documentViewer, Annotations } = instance.Core;
3
4  const searchListener = (searchPattern, options, results) => {
5    // add redaction annotation for each search result
6    const newAnnotations = results.map(result => {
7      const annotation = new Annotations.RedactionAnnotation();
8      annotation.PageNumber = result.pageNum;
9      annotation.Quads = result.quads.map(quad => quad.getPoints());
10      annotation.StrokeColor = new Annotations.Color(136, 39, 31);
11      return annotation;
12    });
13
14    annotationManager.addAnnotations(newAnnotations);
15    annotationManager.drawAnnotationsFromList(newAnnotations);
16  };
17
18  documentViewer.addEventListener('documentLoaded', () => {
19    const searchPattern = 'text to search';
20    // searchPattern can be something like "search*m" with "wildcard" option set to true
21    // searchPattern can be something like "search1|search2" with "regex" option set to true
22
23    // options default values are false
24    const searchOptions = {
25      caseSensitive: true,  // match case
26      wholeWord: true,      // match whole words only
27      wildcard: false,      // allow using '*' as a wildcard value
28      regex: false,         // string is treated as a regular expression
29      searchUp: false,      // search from the end of the document upwards
30      ambientString: true,  // return ambient string as part of the result
31    };
32
33    instance.UI.addSearchListener(searchListener);
34    // start search after document loads
35    instance.UI.searchTextFull(searchPattern, searchOptions);
36  });
37});

Related Links

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.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales