Some test text!

Hamburger Icon

Web / Guides / Programmatic Search

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:

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

    // setSearchHighlightColors accepts both Annotations.Color objects or 'rgba' strings
    searchResult: new Annotations.Color(0, 0, 255, 0.5),
    activeSearchResult: 'rgba(0, 255, 0, 0.5)'

  documentViewer.addEventListener('documentLoaded', () => {
    const searchText = 'TEXT TO SEARCH';
    const mode = Search.Mode.PAGE_STOP | Search.Mode.HIGHLIGHT;
    const searchOptions = {
      // If true, a search of the entire document will be performed. Otherwise, a single search will be performed.
      fullSearch: true,
      // The callback function that is called when the search returns a result.
      onResult: result => {
        // with 'PAGE_STOP' mode, the callback is invoked after each page has been searched.
        if (result.resultCode === Search.ResultCode.FOUND) {
          const textQuad = result.quads[0].getPoints(); // getPoints will return Quad objects
          // now that we have the result Quads, it's possible to highlight text or create annotations on top of the text

    documentViewer.textSearchInit(searchText, mode, searchOptions);

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.

Get the answers you need: Chat with us