Sometimes, we want to set selection by range in JavaScript.

In this article, we’ll look at how to set selection by range in JavaScript.

How to set selection by range in JavaScript?

To set selection by range in JavaScript, we can call the document.createRange and window.getSelection methods.

For instance, we write:

<p>
  hello world
</p>

to add a p element.

Then we write:

const node = document.querySelector("p").firstChild;
const range = document.createRange();
range.setStart(node, 0);
range.setEnd(node, 5); 

const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

to select the text node with:

const node = document.querySelector("p").firstChild;

Next, we call document.createRange to create a range object.

And then we set the selection with setStart and setEnd.

Next, we call window.getSelection to get the selection.

And we call selection.removeAllRanges to clear existing selections.

Finally, we call selection.addRange with range to make the selection.

Conclusion

To set selection by range in JavaScript, we can call the document.createRange and window.getSelection methods.