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>

当我点击文字＆＃39; highlightME＆＃39;时，它会突出显示页面上的所有匹配项。然而，亮点将始终存在。

我想通过单击文本上的第二次来删除突出显示，或者按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变量。

禁用网页中的突出显示

1 个答案: