HTML DOM getRangeAt() method

0 0 1 minute read

The getRangeAt() method returns the range object which contains the startOffset index and endOffset index from the selected text.

Syntax:

range = selection.getRangeAt(index)

Parameters:

index: zero-based index from the rangeCount of the document.

Return value:

Return the Range object which contains the startOffset and endOffset index of the selected text.

Example: In this example, we will select some text and will get a range of selected text.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>zambiatek</title>
</head>
 
<body>
    <h1>zambiatek</h1>
    <p>
        select some text and click on
        button to get the range of selection
      </p>
    <button onclick="range()">
          Click
      </button>
 
    <script>
        function range() {
            let ranges = [];
            sel = window.getSelection();
            for (let i = 0; i < sel.rangeCount; i++) {
                ranges[i] = sel.getRangeAt(i);
                console.log(ranges[i])
            }
        }
    </script>
   
</body>
 
</html>

Output: In the console, range objects can be seen:

Supported Browsers:

Google Chrome
Edge
Firefox
Opera
Safari

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!