Everything need to know about Javascript selection and range

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:

window.getSelection()

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:

toString()

 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:

document.selection.createRange()

 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();

Properties 

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

isCollapsed

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

commonAncestorContainer

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

endContainer

Returns the deepest container in DOM having the end point.

endOffset

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

startContainer

Returns the deepest container in DOM having start point.

startOffset

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

Access any property with range object.

var e=document.createRange();
console.log(e.propertyName);

Read More: Glance over Javascript's Object Oriented behaviour

Methods

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

setStart(textNode,startOffset)

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.

setEnd(textNode,endOffset)

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

cloneRange()

Creates an exact copy of range object.

deleteContent()

Deletes the range object text from DOM.

surroundContents()

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');
range.surroundContents(e)

Or second way is to create element and surround it.

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

removeAllRanges()

Removes all the selected ranges.

addRange()

Adds range object to selection.

Example 

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