'PDFJS - Searching text with multiple lines not highlighting result

I have integrated PDFJS with Nuxt.js to render pdf document with basic functionalities.

When using 'find in document' to search for text ranging across multiple lines in the pdf, I am getting No result found for a text that exists on the document.

For instance: Searching for the phrase "disclosure and maintain confidentiality" in the document is giving no results. no-result-pdf-img

However, when searched as

"disclosure and maintain       confidentiality"
with appending spaces, I am getting the result which is incorrect. produces-search-result-img

Here is the html rendered for the two lines - inspect-element-img

References: I have followed the example provided here to create my pdf renderer- https://codesandbox.io/s/vue-2-vue-pdf-app-wz5kv

I have added this piece of code

<vue-pdf-app ref="pdfAppRef"
   :pdf="pdfSrc"
   :config="config"
   @pages-rendered="pagesRenderedHandler"
   @open="openHandler"
   @after-created="afterCreatedHandler"/>


   pagesRenderedHandler(pdfApp) {
     setTimeout(() => {
       const pdfapp = pdfApp;
       pdfapp.pdfViewer.currentScaleValue = 'page-height';
       const PageDiv = document.querySelectorAll('.textLayer');
          PageDiv.forEach(page => {
            const span = page.querySelectorAll('span');
            span.forEach((sp, index) => {
             sp.innerHTML = sp.innerHTML.replace(/^\s+|\s+$/g, "");
             sp.textContent = sp.textContent.replace(/^\s+|\s+$/g,"");
            })
          })
      }, 0);
  }

Can someone please help me understand what the issue here is. Is there a way to programatically remove the whitespace in new lines.

Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source