Find Text in React PDF Viewer

13 Jul 202617 minutes to read

Find text method

Use the findText method to locate a string or an array of strings and return the bounding rectangles for each match. Optional parameters support case-sensitive comparisons and page scoping so you can retrieve coordinates for a single page or the entire document.

Find and get the bounds of a text

This example searches the document for the text pdf (case-insensitive) and returns the bounding rectangles of every match across all pages. The following code snippet shows how to get the bounds of the specified text:

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, PageOrganizer, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef } from 'react';

export default function App() {
    const viewerRef: React.RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const findText = () => {
        console.log((viewerRef.current as PdfViewerComponent).textSearch.findText('pdf', false));
    };
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={findText}>Find Text Bounds</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

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

This example searches the document for the text pdf and returns the bounding rectangles of every match on page index 7 only. The search is case-insensitive. The following code snippet shows how to retrieve bounds for the specified text on a specific page:

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, PageOrganizer, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef } from 'react';

export default function App() {
    const viewerRef: React.RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const findText = () => {
        console.log((viewerRef.current as PdfViewerComponent).textSearch.findText('pdf', false, 7));
    };
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={findText}>Find Text Bounds</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Find and get the bounds of the list of text

This example searches the document for the array of strings ['adobe', 'pdf'] (case-insensitive) and returns the bounding rectangles for each occurrence across all pages where the strings are found.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, PageOrganizer, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef } from 'react';

export default function App() {
    const viewerRef: React.RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const findText = () => {
        console.log((viewerRef.current as PdfViewerComponent).textSearch.findText(['adobe', 'pdf'], false));
    };
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={findText}>Find Text Bounds</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

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

This example searches the document for the array of strings ['adobe', 'pdf'] and returns the bounding rectangles for each occurrence on page index 7 only. The search is case-insensitive.

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, PageOrganizer, TextSelection, TextSearch, Print, Inject
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef } from 'react';

export default function App() {
    const viewerRef: React.RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const findText = () => {
        console.log((viewerRef.current as PdfViewerComponent).textSearch.findText(['adobe', 'pdf'], false, 7));
    };
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={findText}>Find Text Bounds</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

View Sample in GitHub

Find text with findTextAsync

The findTextAsync method is designed for performing an asynchronous text search within a PDF document. You can use it to search for a single string or multiple strings, with the ability to control case sensitivity. By default, the search is applied to all pages of the document. However, you can adjust this behavior by specifying the page number (pageIndex), which allows you to search only a specific page if needed. Use findTextAsync instead of the synchronous findText when you want to avoid blocking the UI thread, when the document is large, or when you need to await the result before chaining further logic.

Find text with findTextAsync in React PDF Viewer

The findTextAsync method searches for a string or array of strings asynchronously and returns bounding rectangles for each match. Use it to locate text positions across the document or on a specific page.

Here is an example of how to use findTextAsync:

import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, FormDesigner,
    FormFields, PageOrganizer, TextSelection, TextSearch, Print, Inject,
    type SearchResultModel
} from '@syncfusion/ej2-react-pdfviewer';
import { useRef } from 'react';

export default function App() {
    const viewerRef: React.RefObject<PdfViewerComponent | null> = useRef<PdfViewerComponent>(null);
    const findText = async () => {
        const result: SearchResultModel[] = await (viewerRef.current as PdfViewerComponent).textSearch.findTextAsync('pdf', false);
        console.log(result);
    };
    const findTexts = async () => {
        const result: Record<string, SearchResultModel[]> = await (viewerRef.current as PdfViewerComponent).textSearch.findTextAsync(['pdf', 'adobe'], false);
        console.log(result);
    };
    return (
        <div style={{ height: '100vh' }}>
            <button onClick={findText}>Find Text</button>
            <button onClick={findTexts}>Find Texts</button>
            <PdfViewerComponent
                id="PdfViewer"
                ref={viewerRef}
                documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                resourceUrl="https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib"
                style={{ height: '100%' }}
            >
                <Inject
                    services={[
                        TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification,
                        Annotation, FormDesigner, FormFields, PageOrganizer
                    ]}
                />
            </PdfViewerComponent>
        </div>
    );
}

Parameters

**text (string string[]):** The text or array of texts to search for in the document.

matchCase (boolean): Whether the search is case-sensitive. true matches exact case; false ignores case.

pageIndex (optional, number): Zero-based page index to search. If omitted, searches all pages.

NOTE

pageIndex is zero-based; specify 0 for the first page. Omit this parameter to search the entire document.

Example workflow

findTextAsync(‘pdf’, false):
This will search for the term “pdf” in a case-insensitive manner across all pages of the document.

findTextAsync([‘pdf’, ‘the’], false):
This will search for the terms “pdf” and “the” in a case-insensitive manner across all pages of the document.

findTextAsync(‘pdf’, false, 0):
This will search for the term “pdf” in a case-insensitive manner only on the first page (page 0).

findTextAsync([‘pdf’, ‘the’], false, 1):
This will search for the terms “pdf” and “the” in a case-insensitive manner only on the second page (page 1).

View sample in GitHub

See Also