javascript - 使用javascript制作文本突出显示

Question

我想在给定的段落中加粗一个词。这是一个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;  

这是一段 HTML 代码。

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

这很好用，并且使所有 idm 加粗，但这里有一个问题，它也改变了喜欢这个的网址

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

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

Answer 1

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

var hlWord = "idm";
var nregex = new RegExp(hlWord,"gi");

var sr = document.getElementById('SR');

function escape_html(html) {
    return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

(function findTextNodes(current) {
    // make a shadow copy of the child nodes.
    var current_children = Array.prototype.slice.call(current.childNodes);
    for(var i = 0; i < current_children.length; i++) {
        var child = current.childNodes[i];
        // text node
        if(child.nodeType == 3) {
            var value = escape_html(child.nodeValue);
            var html = value.replace(nregex, '<b>' + hlWord + '</b>');
            if (html != value) {
                var node = document.createElement('div');
                node.innerHTML = html;
                // make a shadow copy of the child nodes.
                var childNodes = Array.prototype.slice.call(node.childNodes);
                // replace the plain text node with the bold segments
                for (var j = 0; j < childNodes.length; j++) {
                    var c = childNodes[j];
                    current.insertBefore(c, child);
                }
                current.removeChild(child);
            }
        }
        else {
            findTextNodes(child);
        }
    }
})(sr);

查看 jsFiddle 处的代码示例.

更新:

• Passerby指出应谨慎使用innerHTML。在处理之前转义文本 nodeValue。