Some test text!

Overview
Documentation
All Products
Search
Downloads
Chat with us
Discord Logo
Hamburger Icon

Web / Guides / Selected text

Extracting selected text for a document

Getting selected text

Text selected in a document can be extracted using the following functions:

getSelectedTextQuads will return an array for each line of selected text. The following is an example of it being used

Selected Text

const quads = documentViewer.getSelectedTextQuads(documentViewer.getCurrentPage());
In the above sample, getSelectedTextQuads will return an array of Quad objects. The array will contain three Quad objects, one for each rectangle of selected text.
It's possible for a user to select text across multiple pages so if getSelectedTextQuads is called without any parameters then Quads will be returned for every page with selected text. The result is an object with keys for each page number:
{
  2: [{ /* quad1 */ }, { /* quad2 */ }, { /* quad3 */ }]
}
Where '2' is the page number where the selected text is found.
Selected Text on multiple pages
For the image above there is text selected on pages 2 and 3 so the result of getSelectedTextQuads will look like this:
{
  2: [{ /* quad1 */ }, { /* quad2 */ }],
  3: [{ /* quad3 */ }]
};
Getting selected text from events
The main event of interest triggered by DocumentViewer when text is selected is the textSelected event.
WebViewer({ ... }, viewerElement).then(instance => {
  const { documentViewer } = instance.Core;

  documentViewer.addEventListener('textSelected', (quads, selectedText, pageNumber) => {
    // quads will be an array of 'Quad' objects
    // text is the selected text as a string
    if (selectedText.length > 0) {
      console.log(selectedText);
    }
  });
});
The textSelected event gets fired whenever the selected text on the document changes. It is worth considering using debouncing if you are only looking to handle this event once the selection has stopped.
Also the textSelected event fires once for each page with selected text. So if text is selected on page A and B, and the selected text on page A changed, the textSelected event will fire once for each page even though there weren't any changes for page B.
Getting selection from the TextSelect tool
You can also listen for the selectionComplete event on the TextSelect tool. This event does not return the selected text but we can still get the text from the DocumentViewer via getSelectedText.
WebViewer({ ... }, viewerElement).then(instance => {
  const { documentViewer, Tools } = instance.Core;

  const tool = documentViewer.getTool(Tools.ToolNames.TEXT_SELECT);
  tool.addEventListener('selectionComplete', (startQuad, allQuads) => {
    let selectedText = '';
    Object.keys(allQuads).forEach(pageNum => {
      const text = documentViewer.getSelectedText(pageNum);
      selectedText += text;
    });
    // the startQuad and allQuads will have the X and Y values you want
  });
});
Getting selected text from browser events
Get selected text by listening for a keydown or clipboard copy event.
WebViewer({ ... }, viewerElement).then(instance => {
  const { documentViewer } = instance.Core;
  const showSelectedText = () => {
    const page = documentViewer.getCurrentPage();
    const text = documentViewer.getSelectedText(page);

    if (!!text) {
        console.log(text);
    }
  }

  // Optionally use keyDown events
  documentViewer.addEventListener('keyDown', function (e) {
    if (e.keyCode == 67 && (e.ctrlKey || e.metaKey)) {
      showSelectedText();
      console.log('Ctrl+C pressed');
    }
  });

  // Otherwise use the copy event
  const iframeWindow = instance.UI.iframeWindow;
  iframeWindow.addEventListener('copy', function (e) {
      showSelectedText();
      console.log('Ctrl+C (copy) pressed');
  });
});
Trial setup questions? Ask experts on Discord
Need other help? Contact Support
Pricing or product questions? Contact Sales