boundary-points of a range does not meet specific requirements

Question

I am writing a script on which the user needs to be able to select some text which is sent via ajax to the backend script for further process.

I can select plain text nodes fine or text nodes that have bold, italic or underlined text inside it.

For e.g

<p>This is <strong>some</strong> cool <em>italic</em> text, <u>really!</u></p>

So, that works, that is cool.

However, the issue is, if the text node starts with hsome bold, italic or underlined text OR even headings it outputs the following error on firefox console:

The boundary-points of a range does not meet specific requirements." code: "1 range.surroundContents($('<span...wAnno_'+newLen+'"></span>').get(0));

The error is output when the user selects something like:

<strong>Mark says</strong> Hi

OR

<em>Mark says</em> Hi

OR

<u>Mark says</u> Hi

The same error outputs even if a text is enclosed inside heading tags e.g <h2>test</h2>

My code looks like:

var select = window.getSelection();
var parents = $(select.focusNode).parents('.the-content');

if($(select.focusNode).parent().hasClass('.highlighted')) {
    alert('This text is already highlighted');
} else {
    for(var i = 0; i < select.rangeCount; i++) {
        var range = select.getRangeAt(i); 
        range.surroundContents($('<span class="newHighlight" id="newHigh_'+newLen+'"></span>').get(0));
    }
}

var selectedText = select.toString();

I need help with fixing this.

Help with the code will be awesome.

Answer 1

The problem is that the surroundContents method of Range can't work on on Range where the start and end boundaries lie within different elements, because surrounding the contents of such a Range within an element would not produce valid HTML. If changing the background colour of your Range is all you need to do, you could use the following trick with document.execCommand:

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // Non-IE case
        sel = window.getSelection();
        if (sel.getRangeAt) {
            range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        // Use HiliteColor since some browsers apply BackColor to the whole block
        if ( !document.execCommand("HiliteColor", false, colour) ) {
            document.execCommand("BackColor", false, colour);
        }
        document.designMode = "off";
    } else if (document.selection && document.selection.createRange) {
        // IE case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

Otherwise, you'll need to walk through the text nodes within the range and surround each with a <span>, which is not trivial. I've been working on a cross-browser range and selection library that includes a module for applying a CSS class to the contents of a selection or Range at http://code.google.com/p/rangy/, although that module is a few days away from being documented and released.