Blogger Ever

Everything need to know about Javascript selection and range

Selection creates range object however range objects can be created, cloned or removed. This is all about selection and range objects.

A selection done by the user of arbitrary text node in the DOM can be accessed with Javascript's methods. Selection and range have close relation and obviously a great significance in Javascript. There are many methods and properties to learn, have a look.
Basically this post is divided into two parts, first one is the case when user have selected an arbitrary piece and we are accessing it and second one is when we are creating range on a particular text node.

Accessing selected range

Internet explorer 9 and above all support this method and all the modern browsers too. Getting the selected nodes in DOM, we use:


This returns the object. Whenever any object goes through alert or prompt, it is automatically converted to string, but whenever we want them to manipulate the DOM we need to convert them with:


 To make it more browser friendly to the below version of Internet Explorer you can use if...else condition to determine the browser and execute the code accordingly. The below version can access selected text with:


 Like we added toString method, in this case we'll add .text property with it to return the text of the selection.

var selectedtext=document.selection.createRange();
return slectedtext.text;

The final JS with demo 
See the Pen Selection demo by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

Multiple Selections

Currently Mozilla is the only browser that let the user to select multiple text with ctrl or command key. However, you can access the each range object specifically using getRangeAt() function. Since this is not one of the demanding method among programmers because of a single browser support, better not to use it in some big project.

var a = [];   /* a blank array */
var b = window.getSelection(); /* now access all selections    */
for (var i = 0; i < b.rangeCount; i++) {
    a[i] = b.getRangeAt(i);    /* store each range object as item in array   */
rangeCount returns the number of selection.

Creating range object

Range is a fragment of text node. A range object is created by setting start and end points of the range object. The range have several properties, namely:

If our range object is

var e=document.createRange();


Console log the above object and will see all the properties of this object. Following are the properties of a range object.

Browser support

All the properties listed are supported by major browsers.
Yes Yes Yes Yes Yes


A bolean indicator that returns true if start and end point of a range are same.


Returns the container in which start and end point exists or the deepest node in DOM which contain the range.


Returns the deepest container in DOM having the end point.


Returns integer referring the current position of end point in relation with the end container.


Returns the deepest container in DOM having start point.


Returns integer referring the current position of start point in relation with start container.

Access any property with range object.

var e=document.createRange();


Methods are the functions which are used in Javascript to alter the properties of object. The below listed functions are some important some major ones. Others can be found here.
Yes Yes Yes IE 9, not sure about below ones Yes


textNode is the node in which you want to start the range or want to add start point. startOffset is the integer for the offset position of start point.


textNode is the node in which you want to set the end point. endOffset is the integer for the offset position of end point.


Creates an exact copy of range object.


Deletes the range object text from DOM.


Encloses the range text in an element. Following is the example.
There are two ways of surrounding the text. First to select the element from DOM.

var e=document.getElementById('bold');
Or second way is to create element and surround it.

var e=document.createElement('b');


Removes all the selected ranges.


Adds range object to selection.


See the Pen Range object by Mohammad Hamza Dhamiya (@hamzadhamiya) on CodePen.

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.