Question

尝试检查文档中是否有给定数组中的任何字符串，并将其替换为<em>matched string</em>。

我尝试循环遍历数组并从中替换任何匹配，但是使用我的长数组将文档锁定了很长时间。

示例：

array.forEach(function(v) {
               console.log(v);
               var html = '<em>' + v + '</em>';
               var re = new RegExp(v, "gi");
               document.body.innerHTML = document.body.innerHTML.replace(re, html)
           })

Answer 1

我建议您使用未充分利用的 TreeWalker DOM API，如下所示：

var walk = document.createTreeWalker(document, NodeFilter.SHOW_TEXT, null, false),
    n;

while(n = walk.nextNode()) {
    n.nodeValue = n.nodeValue.replace(/foo/g, 'bar');
}

NodeFilter.SHOW_TEXT告诉TreeWalker您只对文本节点感兴趣。有关详细信息，请参阅https://developer.mozilla.org/en/docs/Web/API/TreeWalker。

但是你想用更复杂的DOM结构替换文本，涉及em元素，所以我们需要做更多的工作：

function emphasize(regexp) {
    var walk = document.createTreeWalker(document, NodeFilter.SHOW_TEXT, null, false),
        n, span;

    while (n = walk.nextNode()) {
        newVal = n.nodeValue.replace(regexp, function(match) { 
            return "<em>" + match + "</em>";
        });

        if (newVal !== n.nodeValue) {
            span = document.createElement('span');
            span.innerHTML = newVal;
            n.parentNode.replaceChild(span, n);
        }
    }
}

可能是Nodewalker对于将当前节点从其下面替换出来不会太高兴。这需要一些测试和可能的调整。

Answer 2

这就是我要做的事情

function escapeRegExp(str) {
  return str.replace(/[-[\/{}*+?.\\\]^$]/g, "\\$&");
}

var code = document.body.innerHTML;
array.forEach(function(v) {
  code = code.replace(new RegExp(escapeRegExp(v)), "g"), "<em>"+v+"</em>")
}
document.body.innerHTML = code;

我避免对innerHTML进行多次赋值，以避免不必要的回流（性能）

检查文档是否包含数组中的任何字符串并替换它

2 个答案: