更改正文文本(快速方式）

Change body text (fast way)

本文关键字：方式 正文 文本      更新时间：2023-09-26

我需要更改正文内容中的指定文本。

我目前是这样做的：

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

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

你要求浏览器做的是旋转所有 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"以找到可以为您处理此操作的各种实现。

这可能更快有两个原因：

  1. 您不会要求引擎为页面上的每个元素生成HTML，销毁元素并重新创建它们。

  2. 您不会不必要地更新文本节点的内容（但再次，分析测试是否真的值得）

它还可以防止脚本出现问题，例如，如果您连接事件处理程序，然后大棒document.body.innerHTML，您的处理程序不再存在。有了上面，它们就原封不动了。

相关文章：