Get the Highlighted/Selected Text

Select Text & highlight selection or get selection value (React)

There is no React-specific solution for this. Just use window.getSelection API.

---

To output highlighted text run window.getSelection().toString()

How to get highlighted text position from textarea?

This will work for text selection with the mouse and keyboard for all <textarea> elements on the page.
Change the selector (be more specific) if you don't want all <textarea> elements to have this text selection.

Read the comments, you will find out there how to disable keyboard selection, if you don't want/need keyboard selection.

var mySelection = function (element) {
    let startPos = element.selectionStart;
    let endPos = element.selectionEnd;
    let selectedText = element.value.substring(startPos, endPos);

    if(selectedText.length <= 0) {
      return; // stop here if selection length is <= 0
    }
    
    // log the selection
    console.log("startPos: " + startPos, " | endPos: " + endPos );
    console.log("selectedText: " +  selectedText);

  };

var textAreaElements = document.querySelectorAll('textarea');
[...textAreaElements].forEach(function(element) {
    // register "mouseup" event for the mouse
    element.addEventListener('mouseup', function(){
        mySelection(element)
    });
    
    // register "keyup" event for the keyboard
    element.addEventListener('keyup', function( event ) {
        // assuming we need CTRL, SHIFT or CMD key to select text
        // only listen for those keyup events
        if(event.keyCode == 16 || event.keyCode == 17 || event.metaKey) {
            mySelection(element)
        }
    });
});

textarea {
   resize: none; 
   width: 50%;
   height: 50px; 
   margin: 1rem auto;
}

<textarea>I am a student and I want to become a good person</textarea>

Can't get the selected text / highlighted text from the tab in my chrome extension

See How to access the webpage DOM rather than the extension page DOM? for full explanation, here's a quick illustration:

chrome.tabs.executeScript({code: 'getSelection().toString()'}, ([sel] = []) => {
  if (!chrome.runtime.lastError) {
    document.body.textContent = 'Selection: ' + sel;
  }
});

If you have default_popup declared in manifest.json then put this code in popup.js, and put <script src=popup.js></script> in popup.html. It will run each time the popup is shown.

Otherwise put it inside chrome.browserAction.onClicked listener in the background script.

---

Related Topics