How to Get Highlighted/Selected Text in JavaScript

Often you may want to get highlighted or selected text from paragraph of website. You may have noticed this behavior on several websites and apps whereby if a user selects or highlights a part of text, it asks you if you want to copy or cut it. In this article, we will learn how to get highlighted/selected text in JavaScript.

How to Get Highlighted/Selected Text in JavaScript

You can easily get selected text using plain JavaScript, without any third party libraries.

window.getSelection().toString()

For Internet Explorer, you may want to use the following command.

document.selection.createRange().htmlText

You can add this command inside an event listener so that it is triggered after a user selects of highlights text. Here is an example to add this command to mouseup event listener.

document.addEventListener('mouseup', event => {  
    if(window.getSelection().toString().length){
       let exactText = window.getSelection().toString();        
    }
}

If you also want to get selected text from textarea and input elements, then you need to use the following command.

var activeEl = document.activeElement;
text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);

In the above code, we simply get the active element first, and then use slice() function to get the selected part of its value attribute.

Putting both use cases together, you can use the following code to get highlighted text from your web page.

function getSelectionText() {
    var text = "";
    var active = document.activeElement;
    var activeTagName = active ? active.tagName.toLowerCase() : null;
    if (
      (activeTagName == "textarea") || (activeTagName == "input" &&
      /^(?:text|search|password|tel|url)$/i.test(active.type)) &&
      (typeof active.selectionStart == "number")
    ) {
        text = active.value.slice(active.selectionStart, active.selectionEnd);
    } else if (window.getSelection) {
        text = window.getSelection().toString();
    }
    return text;
}

document.onmouseup = document.onkeyup = document.onselectionchange = function() {
  document.getElementById("selected_text").value = getSelectionText();
};

In the above code, we have defined getSelectionText() function that gets the active element first, then checks to see if it is an input element or textarea. If so, it uses value.slice() function to get selected text. If that is not the case (e.g. text is selected from paragraph or heading tag), then it uses window.getSelection().toString() to get the selected text. The selected text is stored as value attribute of element with ID=selected_text. We set this function to be the event handler for onmouseup, onkeyup, onselectionchange events. You can customize all this as per your requirement.

Also read:

How to Call JS Function in IFrame from Parent Page
How to Prevent Page Refresh on Form Submit
How to Check If Object is Array in JavaScript
Regular Expression to Match URL Path
How to Split String Every Nth Character in Python