Skip to content

Commit da5c8ab

Browse files
AnanthaGokulaRamanAnanthaGokulaRaman
authored
Merge pull request #2022 from syncfusion-content/996399-TextSearchRevamp
996399: Text search Restructure and Revamp
2 parents 0c0ad40 + 7747fae commit da5c8ab

7 files changed

Lines changed: 494 additions & 416 deletions

File tree

‎Document-Processing-toc.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1412,7 +1412,6 @@
14121412
</li>
14131413
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/magnification">Magnification</a></li>
14141414
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/accessibility">Accessibility</a></li>
1415-
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/text-search">Text Search</a></li>
14161415
<li>Annotation
14171416
<ul>
14181417
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/overview">Overview</a></li>
@@ -1461,6 +1460,14 @@
14611460
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/annotations/annotations-api">APIs</a></li>
14621461
</ul>
14631462
</li>
1463+
<li>Text Search and Extraction
1464+
<ul>
1465+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/text-search/text-search-features">Text Search Features</a></li>
1466+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/how-to/extract-text-ts">Extract Text with Options</a></li>
1467+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/text-search/text-search-events">Text Search Events</a></li>
1468+
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/text-search/find-text">Find Text Method</a></li>
1469+
</ul>
1470+
</li>
14641471
<li>Redaction
14651472
<ul>
14661473
<li><a href="/document-processing/pdf/pdf-viewer/javascript-es6/Redaction/overview">Overview</a></li>

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/extract-text-option-ts.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,4 +50,12 @@ viewer.appendTo("#PdfViewer");
5050

5151
N> Text search: When using the `extractTextOption.TextOnly` or `extractTextOption.None` options, the `findText` method is unavailable. Use the `findTextAsync` method to perform text searches asynchronously.
5252

53-
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
53+
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Extract%20Text%20Option)
54+
55+
## See Also
56+
57+
[Text Search Features](../text-search/text-search-features)
58+
[Find Text](../text-search/find-text)
59+
[Text Search Events](../text-search/text-search-events)
60+
[Extract Text](../how-to/extract-text-ts.md)
61+
[Extract Text Completed](./extract-text-completed-ts)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/how-to/extract-text-ts.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,11 @@ extractTextButtons.addEventListener('click', function () {
7575
- Single page: Extracts text from page 1 (`startIndex = 1`) using `TextOnly`.
7676
- Multiple pages: Extracts text from pages 0–2 (`startIndex = 0, endIndex = 2`) using `TextOnly`.
7777

78-
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
78+
[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Extract%20Text)
79+
80+
## See Also
81+
82+
[Extract Text Options](./extract-text-option-ts)
83+
[Find Text](../text-search/find-text)
84+
[Text Search Features](../text-search/text-search-events)
85+
[Text Search Events](../text-search/text-search-events)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search.md‎

Lines changed: 0 additions & 413 deletions
This file was deleted.

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/find-text.md‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
---
2+
layout: post
3+
title: Find Text in TypeScript PDF Viewer control | Syncfusion
4+
description: Learn how to configure text search using find text and run programmatic searches in the Syncfusion TypeScript PDF Viewer.
5+
platform: document-processing
6+
control: Text search
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Find text method in TypeScript PDF Viewer
12+
13+
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.
14+
15+
## Find and get the bounds of a text
16+
17+
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:
18+
The following code snippet shows how to get the bounds of the specified text:
19+
20+
```html
21+
<div id="textbounds"><button>FindTextBounds</button></div>
22+
```
23+
24+
{% tabs %}
25+
{% highlight ts tabtitle="Standalone" %}
26+
27+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
28+
29+
// Inject required modules
30+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
31+
32+
const viewer: PdfViewer = new PdfViewer({
33+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
34+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
35+
});
36+
viewer.appendTo("#pdfViewer");
37+
document.getElementById('textbounds')?.addEventListener('click', function() {
38+
console.log(viewer.textSearch.findText('pdf', false));
39+
});
40+
41+
{% endhighlight %}
42+
{% highlight ts tabtitle="Server-backed" %}
43+
44+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
45+
46+
// Inject required modules
47+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
48+
49+
const viewer: PdfViewer = new PdfViewer({
50+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
51+
serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
52+
});
53+
viewer.appendTo("#pdfViewer");
54+
document.getElementById('textbounds')?.addEventListener('click', function() {
55+
console.log(viewer.textSearch.findText('pdf', false));
56+
});
57+
58+
{% endhighlight %}
59+
{% endtabs %}
60+
61+
## Find and get the bounds of a text on the desired page
62+
63+
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:
64+
The following code snippet shows how to retrieve bounds for the specified text on a selected page:
65+
66+
```html
67+
<div id="textbounds"><button>FindTextBounds</button></div>
68+
```
69+
70+
{% tabs %}
71+
{% highlight ts tabtitle="Standalone" %}
72+
73+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
74+
75+
// Inject required modules
76+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
77+
78+
const viewer: PdfViewer = new PdfViewer({
79+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
80+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
81+
});
82+
viewer.appendTo("#pdfViewer");
83+
document.getElementById('textbounds')?.addEventListener('click', function() {
84+
console.log(viewer.textSearch.findText('pdf', false, 7));
85+
});
86+
87+
{% endhighlight %}
88+
{% highlight ts tabtitle="Server-backed" %}
89+
90+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
91+
92+
// Inject required modules
93+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
94+
95+
const viewer: PdfViewer = new PdfViewer({
96+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
97+
serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
98+
});
99+
viewer.appendTo("#pdfViewer");
100+
document.getElementById('textbounds')?.addEventListener('click', function() {
101+
console.log(viewer.textSearch.findText('pdf', false, 7));
102+
});
103+
104+
{% endhighlight %}
105+
{% endtabs %}
106+
107+
## Find and get the bounds of the list of text
108+
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.
109+
110+
```html
111+
<div id="textbounds"><button>FindTextBounds</button></div>
112+
```
113+
114+
{% tabs %}
115+
{% highlight ts tabtitle="Standalone" %}
116+
117+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
118+
119+
// Inject required modules
120+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
121+
122+
const viewer: PdfViewer = new PdfViewer({
123+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
124+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
125+
});
126+
viewer.appendTo("#pdfViewer");
127+
document.getElementById('textbounds')?.addEventListener('click', function() {
128+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
129+
});
130+
131+
{% endhighlight %}
132+
{% highlight ts tabtitle="Server-backed" %}
133+
134+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
135+
136+
// Inject required modules
137+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
138+
139+
const viewer: PdfViewer = new PdfViewer({
140+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
141+
serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
142+
});
143+
viewer.appendTo("#pdfViewer");
144+
document.getElementById('textbounds')?.addEventListener('click', function() {
145+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false));
146+
});
147+
148+
{% endhighlight %}
149+
{% endtabs %}
150+
151+
## Find and get the bounds of the list of text on desired page
152+
153+
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.
154+
155+
```html
156+
<div id="textbounds"><button>FindTextBounds</button></div>
157+
```
158+
159+
{% tabs %}
160+
{% highlight ts tabtitle="Standalone" %}
161+
162+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
163+
164+
// Inject required modules
165+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
166+
167+
const viewer: PdfViewer = new PdfViewer({
168+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
169+
resourceUrl: "https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib",
170+
});
171+
viewer.appendTo("#pdfViewer");
172+
document.getElementById('textbounds')?.addEventListener('click', function() {
173+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
174+
});
175+
176+
{% endhighlight %}
177+
{% highlight ts tabtitle="Server-backed" %}
178+
179+
import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
180+
181+
// Inject required modules
182+
PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
183+
184+
const viewer: PdfViewer = new PdfViewer({
185+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
186+
serviceUrl: "https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer",
187+
});
188+
viewer.appendTo("#pdfViewer");
189+
document.getElementById('textbounds')?.addEventListener('click', function() {
190+
console.log(viewer.textSearch.findText(['adobe', 'pdf'], false, 7));
191+
});
192+
193+
{% endhighlight %}
194+
{% endtabs %}
195+
196+
[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
197+
198+
## See Also
199+
200+
[Text Search Features](./text-search-features)
201+
[Text Search Events](./text-search-events)
202+
[Extract Text](../how-to/extract-text-ts)
203+
[Extract Text Options](../how-to/extract-text-option-ts)
204+
[Extract Text Completed](../how-to/extract-text-completed-ts)

‎Document-Processing/PDF/PDF-Viewer/javascript-es6/text-search/text-search-events.md‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
layout: post
3+
title: Text search Events in TypeScript PDF Viewer control | Syncfusion
4+
description: Learn how to handle text search events, and run programmatic searches in the Syncfusion TypeScript PDF Viewer.
5+
platform: document-processing
6+
control: Text search
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Text Search Events in TypeScript PDF Viewer
12+
13+
The PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process.
14+
15+
## textSearchStart
16+
17+
The [textSearchStart](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchstartevent) event fires as soon as a search begins from the toolbar interface or through the `textSearch.searchText` method. Use it to reset UI state, log analytics, or cancel the default search flow before results are processed.
18+
19+
- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchStartEventArgs) exposes:
20+
- `searchText`: the term being searched.
21+
- `matchCase`: indicates whether case-sensitive search is enabled.
22+
- `isMatchWholeWord`: indicates whether whole-word matching is enabled.
23+
- `name`: event name.
24+
- `cancel`: set to `true` to stop the default search.
25+
26+
```typescript
27+
const viewer: PdfViewer = new PdfViewer({
28+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
29+
textSearchStart: function (args: any) {
30+
// args.searchText contains the term being searched
31+
// args.cancel can be set to true to stop the default search
32+
console.log(`Text search started for: "${args.searchText}"`);
33+
}
34+
});
35+
viewer.appendTo('#pdfViewer');
36+
```
37+
38+
## textSearchHighlight
39+
40+
The [textSearchHighlight](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchhighlightevent) event triggers whenever a search result is brought into view, including navigation between matches. Use it to draw custom overlays or synchronize adjacent UI elements when a match is highlighted.
41+
42+
- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchHighlightEventArgs) exposes:
43+
- `bounds`: `RectangleBoundsModel | RectangleBoundsModel[]` representing the highlighted match.
44+
- `pageNumber`: page index where the match is highlighted.
45+
- `searchText`: the active search term.
46+
- `matchCase`: indicates whether case-sensitive search was used.
47+
- `name`: event name.
48+
49+
```typescript
50+
const viewer: PdfViewer = new PdfViewer({
51+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
52+
textSearchHighlight: function (args: any) {
53+
// args.bounds provides the rectangle(s) of the current match
54+
console.log('Highlighted match bounds:', args.bounds);
55+
}
56+
});
57+
viewer.appendTo('#pdfViewer');
58+
```
59+
60+
## textSearchComplete
61+
62+
The [textSearchComplete](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer#textsearchcompleteevent) event runs after the search engine finishes scanning the document for the current query. Use it to update match counts, toggle navigation controls, or notify users when no results were found.
63+
64+
- Typical uses:
65+
- Update UI with the total number of matches and enable navigation controls.
66+
- Hide loading indicators or show a "no results" message if none were found.
67+
- Record analytics for search effectiveness.
68+
- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchCompleteEventArgs) exposes:
69+
- `totalMatches`: total number of occurrences found.
70+
- `isMatchFound`: indicates whether at least one match was found.
71+
- `searchText`: the searched term.
72+
- `matchCase`: indicates whether case-sensitive search was used.
73+
- `name`: event name.
74+
75+
```typescript
76+
const viewer: PdfViewer = new PdfViewer({
77+
documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
78+
textSearchComplete: (args: any) => {
79+
// args.totalMatches may indicate how many results were found (when available)
80+
console.log('Text search completed.', args);
81+
}
82+
});
83+
viewer.appendTo('#pdfViewer');
84+
```
85+
86+
[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples)
87+
88+
## See Also
89+
90+
[Text Search Features](./text-search-features)
91+
[Find Text](./find-text)
92+
[Extract Text](../how-to/extract-text-ts)
93+
[Extract Text Options](../how-to/extract-text-option-ts)
94+
[Extract Text Completed](../how-to/extract-text-completed-ts)

0 commit comments

Comments
 (0)