highlight the text of the DOM range element,

Question

I am able to highlight the text on the HTML page(rendered through gtkmozembed), which is selected, like below.

    var range, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
          range = sel.getRangeAt(0);
        }
        document.designMode = "on";
        if (range) {
            sel.removeAllRanges();
            sel.addRange(range);
        }
        document.execCommand("HiliteColor", false, colour);
        document.designMode = "off";
   }  

Well,it works very fine.Now i am trying to store the information(startNode, startOffset,endNode, endOffset) about the highlighted text, and next time when i open the same page,highlight the same text. I am able to successfully store the info and retrieve them when the same page opens. And i am trying to highlight the text using following code.

    var range = document.createRange();
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

    document.designMode = "on";
    range.execCommand("HiliteColor", false, colour);
    document.designMode = "off";

But it is not working as i am expecting. Can anyone help me to achieve the required? Thanks...

Answer 1

This page should give you all the details about highlighting via script. I haven't done it myself, so it's probably best you use the page's recommendations.

Answer 2

The execCommand method is a method of the document, not the Range. Also, hilitecolor only works in Firefox, so you should fall back to using backcolor in WebKit and Opera.

EDIT

Added code to save and restore selection

// Assuming a Range object stored in a variable called 'range'

// Save current selected range
var sel = window.getSelection();
var selectedRange = sel.getRangeAt(0);

// Select desired range
sel.removeAllRanges();
sel.addRange(range);

document.designMode = "on";

// Try HiliteColor first since Firefox applies BackColor to the whole block
if ( !document.execCommand("HiliteColor", false, colour) ) {
    document.execCommand("BackColor", false, colour);
}

document.designMode = "off";

// Restore previously selected range
sel.removeAllRanges();
sel.addRange(selectedRange);