Search with multiple phrases with ng2-pdf-viewer pdf.js

438 views Asked by At

There is a similar question that was asked about this subject a long time ago but it looks that nobody has found a solution yet: Angular 8 Multi phrase search using ng2-pdf-viewer

I'm basically trying to do the same but with more specs.

Case 1. Input single quoted phrase: "is an angular component"

Expected highlighted:

Ng2-pdf-viewer is an Angular component that enables users to view PDF files in a web application. It utilizes the PDF.js library to render PDF files and provides various features, such as zooming, printing, and searching for text within the PDF document.

Case 2. Input multiple quoted phrase: "library to" "view PDF files"

Expected highlighted:

Ng2-pdf-viewer is an Angular component that enables users to view PDF files in a web application. It utilizes the PDF.js library to render PDF files and provides various features, such as zooming, printing, and searching for text within the PDF document.

Case 3. Input multiple not quoted words: printing zooming text pdf

Expected highlighted:

Ng2-pdf-viewer is an Angular component that enables users to view PDF files in a web application. It utilizes the PDF.js library to render PDF files and provides various features, such as zooming, printing, and searching for text within the PDF document.

Case 4. Input multiple not quoted words with a single quoted word: printing zooming text pdf "component that"

Expected highlighted:

Ng2-pdf-viewer is an Angular component that enables users to view PDF files in a web application. It utilizes the PDF.js library to render PDF files and provides various features, such as zooming, printing, and searching for text within the PDF document.

This is the implementation I got so far:

searchOccurrences(search = ''): void {
        if (search) {
            this.searchWord = search;
        }
        let searchWords: string[] = [this.searchWord];
        this.phraseSearch = false;

        if (this.searchWord && this.searchWord.startsWith('"') && this.searchWord.endsWith('"')) {
            // Split the search term by double quotes and remove empty strings
            const phrases = this.searchWord.split('"').filter(s => s.trim() !== '');
            this.phraseSearch = true;
            searchWords = phrases;
        }
        for (const phrase of searchWords) {
            this.pdfViewer.eventBus.dispatch('find', {
                caseSensitive: false,
                findPrevious: false,
                highlightAll: true,
                phraseSearch: this.phraseSearch,
                query: phrase
            });
        }
        // reset matches
        this.totalMatches = 0;
        this.currentWordIndex = 0;
        this.matchIndex = 0;
        this.currentPageIndex = this.currentPage - 1;
        this.matches = [];
        this.pdfViewer.eventBus.on('updatefindmatchescount', data => {
            this.updateValues(data);
        });
    }

    updateValues(data: any): void {
        this.totalMatches += data.matchesCount.total;
        this.matches = this.matches.concat(data.source._pageMatches);
        this.lastPageMatch = this.getLatestPageOnMatches();
        this.firstPageMatch = this.getFirstPageOnMatches();
    }

The problem with this implementation is that in the cases 2 and 4, the last search replaces the highlight and results of the others.

0

There are 0 answers