Web Selection API is used to get the range of text selected by the user or the position of the caret.
The window.getSelection() is used to get the selection object.
Syntax:
let selection = window.getSelection();
It comes with some instance properties and one among them is rangeCount.
- rangeCount read-only property tells number of ranges in the selection. Before the user has clicked on the page, the rangeCount is 0. When the user clicks , the value of rangeCount is 1, even if no selection is made. A user can select one range at a time, so the rangeCount is frequently 1. Â Browsers also support multiple selections across table.
Example 1: This example shows the basic usage of rangeCount property.
HTML
<html> Â Â <body> Â Â Â Â <h1 style="color:green">neveropen</h1> Â Â Â Â <h3> Web API Selection.rangeCount property </h3> Â Â Â Â Â Â <script>Â Â Â Â Â Â Â Â Â Â Â Â document.onselectionchange = () => { Â Â Â Â Â Â Â Â Â Â Â Â Â Â let selection = document.getSelection(); Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â console.log(selection.rangeCount); Â Â Â Â Â Â Â Â }; Â Â Â Â </script> Â </body> </html> |
Output:
Â
Example 2: In this example, we will disable the selection of multiple ranges using removeRange() method. You will not be able to select text more than once.
HTML
<html> Â Â <body> Â Â Â Â Â Â <h1 style="color:green">neveropen</h1> Â Â Â Â Â Â <h3> Web API Selection.rangeCount property </h3> Â Â Â Â Â Â Â Â <script>Â Â Â Â Â Â Â Â Â Â Â Â document.onselectionchange = () => { Â Â Â Â Â Â Â Â Â Â Â Â Â Â let s = document.getSelection(); Â Â Â Â Â Â Â Â Â Â Â Â console.log(s.rangeCount) Â Â Â Â Â Â Â Â Â Â Â Â if (s.rangeCount > 1) { Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â s.removeRange(s.getRangeAt(1)); Â Â Â Â Â Â Â Â Â Â Â Â Â Â } Â Â Â Â Â Â Â Â Â Â Â Â } Â Â Â </script> </body> </html> |
Output:Â
Â
Â
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
