Find text method in JavaScript PDF Viewer

15 Jan 202612 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

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 following code snippet shows how to get the bounds of the specified text:
The following code snippet shows how to get the bounds of the specified text:

<div id="textbounds"><button>FindTextBounds</button></div>
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText('pdf', false));
});
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText('pdf', false));
});

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 following code snippet shows how to retrieve bounds for the specified text on a selected page:
The following code snippet shows how to retrieve bounds for the specified text on a selected page:

<div id="textbounds"><button>FindTextBounds</button></div>
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText('pdf', false, 7));
});
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText('pdf', false, 7));
});

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.

<div id="textbounds"><button>FindTextBounds</button></div>
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
});
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
});

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.

<div id="textbounds"><button>FindTextBounds</button></div>
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
});
ej.pdfviewer.PdfViewer.Inject(
    ej.pdfviewer.TextSelection,
    ej.pdfviewer.TextSearch,
    ej.pdfviewer.Print,
    ej.pdfviewer.Navigation,
    ej.pdfviewer.Toolbar,
    ej.pdfviewer.Magnification,
    ej.pdfviewer.Annotation,
    ej.pdfviewer.FormDesigner,
    ej.pdfviewer.FormFields
);

var viewer = new ej.pdfviewer.PdfViewer({
    documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
    serviceUrl: 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'
});
viewer.appendTo('#pdfViewer');
document.getElementById('textbounds').addEventListener('click', function () {
    console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
});

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.

Find text with findTextAsync in TypeScript 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:

Example 1: Search for a single string (‘pdf’) case-insensitively across all pages

 <button id="findText">Find Text</button>
 <button id="findTexts">Find Texts</button>
// ...existing code...
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.TextSearch,
  ej.pdfviewer.Print,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner,
  ej.pdfviewer.PageOrganizer
);

var viewer = new ej.pdfviewer.PdfViewer();
viewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
viewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
viewer.appendTo('#PdfViewer');

var findTextButton = document.getElementById('findText');
if (findTextButton) {
  findTextButton.addEventListener('click', function () {
    viewer.textSearchModule.findTextAsync('pdf', false).then(function (res) {
      console.log(res); // Logs the search result for the term 'pdf'
    });
  });
}

Example 2: Search for multiple strings ([‘pdf’, ‘the’]) case-insensitively across all pages

var findTextButtons = document.getElementById('findTexts');
if (findTextButtons) {
  findTextButtons.addEventListener('click', function () {
    viewer.textSearchModule.findTextAsync(['pdf', 'the'], false).then(function (res) {
      console.log(res); // Logs the search result for the terms 'pdf' and 'the'
    });
  });
}

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.

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

Text Search Features
Text Search Events
Extract Text
Extract Text Options
Extract Text Completed