Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get the Highlighted/Selected text

Is it possible to get the highlighted text in a paragraph of a website e.g. by using jQuery?

like image 330
Dan Avatar asked Mar 21 '11 14:03

Dan


People also ask

How do you highlight selected text in JavaScript?

getSelection() Method in JavaScript. The window. getSelection() method in JavaScript allows us to get the text highlighted or selected by the user on the screen. This method returns an object that contains information related to the text highlighted on the screen.

What is highlighting a text?

verb. To highlight a piece of text means to mark it in a different colour, either with a special type of pen or on a computer screen. Highlight the chosen area by clicking and holding down the left mouse button. [

Why is text highlighted?

What is the purpose of highlighting? The purpose of highlighting is to draw attention to important information in a text. Effective highlighting is effective because it first asks the reader to pick out the important parts, and then gives an effective way to review that information later.

What is getSelection in JavaScript?

getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret.


1 Answers

Getting the text the user has selected is relatively simple. There's no benefit to be gained by involving jQuery since you need nothing other than the window and document objects.

function getSelectionText() {     var text = "";     if (window.getSelection) {         text = window.getSelection().toString();     } else if (document.selection && document.selection.type != "Control") {         text = document.selection.createRange().text;     }     return text; } 

If you're interested in an implementation that will also deal with selections in <textarea> and texty <input> elements, you could use the following. Since it's now 2016 I'm omitting the code required for IE <= 8 support but I've posted stuff for that in many places on SO.

function getSelectionText() {      var text = "";      var activeEl = document.activeElement;      var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null;      if (        (activeElTagName == "textarea") || (activeElTagName == "input" &&        /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) &&        (typeof activeEl.selectionStart == "number")      ) {          text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd);      } else if (window.getSelection) {          text = window.getSelection().toString();      }      return text;  }    document.onmouseup = document.onkeyup = document.onselectionchange = function() {    document.getElementById("sel").value = getSelectionText();  };
Selection:  <br>  <textarea id="sel" rows="3" cols="50"></textarea>  <p>Please select some text.</p>  <input value="Some text in a text input">  <br>  <input type="search" value="Some text in a search input">  <br>  <input type="tel" value="4872349749823">  <br>  <textarea>Some text in a textarea</textarea>
like image 66
Tim Down Avatar answered Nov 11 '22 17:11

Tim Down