Question

In a js function, I want to obtain all Nodes(HTML elements) that are part of the content in a web page, when the content has been selected by the user.

Now, I understand that window.getSelection() will give me a selection object. Also, this selection object has to be converted into a range object, before I can obtain the list of nodes(HTML elements) that are part of that selection.

How do I obtain the range object? From what i read, different browsers have different implementations of range objects…Initially, I will use this js function only in Google Chrome…So code should work perfectly in Google Chrome… but I do want that the code works across all/most new versions of Google Chrome… The code may be JS or pure Jquery.

One more question– do I have to use a js library like “Rangy”- http://code.google.com/p/rangy/ for this purpose? Or can this be achieved using pure js or jquery code?

Answer 1

Apart from IE < 9, all major browsers implement the same standards for Selection and Range and have done for years. There are some differences but the APIs are the same. If you’re not bothered about IE < 9 then you really don’t need to use Rangy (it’s around 40KB before gzipping), although it does have a convenient method for getting nodes that you may find helpful.

To get the nodes within the selection, you can get the selected range like this:

var sel = window.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
}

To get the nodes from the range, you could use the code from this answer. If you used Rangy, it would be

var sel = rangy.getSelection();
if (sel.rangeCount > 0) {
    var range = sel.getRangeAt(0);
    var nodes = range.getNodes();
}