Categories
JavaScript Answers

How to Listen for Text Highlight in an HTML Element with JavaScript?

Spread the love

Sometimes, we want to listen for text highlight in an HTML element with JavaScript.

In this article, we’ll look at how to listen for text highlight in an HTML element with JavaScript.

Listen for Text Highlight in an HTML Element with JavaScript

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.

For instance, if we have the following div:

<div>  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus aliquam iaculis. Pellentesque interdum elit sapien, quis interdum enim laoreet sed. Mauris varius magna ac dapibus molestie. Sed porttitor sapien eget ipsum aliquet, lacinia venenatis lacus finibus. Phasellus in nibh mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat tristique augue, id lacinia massa iaculis eu. Donec sed vestibulum odio. Fusce sit amet congue odio, eu consequat neque. Sed sed mauris id sem malesuada blandit eu at quam.  
</div>

Then we can write:

document.addEventListener("selectionchange", event => {  
  const selection = document.getSelection ? document.getSelection().toString() : document.selection.createRange().toString();  
  console.log(selection);  
})

to listen to the selectionchange event on document , which means we pick up all text selection changes on the page.

In the event handler, we call getSelection to get the text selection if it exists.

Otherwise, we call document.selection.createRange().toString() to get the text selection.

Conclusion

To listen for text highlight in an HTML element with JavaScript, we can listen to the selectionchange event.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.