HelpBot Assistant

How can I help you?

Text search in React PDF Viewer component

25 Feb 202624 minutes to read

The Text Search feature finds and highlights text in the PDF document. You can enable or disable text search using the examples below.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        enableTextSearch={true}
        style={{ 'height': '640px' }}>

              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
                                  ThumbnailView, Print, TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';

function App() {
  return (<div>
    <div className='control-section'>
      {/* Render the PDF Viewer */}
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        enableTextSearch={true}
        serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
        style={{ 'height': '640px' }}>

              <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
                                  ThumbnailView, Print, TextSelection, TextSearch]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

Text search Features

Real-time search suggestions while typing

Entering text into the search input dynamically displays search suggestions based on the provided input. Suggestions update in real time as the user types, offering quick access to relevant matches.

Search suggestion popup

Selecting search suggestions from the popup

Selecting a suggestion from the popup navigates directly to its occurrences in the document.

Select suggestion from popup

Case-sensitive search (‘Match Case’)

When ‘Match Case’ is enabled, only exact case-sensitive matches are highlighted and navigable.

Match case search results

Case-insensitive search (no ‘Match Case’)

When ‘Match Case’ is disabled, searches match text regardless of case and highlight all occurrences.

No match case search results

Match Any Word

When ‘Match Any Word’ is enabled, the input is split into words and the viewer searches for any of the words, updating suggestions and matches in real time.

Match any word suggestions

Programmatic Search with Settings

While the PDF Viewer’s toolbar provides a user-friendly way to search, you can also trigger and customize searches programmatically using the searchText method and its options.

Using searchText

The searchText method allows you to initiate a search with specific criteria.

  • TS
    • import React, { useRef } from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function SearchExample() {
  const viewerRef = useRef<any>(null);

  const doSearch = () => {
    viewerRef.current?.textSearch.searchText('search text', false, false);
  };

  return (
    <>
      <button onClick={doSearch}>Search</button>
      <PdfViewerComponent
        ref={viewerRef}
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        style={{ height: '640px' }}
      />
    </>
  );
}

    Match Case

    To perform a case-sensitive search, set the isMatchCase parameter to true. This corresponds to the ‘Match Case’ checkbox in the search panel.

  • TS
    • import React, { useEffect, useRef } from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function MatchCaseExample() {
  const viewerRef = useRef<any>(null);

  useEffect(() => {
    // This will only find instances of "PDF" in uppercase.
    viewerRef.current?.textSearch.searchText('PDF', true);
  }, []);

  return (
    <PdfViewerComponent
      ref={viewerRef}
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ height: '640px' }}
    />
  );
}

    Match Whole Word

    You can search for whole words by setting the isMatchWholeWord parameter to true. When this is enabled, the search will only match occurrences where the search term is not part of a larger word. For example, a search for “view” will not match “viewer”.

  • TS
    • import React, { useEffect, useRef } from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function WholeWordExample() {
  const viewerRef = useRef<any>(null);

  useEffect(() => {
    // This will find "pdf" but not "pdf-succinctly"
    viewerRef.current?.textSearch.searchText('pdf', false, true);
  }, []);

  return (
    <PdfViewerComponent
      ref={viewerRef}
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ height: '640px' }}
    />
  );
}

    Note on ‘Match Any Word’: The UI ‘Match Any Word’ option splits the input into multiple words and searches for any of them. This differs from the isMatchWholeWord parameter of searchText, which enforces a whole-word match for the entire search string.

    The following text search methods are available in the PDF Viewer:

    Text search toolbar and results

    Find text method

    Searches for the specified text or an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. If a specific page index is provided, it returns the bounding rectangles for these search strings on that page; otherwise, it returns the bounding rectangles for all pages in the document where the strings were found.

    Find and get the bounds of a text

    Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for all pages in the document where the text was found. The below code snippet shows how to get the bounds of the given text:

    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText('pdf', false));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText('pdf', false));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

    Find and get the bounds of a text on the desired page

    Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter. It returns the bounding rectangles for that page in the document where the text was found. The below code snippet shows how to get the bounds of the given text from the desired page:

    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText('pdf', false, 7));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText('pdf', false, 7));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      serviceUrl="https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

    Find and get the bounds of the list of text

    Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for all pages in the document where the strings were found.

    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText(['pdf', 'adobe'], false));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText(['pdf', 'adobe'], false));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

    Find and get the bounds of the list of text on desired page

    Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for these search strings on that particular page where the strings were found.

    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText(['pdf', 'adobe'], false, 7));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
    <body>
    <button onclick="textBounds()">Text Bounds</button>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
</body>

<script>
    function textBounds(){
        var viewer = document.getElementById('container').ej2_instances[0];
        console.log(viewer.textSearch.findText(['pdf', 'adobe'], false, 7));
    }
 </script>

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import './index.css';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView, ThumbnailView, Print, TextSelection, Annotation, TextSearch, FormFields, FormDesigner, Inject } from '@syncfusion/ej2-react-pdfviewer';
export function App() {
  return (<div>
    <div className='control-section'>
      <PdfViewerComponent
      id="container"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      serviceUrl="https://localhost:44309/pdfviewer"
      style={{ 'height': '680px' }}
      >
        <Inject services={[Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, BookmarkView, ThumbnailView,
          Print, TextSelection, TextSearch, FormFields, FormDesigner]} />
      </PdfViewerComponent>
    </div>
  </div>);
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);

    Text Search Events

    The PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process.

    textSearchStart

    The textSearchStart event is raised the moment a search is initiated from the toolbar UI or by calling textSearch.searchText(...) programmatically.

    • Triggers when: the user submits a term in the search box or when code calls the search API.

    • Event arguments include (TextSearchStartEventArgs):

      • searchText: string — the term to search.
      • matchCase: boolean — whether case-sensitive search is enabled.
      • isMatchWholeWord: boolean — whether whole-word matching is enabled.
      • name: string — event name.
      • cancel: boolean — set to true to cancel the default search.
    import React from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
  return (
    <PdfViewerComponent
      id="pdfViewer"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      textSearchStart={(args: any) => {
        // args.searchText contains the term being searched
        // args.cancel can be set to true to stop the default search
        console.log(`Text search started for: "${args.searchText}"`);
      }}
      style={{ height: '640px' }}
    />
  );
}

    textSearchHighlight

    The textSearchHighlight event fires whenever an occurrence is highlighted during search or when navigating to next/previous results.

    • Triggers when: a match is brought into view and highlighted (including navigation between matches).
    • Event arguments include (TextSearchHighlightEventArgs):
      • bounds: RectangleBoundsModel RectangleBoundsModel[] — rectangles of the highlighted match.
      • pageNumber: number — page index where the match is highlighted.
      • searchText: string — the searched term.
      • matchCase: boolean — whether case-sensitive search was used.
      • name: string — event name.
    import React from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
  return (
    <PdfViewerComponent
      id="pdfViewer"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      textSearchHighlight={(args: any) => {
        // args.bounds provides the rectangle(s) of the current match
        console.log('Highlighted match bounds:', args.bounds);
      }}
      style={{ height: '640px' }}
    />
  );
}

    textSearchComplete

    The textSearchComplete event is raised after the search engine finishes scanning and resolving all matches for the current query.

    • Triggers when: the search for the submitted term has completed across the document.
    • Typical uses:
      • Update UI with the total number of matches and enable navigation controls.
      • Hide loading indicators or show a “no results” message if none were found.
      • Record analytics for search effectiveness.
    • Event arguments include (TextSearchCompleteEventArgs):
      • totalMatches: number — total number of occurrences found.
      • isMatchFound: boolean — indicates whether at least one match was found.
      • searchText: string — the searched term.
      • matchCase: boolean — whether case-sensitive search was used.
      • name: string — event name.
    import React from 'react';
import { PdfViewerComponent } from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
  return (
    <PdfViewerComponent
      id="pdfViewer"
      documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
      textSearchComplete={(args: any) => {
        // args.totalMatches may indicate how many results were found (when available)
        console.log('Text search completed.', args);
      }}
      style={{ height: '640px' }}
    />
  );
}

    See also