Javascript 禁用网页中的突出显示

Javascript 禁用网页中的突出显示,javascript,html,css,Javascript,Html,Css,我做了一个这样的实验: <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)

我做了一个这样的实验:

<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
呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜
函数clickfunc(obj){
var t=$(obj.text();
doSearch(t);
}
函数doSearch(文本){
if(window.find&&window.getSelection){
document.designMode=“on”;
//var sel=window.getSelection();
//控制台日志(sel);
//选择折叠(document.body,0);
while(window.find(text)){
document.execCommand(“HiliteColor”,false,“黄色”);
//选择折叠结束();
}
document.designMode=“关闭”;
}
else if(document.body.createTextRange){
var textRange=document.body.createTextRange();
while(textRange.findText(text)){
execCommand(“BackColor”,false,“yellow”);
textRange.collapse(false);
}
}
}
当我单击文本“highlightME”时,它将突出显示页面上的所有事件。然而,亮点将永远存在

我想通过再次单击文本,或按ESC键或通过任何其他方式删除突出显示

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

~谢谢。

var isHighLighting=false;
clickfunc=功能(obj){
var t=$(obj.text();
doSearch(t);
}
doSearch=函数(文本){
var color=isHighLighting?“透明”:“黄色”;
if(window.find&&window.getSelection){
document.designMode=“on”;
//var sel=window.getSelection();
//控制台日志(sel);
//选择折叠(document.body,0);
while(window.find(text)){
document.execCommand(“HiliteColor”,false,color);
//选择折叠结束();
}
document.designMode=“关闭”;
}
else if(document.body.createTextRange){
var textRange=document.body.createTextRange();
while(textRange.findText(text)){
textRange.execCommand(“BackColor”,false,color);
textRange.collapse(false);
}
}
isHighLighting=!isHighLighting;
}

灯塔

呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜呜
谢谢。这太棒了!我还有一个后续问题:假设我有两个标签,分别包含“highlightME”、“ooo”和“blabla”。当我单击其中一个时,它可以突出显示我单击的文本,如果之前有突出显示的内容,则禁用所有其他字符串的突出显示。如果您
addClass
到文本,而不是只突出显示它们,则可以为该类添加jquery函数。它比你现在的代码要复杂得多。我想我已经接近了。但是我发现上面的例子有一个问题。如果搜索“ooo”,它只会突出显示中间的两个“ooo”,但会丢失第一个和最后一个。这让我很困惑,我明白了。当我点击文本时,js将得到一个带空格的字符串。修剪一下绳子可以解决这个问题。康格拉特,我想你应该标记我的答案是正确的:D