Cross Browser Selection Range Library? Cross Browser Selection Range Library? jquery jquery

Cross Browser Selection Range Library?


I've developed a cross-browser Range and selection library called Rangy. Its core is not dissimilar in concept to IERange but goes beyond it in terms of implementation of the DOM level 2 Range and HTML5 selection specifications, and also in terms of stability and workarounds for browser bugs. I think it's the best there is out there.

There are also extra modules for saving, restoring and serializing selections and applying CSS class to ranges and selections.

https://github.com/timdown/rangy

The following uses some Rangy extensions to Ranges to easily iterate over text nodes within a selection and surround each one:

function surroundSelectedText(templateElement){    var range, sel = rangy.getSelection();    var ranges = sel.getAllRanges();    var textNodes, textNode, el, i, len, j, jLen;    for (i = 0, len = ranges.length; i < len; ++i) {        range = ranges[i];        // If one or both of the range boundaries falls in the middle        // of a text node, the following line splits the text node at the        // boundary        range.splitBoundaries();        // The first parameter below is an array of valid nodeTypes        // (in this case, text nodes only)        textNodes = range.getNodes([3]);        for (j = 0, jLen = textNodes.length; j < jLen; ++j) {            textNode = textNodes[j];            el = templateElement.cloneNode(false);            textNode.parentNode.insertBefore(el, textNode);            el.appendChild(textNode);        }    }}var span = document.createElement("span");span.style.color = "green";span.style.fontWeight = "bold";surroundSelectedText(span);


For the jQuery plugin option there's jCaret, you can check out the homepage here and the examples here.

I've used this on a few projects for various applications, works well at removing the cross-browser inconsistencies.


For general-purpose range work (as opposed to input/textarea selection handling), consider ierange. Attempts to implement the standard DOM Level 2 Range model supported by other browsers in IE. Kind-of works.