Is it possible to get the highlighted text in a paragraph of a website e.g. by using jQuery?
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.
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. [
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.
getSelection() method returns a Selection object representing the range of text selected by the user or the current position of the caret.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With