javascript - 如何去除window.find Highlights的backcolor

Question

如何回滚由以下代码引起的高亮显示

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(); 
     }
}

如何移除所有高光背景色，即“YellowGreen”。我见过post这与我的问题有关。但是接受的答案不起作用。请有人调查并帮助我。

Answer 1

我有一个解决方案。您的问题中确实没有足够的细节来编写可以插入的内容，因此您可能需要对其进行调整以获得您想要的内容。

想法是在高亮代码运行时监视 DOMNodeInserted 突变事件，并用 className 标记插入的节点，然后可以用来查找和删除他们。 警告:突变事件已弃用，但确实没有替代品，所以我使用我现有的。

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);
            }
        }
    }
})();

仅在 Chrome 17 中测试过。这是它的一个 fiddle :http://jsfiddle.net/LPJqW/