How to get highlighted text position from textarea?

Question

I want to get the selected text position using javascript. For example,
I have a simple textarea.

#input-text {    resize: none;    width: 50%;    height: 50px;    margin: 1rem auto;  }

<textarea id="input-text">I am a student and I want to become a good person</textarea>

In my textarea, I have some text such as:

"I am a student and I want to become a good person" 

From this string, if I select "become a good person" from the textarea,
Then How can I get the selected text/ string position in javascript?


Here the selected string character starts from 29 and ends in 49. So the start position is 29 & the end position is 49

Answer 1

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>