Start and End Index of SelectedText

Start and End Index of SelectedText

Posted by: gsnow on 18 June 2025, 8:18 pm EST

• 

  gsnow

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 June 2025, 8:18 pm EST

  How do you get the start and end index (char) of the selected text in the pdf document?

• 

  prabhat.sharma

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2025, 1:19 am EST - Updated 20 June 2025, 1:24 am EST

  Hi,

  In DsPdfViewer, the concept of start and end character indices does not directly apply like it would in plain-text editors, because PDF documents are not stored as linear text. Instead, selected text is based on visual regions (bounding rectangles) rather than index positions.
  
  However, it is possible to extract the visual region of the selected text using the viewer.selectionCopier object.

  <button onclick="getPDFSelection()">Get Selection</button>
  <div id="host"></div>
  <script>
      var viewer = new DsPdfViewer("#host");
      viewer.addDefaultPanels();
      function getPDFSelection() {
          console.log(viewer.getSelectedText()); // Get the selected text
          console.log(viewer.selectionCopier);   // Get the selected text information
      }
  </script>

  So while you can’t get character-level start/end indices, you can identify exactly where the selection is visually on the PDF, which is how DsPdfViewer internally represents and processes selections.
  
  You can further refer to the attached sample that uses the above code snippet and gets the bounding rectangles containing the selected text (see below).

  Please let us know if you need any further guidance. If you could share more about your use case, we can provide further assistance tailored to your requirements.

  Regards,
  
  Prabhat Sharma.

  TextSelection.zip

  

• 

  gsnow

  • Post Options:
  • Link
    Copy

  Posted 23 June 2025, 5:12 pm EST

  Many thanks for your feedback. I was hoping to store the start and end index of the highlighted text so I could use the “highlightTextSegment” method to re-highlight text that had been previously stored. I want to store these highlighted text segments outside of the document. It is much more cumbersome to store all the bounding rectangles.

• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 24 June 2025, 4:10 am EST - Updated 24 June 2025, 4:15 am EST

  Hi,

  Thanks for sharing your user story.

  While DsPdfViewer does not provide a direct method to retrieve the start and end indices of selected text, it is possible to extract them using the following approach:

  1. Listen to the textlayerready event and store the page index along with the full page text.
  2. When the user selects text, match the selection against the stored text.
  3. Determine and store the start and end indices of the selection within the page text.
  4. Use these indices with the highlightTextSegment() method to highlight the text accurately.

  Please refer to the attached sample, which demonstrates this approach and highlights the selected text as expected (see below).

  Please note that this is a proof-of-concept sample. If the same text appears multiple times on a page, additional logic may be required to compare the selection rectangles and accurately identify the intended text segment.

  Let us know if any further assistance is needed.

  Kind Regards,
  
  Chirag Gupta

  Attachment: TextSelection.zip

  

• 

  gsnow

  • Post Options:
  • Link
    Copy

  Posted 10 July 2025, 7:07 pm EST

  Many thanks for your feedback! Easily the best I have received on any developer forum! I can’t thank you enough!!!

  I have a couple more questions:

  • Is there any way to highlight text across pages, or do you have to highlight sections separately?
  • Is there any way to navigate to a position on a page (independent of the zoom level - e.g. at the start of some text?)
• 

  chirag.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 July 2025, 1:53 am EST

  Hi,

  We are delighted that the previous solution worked for your use case.

  Regarding the follow-ups:

  1. Highlighting text across pages - Currently, DsPdfViewer works at the individual page level, so to highlight a selection that spans multiple pages, you’ll need to break the full selection into separate segments per page and then call highlightTextSegment() for each segment individually, passing the correct page index and character range for that page.
  2. Navigating to a specific position in the document (independent of zoom level) - Yes, you can scroll the viewer to a specific position using the loadAndScrollPageIntoView() method with the “XYZ” destination type. This allows you to scroll to a given coordinate on the page regardless of the current zoom. Below is a working sample that searches for a keyword in the PDF and scrolls to its location:

  window.onload = function () {
      var viewer = new DsPdfViewer('#viewer', { restoreViewStateOnLoad: false });
      viewer.addDefaultPanels();
  
      var pdf = "/path/to/your/file.pdf";
      loadPdf(viewer, pdf, "shorelines");
  }
  
  async function loadPdf(viewer, pdf, searchText) {
      await viewer.open(pdf);
  
      var findOptions = {
          Text: searchText,
          MatchCase: true,
          WholeWord: true
      };
  
      const searchIterator = await viewer.searcher.search(findOptions);
      const result = await searchIterator.next();
      const item = result.value;
  
      // Use bounding box of the found text to calculate scroll position
      const x = item.ItemArea.left;
      const y = item.ItemArea.top + item.ItemArea.height;
  
      // Scroll to the text position with optional padding
      viewer.loadAndScrollPageIntoView(item.PageIndex, [
          null,
          { name: 'XYZ' },
          x - 10,
          y + 10,
          1.0 // Zoom factor (1.0 = 100%)
      ]);
  }

  You can adapt this to scroll to any previously stored location — for example, from saved highlight metadata — by storing the page index and bounding rectangle or offset coordinates.

  References:

  1. https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/viewer-features/find-text/purejs
  2. https://developer.mescius.com/document-solutions/javascript-pdf-viewer/demos/viewer-features/custom-highlights/purejs
  3. https://developer.mescius.com/document-solutions/javascript-pdf-viewer/api/classes/DsPdfViewer#loadandscrollpageintoview

  Please let us know if you require any further assistance.

  Kind Regards,
  
  Chirag Gupta