> 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/salesforce/events/selected-text.md).

# Extracting selected text for a document

Learn how to extract selected text from a document using DocumentViewer functions. Get insights on getting selected text quads, text selection events, and more for efficient text extraction. Salesforc

## Getting selected text

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

* [`DocumentViewer.getSelectedText`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedText__anchor): Get the currently selected text as a string
* [`DocumentViewer.getSelectedTextQuads`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getSelectedTextQuads__anchor): Get an array of [Quad](https://sdk.apryse.com/api/web/Core.Math.Quad.html) objects for the currently selected text.

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

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-fb6da41e667559c99042c659945f9ec655605276%2F061ba1e2768d7abe8587a1621d37154f57adf8ad-410x174.png?alt=media)

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

```js
const quads = documentViewer.getSelectedTextQuads(documentViewer.getCurrentPage());
```

{% endcode %}
{% endtab %}

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

```js
const quads = docViewer.getSelectedTextQuads(docViewer.getCurrentPage());
```

{% endcode %}
{% endtab %}

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

```js
const quads = docViewer.getSelectedTextQuads(docViewer.getCurrentPage());
```

{% endcode %}
{% endtab %}
{% endtabs %}

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:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
{
  2: [{ /* quad1 */ }, { /* quad2 */ }, { /* quad3 */ }]
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

Where '2' is the page number where the selected text is found.

![](https://306473577-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfmJo9lQOEYOFBgOyFp26%2Fuploads%2Fgit-blob-47bbf2d0231ab0a4f138c9f03c6bada47ce99b76%2Ff572aa3bbcf99843aafeae45f8b13c07841bec52-597x285.png?alt=media)

For the image above there is text selected on pages 2 and 3 so the result of `getSelectedTextQuads` will look like this:

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
{
  2: [{ /* quad1 */ }, { /* quad2 */ }],
  3: [{ /* quad3 */ }]
};
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Getting selected text from events

Be notified when text is selected using the [`textSelected`](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:textSelected__anchor) event as shown below:

{% 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)
{% endtab %}

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

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

  docViewer.on('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)
{% 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)
{% endtab %}
{% endtabs %}

The `textSelected` event get fired whenever another character is selected or deselected. 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 wasn't any changes for page B.

## 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 (je, 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 %}
{% endtab %}

{% tab title="JavaScript (SDK v7.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 %}
{% 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 %}
{% endtab %}
{% endtabs %}

## Getting selection complete from events

Use the text selection complete event with the `TextSelect` tool and listen for `selectionComplete`.

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

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

  documentViewer.getTool('TextSelect').addEventListener('selectionComplete', (startQuad, allQuads) => {
    // the startQuad and allQuads will have the X and Y values you want
  });
});
```

{% endcode %}
{% endtab %}

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

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

  docViewer.getTool('TextSelect').on('selectionComplete', (startQuad, allQuads) => {
    // the startQuad and allQuads will have the X and Y values you want
  });
});
```

{% endcode %}
{% endtab %}

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

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

  docViewer.getTool('TextSelect').on('selectionComplete', (startQuad, allQuads) => {
    // the startQuad and allQuads will have the X and Y values you want
  });
});
```

{% endcode %}
{% endtab %}
{% endtabs %}


---

# 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/salesforce/events/selected-text.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.