使用javascript突出显示文本

我想在给定的段落中加粗一个词。下面是一个javascript代码

        var hlWord = "idm";
        var nregex = new RegExp(hlWord,"gi");
        var div = document.getElementById("SR").innerHTML;
        var rword = div.replace(nregex,"<b>"+hlWord+"</b>");
        document.getElementById("SR").innerHTML = rword;  

var hlWord=“idm”；
var nregex=新的RegExp（hlWord，“gi”）；
var div=document.getElementById（“SR”）.innerHTML；
var rword=div.replace（nregex，“+hlWord+”）；
document.getElementById（“SR”）.innerHTML=rword；

下面是一个HTML代码

<div id="SR">
Download here free idm.
<a href="http://www.anywebsite.com/idm">click here to download</a>
</div>  

在这里下载免费idm。

这是很好的工作，使所有idm加粗，但这里有一个问题，它也改变了 像这样的url

<a href="http://www.anywebsite.com/<b>idm</b>">click here to download</a>  

这不是有效的url。这就是此代码导致url损坏的问题。 请告诉我如何避免这种情况。

---

谢谢…

您可以使用中的方法遍历所有文本节点，更改它们并用新的粗体替换它们

var hlWord=“idm”；
var nregex=新的RegExp（hlWord，“gi”）；
var sr=document.getElementById（'sr'）；
函数escape_html（html）{
返回html.replace（//&g'，&；'）。replace（//g'，）；
}
（函数findTextNodes（当前）{
//制作子节点的卷影副本。
var current_children=Array.prototype.slice.call（current.childNodes）；
对于（变量i=0；i

检查位于的代码示例

更新：

• 指出应谨慎使用

  innerHTML

  。处理前转义文本节点值

---

经过一些尝试和失败后，我制作了一个工作演示，可能比您想象的要复杂：

var cache=[]；
var reg=/idm/gi；
var id=函数（id）{return document.getElementById（id）；}
功能元素（ele）{
if（ele.childNodes.length>0）{
对于（var i=0；i0）{
var ele=cache.shift（）；
var val=ele.nodeValue；
var pnt=ele.parentNode；
var nextSibling=ele.nextSibling；
var i=0；
var-r，tmp；
pnt.removeChild（ele）；
while（r=reg.exec（val））{
tmp=document.createTextNode（val.substring（i，r.index））；
如果（下一个签名）{
pnt.插入前（tmp，下一次插入）；
tmp=document.createElement（“强”）；
appendChild（document.createTextNode（“idm”）；
pnt.插入前（tmp，下一次插入）；
}否则{
pnt.appendChild（tmp）；
tmp=document.createElement（“强”）；
appendChild（document.createTextNode（“idm”）；
pnt.appendChild（tmp）；
}
i=注册指数；
}
如果（我不知道你的示例有多深，但对于你发布的示例，你可以使用
var nregex=/idm/i；
。虽然很少，但有些文本具有HTML代码的含义，因此直接修改
innerHTML
可能会导致意外的结果：如果你要使用其他人的代码，至少要引用它：@passery你是对的在处理替换之前，需要转义text-nodeValue。@我没有引用该线程。我搜索了text-node traversal，找到了另一个在您列出的线程之前发布的线程，并且在第一次发布答案时，我在第一段中附加了该线程的链接。@ArieShaw我不这么认为，您的代码是错误的与我找到并提供的答案几乎完全相同。而且你在第一次发布答案时从未包含任何内容-我可以看到你的编辑历史，我记得你的原始答案。在我说了什么之前，没有添加任何内容。总之，没关系，你提出了一个很好的解决方案
var cache=[];
var reg=/idm/gi;
var id=function(ID){return document.getElementById(ID);}
function walkElement(ele){
    if(ele.childNodes.length>0){
        for(var i=0;i<ele.childNodes.length;i++){
            walkElement(ele.childNodes[i]);
        }
    }else if(ele.nodeType==3){//text node
        if(reg.test(ele.nodeValue)){
            cache.push(ele);
        }
    }
}
id("test").onclick=function(){
    cache=[];
    walkElement(id("SR"));
    while(cache.length>0){
        var ele=cache.shift();
        var val=ele.nodeValue;
        var pnt=ele.parentNode;
        var nextSibling=ele.nextSibling;
        var i=0;
        var r,tmp;
        pnt.removeChild(ele);
        while(r=reg.exec(val)){
            tmp=document.createTextNode(val.substring(i,r.index));
            if(nextSibling){
                pnt.insertBefore(tmp,nextSibling);
                tmp=document.createElement("strong");
                tmp.appendChild(document.createTextNode("idm"));
                pnt.insertBefore(tmp,nextSibling);
            }else{
                pnt.appendChild(tmp);
                tmp=document.createElement("strong");
                tmp.appendChild(document.createTextNode("idm"));
                pnt.appendChild(tmp);
            }
            i=reg.lastIndex;
        }
        if(i<val.length-1){
            tmp=document.createTextNode(val.substring(i,val.length));
            if(nextSibling){
                pnt.insertBefore(tmp,nextSibling);
            }else{
                pnt.appendChild(tmp);
            }
        }
    }
};