禁用网页中的突出显示

I did an experiment like this:

我做了这样的实验:

<div onclick="clickfunc(this)"> highlightME </div>
<div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div>

<script language=javascript>

    function clickfunc(obj) {
        var t = $(obj).text();
        doSearch(t);
    }

    function doSearch(text) {
        if (window.find && window.getSelection) {
            document.designMode = "on";
            // var sel = window.getSelection();
            // console.log(sel);
            // sel.collapse(document.body, 0);

            while (window.find(text)) {
                document.execCommand("HiliteColor", false, "yellow");
                //sel.collapseToEnd();
            }
            document.designMode = "off";
        }
        else if (document.body.createTextRange) {
            var textRange = document.body.createTextRange();
            while (textRange.findText(text)) {
                textRange.execCommand("BackColor", false, "yellow");
                textRange.collapse(false);
            }
        }
    }
</script>

When I click the text 'highlightME', it will highlight all occurrences on the page. However, the highlight will be always there.

当我单击文本'highlightME'时,它将突出显示页面上的所有实例。然而,亮点将始终存在。

I want to remove the highlighting by clicking second time on the text, or press ESC or via any other ways.

我想通过单击文本上的第二次来删除突出显示,或者按ESC或通过任何其他方式。

Doesn't matter if it requires either js, css or html changes.

如果它需要js,css或html更改无关紧要。

~ thanks.

1 个解决方案

#1

var isHighLighting = false;

clickfunc = function(obj) {
        var t = $(obj).text();
        doSearch(t);
    }

doSearch = function (text) {
var color = isHighLighting?'transparent':'yellow';
        if (window.find && window.getSelection) {
            document.designMode = "on";
            // var sel = window.getSelection();
            // console.log(sel);
            // sel.collapse(document.body, 0);

            while (window.find(text)) {
                document.execCommand("HiliteColor", false, color);
                //sel.collapseToEnd();
            }
            document.designMode = "off";
        }
        else if (document.body.createTextRange) {
            var textRange = document.body.createTextRange();
            while (textRange.findText(text)) {
                textRange.execCommand("BackColor", false, color);
                textRange.collapse(false);
            }
        }
        isHighLighting = !isHighLighting;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div onclick="clickfunc(this)"> highlightME </div>
<div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div>

Just add a variable to check is text highlighting or not and set color variable base on it.

只需添加一个变量来检查文本突出显示与否,并在其上设置颜色变量。