How to remove backcolor of window.find Highlights

Question

How to roll back highlights which are caused with the below code

if (window.find && window.getSelection) {
     var sel = window.getSelection(); 
     sel.collapse(document.body, 0);  
     document.body.offsetHeight;
     if (window.find(text, true)) { 
        document.execCommand("hiliteColor", false, "YellowGreen"); 
        sel.collapseToEnd(); 
     }
}

How to remove all highlights backcolor, i.e "YellowGreen". I have seen a post that is related to my question. But the accepted answer is not working. Please somebody look into it and help me.

Are you targeting a specific browser? Firefox perhaps? – Hemlock Feb 25 '12 at 19:58 — Hemlock, Feb 25 '12 at 19:58
@Hemlock I am targeting only Chrome. – Exception Feb 25 '12 at 20:00 — Exception, Feb 25 '12 at 20:00
@Tim Down Please help me on this. – Exception Feb 25 '12 at 21:36 — Exception, Feb 25 '12 at 21:36

score 1 · Answer 1 · answered Feb 26 '12 at 14:24

I have a solution. There isn't really enough detail in your question to be able to write something that can drop in, so you'll probably have to tweak it to get what you want.

The idea is to monitor the DOMNodeInserted mutation event while the highlight code is running and mark the nodes being inserted with a className that can then be used to find and remove them. Caveat: mutation events are deprecated, but there really isn't a replacement so I'm using what I have.

Highlighter = (function() {
    var highlighting = false;
    document.addEventListener('DOMNodeInserted', function(e) {
        if (highlighting) {
            var target = e.target;
            if (target.nodeType == 1) {
                target.className = CLASS_NAME;
            }
        }
    }, false);

    var CLASS_NAME = 'highlighted';
    return {
        highlight: function(text, color) {
            highlighting = true;            
            var sel = window.getSelection(); 
            sel.collapse(document.body, 0);

            if (window.find(text, true)) { 
                document.execCommand("hiliteColor", false, color); 
                sel.collapseToEnd(); 
            } 
            highlighting = false;
        },

        unhighlight: function() {
            var highlighted = document.querySelectorAll('.' + CLASS_NAME);
            var i = highlighted.length;
            while (i--) {
                var node = highlighted[i];
                node.parentNode.replaceChild(node.firstChild, node);
            }
        }
    }
})();

Tested only in Chrome 17. Here is a fiddle of it working: http://jsfiddle.net/LPJqW/

score 0 · Accepted Answer · answered Mar 02 '12 at 08:15

0

I found an alternative for this....

$('body *').each(function () {
  ($(this).css('background-color') == "rgb(70, 130, 180)") || ($(this).css('background-color') == "rgb(255, 192, 203)") ? $(this).css("background-color", "") : 0;
});

answered Mar 02 '12 at 08:15

Exception

8,111
22
85
136

How to remove backcolor of window.find Highlights

2 Answers2