javascript - 禁用网页中的突出显示

Question

我做了这样一个实验:

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

当我单击文本“highlightME”时，它会突出显示页面上出现的所有内容。然而，高潮永远都在。

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

不管它是否需要 js、css 或 html 更改。

~谢谢。

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

只需添加一个变量来检查文本是否突出显示，并根据它设置 color 变量。