> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/events/text-select-events.md).

# Getting text from text select events

Learn how to extract selected text from a loaded document to create annotations or free text annotations. Explore more on text extractions in our guides! The Apryse Web SDK streamlines secure, serverl

When users select text from a loaded document, this triggers an event that can be used to get the selected text. This is helpful in automatically creating annotations where the selected text is or perhaps extracting the text for creating free text annotations.

## Getting selected text from events

The main event of interest triggered by DocumentViewer when text is selected is the [`textSelected`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:textSelected__anchor) event.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
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);
    }
  });
});
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#textSelected](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:textSelected__anchor) [Math.Quad](https://sdk.apryse.com/api/web/Core.Math.Quad.html#main)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer({ ... }, viewerElement).then(instance => {
  const { docViewer } = instance;

  docViewer.on('textSelected', (quads, selectedText, pageIndex) => {
    // quads will be an array of 'Quad' objects
    // text is the selected text as a string
    if (selectedText.length > 0) {
      console.log(selectedText);
    }
  });
});
```

{% endcode %}

[WebViewerInstance](https://sdk.apryse.com/api/web/WebViewerInstance.html) [DocumentViewer#textSelected](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:textSelected__anchor) [Math.Quad](https://sdk.apryse.com/api/web/Core.Math.Quad.html#main)
{% endtab %}
{% endtabs %}

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`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText).

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
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
  });
});
```

{% endcode %}

[DocumentViewer.getTool](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getTool) [Tools.ToolNames](https://sdk.apryse.com/api/web/Core.Tools.html#.ToolNames) [TextSelectTool#selectionComplete](https://sdk.apryse.com/api/web/Core.Tools.TextSelectTool.html?q=selectionComplete#event:selectionComplete__anchor) [DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer({ ... }, viewerElement).then(instance => {
  const { docViewer, Tools } = instance;

  const tool = docViewer.getTool(Tools.ToolNames.TEXT_SELECT);
  tool.on('selectionComplete', (startQuad, allQuads) => {
    let selectedText = '';
    Object.keys(allQuads).forEach(pageNum => {
      const text = docViewer.getSelectedText(pageNum);
      selectedText += text;
    });
    // the startQuad and allQuads will have the X and Y values you want
  });
});
```

{% endcode %}

[DocumentViewer.getTool](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getTool) [Tools.ToolNames](https://sdk.apryse.com/api/web/Core.Tools.html#.ToolNames) [TextSelectTool#selectionComplete](https://sdk.apryse.com/api/web/Core.Tools.TextSelectTool.html?q=selectionComplete#event:selectionComplete__anchor) [DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText)
{% endtab %}
{% endtabs %}

## Getting selected text from browser events

Get selected text by listening for a keydown or clipboard copy event.

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
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');
  });
});
```

{% endcode %}

[DocumentViewer.getCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCurrentPage) [DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText)
{% endtab %}

{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}

```js
WebViewer({ ... }, viewerElement).then(instance => {
  const { docViewer } = instance;
  const showSelectedText = () => {
    const page = docViewer.getCurrentPage();
    const text = docViewer.getSelectedText(page);

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

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

  // Otherwise use the copy event
  var iframeWindow = instance.iframeWindow;
  iframeWindow.addEventListener('copy', function (e) {
      showSelectedText();
      console.log('Ctrl+C (copy) pressed');
  });
});
```

{% endcode %}

[DocumentViewer.getCurrentPage](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getCurrentPage) [DocumentViewer.getSelectedText](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText)
{% endtab %}
{% endtabs %}

## Next steps

You can read up more on text extractions in our other [text extraction guides](/web/extraction/extraction.md)!


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/events/text-select-events.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.