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...

duplicate of [highlight the text of the DOM range element,](http://stackoverflow.com/questions/2582831/highlight-the-text-of-the-dom-range-element) — Bergi, Aug 03 '12 at 06:43

score 7 · Accepted Answer · edited Apr 06 '12 at 02:19

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.

UPDATE

Fixed in IE 9.

function makeEditableAndHighlight(colour) {
    var sel = window.getSelection();
    var range = null;
    if (sel.rangeCount && 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";
}

function highlight(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}

Hi, thank you for answering... still it is not working... this code is working fine when i try to highlight the text which is currently selected.i.e when i create the range like this. sel = window.getSelection(); range = sel.getRangeAt(0); It highlights the text which falls into range() element. But if i create the range using setStart() and setEnd(), it is not working...even though execCommand is of document's, somehow i need to specify, it should highlight the text under the range element, right? how can i do that? thank you.... — ganapati, May 03 '10 at 09:43
This method will only work if the range is selected, since the commands executed by `document.execCommand` are designed to work on the current selection. I think your best option is to temporarily select the range you want to highlight. I will update my answer. — Tim Down, May 03 '10 at 10:43
Hi,thanks it works,with small modification. "document.designMode = "on";" This function should be called before calling,"sel.addRange(range);". Thanks once again... — ganapati, May 03 '10 at 11:54

score 1 · Answer 2 · answered May 03 '10 at 08:42

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.

answered May 03 '10 at 08:42

Delan Azabani

79,602
28
170
210

highlight the text of the DOM range element,

2 Answers2

Linked