Question

我需要在我的身体内容中更改指定文字。

我目前这样做：

findAndReplace: function(str, value) {
    document.body.innerHTML = document.body.innerHTML.replace('%'+str+'%', value);
}

有更有效的方法吗？它在大页面上变得非常慢。

Answer 1

你要求浏览器做的是旋转所有DOM元素，为它们创建HTML，将HTML交给JavaScript层，从JavaScript层接受新HTML，销毁所有旧元素，并从新字符串中完全重建页面。

如果您要替换的文本仅作为元素中的文本出现（在标记内，例如<div not-here>but yes here</div>），那么您可能会更好地进行递归DOM漫游：

walk(document.body, new RegExp('%' + str + '%', "g"), "the replacement");
function walk(node, target, replacement) {
  var child, text, newText;

  switch (node.nodeType) {
    case 1: // Element
      for (child = node.firstChild;
           child;
           child = child.nextSibling) {
        walk(child, target, replacement);
      }
      break;

    case 3: // Text node
      text = node.nodeValue;
      newText = text.replace(target, replacement);
      if (text != newText) {                // Profile to see if this test matters
          node.nodeValue = text;
      }   
      break;
  }
}

请注意，我在那里使用了正则表达式，因为否则只会替换第一个匹配项。请注意，如果str包含正则表达式中特殊的任何字符（例如^，.，*等），则需要将它们转义。（搜索“javascript regexp escape”以查找将为您执行此操作的各种实现。）

这可能更快的两个原因：

您不是要求引擎为页面上的每个元素生成HTML，销毁元素并重新创建它们
你不是在不必要地更新文本节点的内容（但是，再次，分析测试是否真的值得）

它也可能会阻止您的脚本出现问题，例如，如果您连接事件处理程序，然后使用大棒document.body.innerHTML，您的处理程序就不再存在了。有了上述内容，它们没有受到影响。

改变正文（快捷方式）

1 个答案: