Section:

Programmatic search with WebViewer

Besides the basic text search functions from WebViewer UI, WebViewer provides methods for more low level control of text search. They are:

The textSearchInit function is used to start a text search and the displaySearchResult, displayAdditionalSearchResult, and setActiveSearchResult functions are used to highlight the results. An example of textSearchInit being used can be seen below:

1WebViewer({ ... }, viewerElement).then(instance => {
2  const { documentViewer, Annotations, Search } = instance.Core;
3  documentViewer.setSearchHighlightColors({
4    // setSearchHighlightColors accepts both Annotations.Color objects or 'rgba' strings
5    searchResult: new Annotations.Color(0, 0, 255, 0.5),
6    activeSearchResult: 'rgba(0, 255, 0, 0.5)'
7  });
8  documentViewer.addEventListener('documentLoaded', () => {
9    const searchText = 'TEXT TO SEARCH';
10    const mode = [Search.Mode.PAGE_STOP, Search.Mode.HIGHLIGHT];
11    const searchOptions = {
12      // If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
13      fullSearch: true,
14      // The callback function that is called when the search returns a result.
15      onResult: result => {
16        // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
17        if (result.resultCode === Search.ResultCode.FOUND) {
18          const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
19          // now that we have the result Quads, it's possible to highlight text or create annotations on top of the text
20        }
21      }
22    };
23    documentViewer.textSearchInit(searchText, mode, searchOptions);
24  });
25});

Related Links

In the above code the textSearchInit method is used to search the document. It takes the following input parameters:

  • searchPattern: A pattern to search for
  • mode: A number that encodes the search options, generated by bitwise ORing options together
  • searchOptions: An object that contains the search options.
  • searchCallBack: A callback function that get called when a match has been found or at the end of document (or when using PAGE_STOP, at the end of a page)

The 'mode' value it takes in can be created by doing bitwise OR operations on the different SearchMode properties. The search modes are:

  • CASE_SENSITIVE: Text must match the case of the search term
  • SEARCH_UP: Search starts on the last page, and search backwards to first page
  • PAGE_STOP: Search will invoke the callback function when it finishes searching a page
  • HIGHLIGHT: Bounding box of found term will be included
  • AMBIENT_STRING: Characters surrounding the search term will be included
  • WHOLE_WORD: Text must be a whole word
  • REGEX: Search text can contain regular expressions
  • WILD_CARD: Search text can contain wildcards

When the callback function is called, it receives a SearchResults object that has a few useful properties. It has a 'resultCode' property, which has one of the following values

  • ResultCode.PAGE: Reached the end of a page
  • ResultCode.FOUND: Found a match
  • ResultCode.DONE: Done searching the document

The searchResults will also have a 'quads' property that contains an array of textQuad objects. You can call the getPoints function on textQuad objects to receive a Quad object.

Did you find this helpful?

Trial setup questions?

Ask experts on Discord

Need other help?

Contact Support

Pricing or product questions?

Contact Sales