如何使用JavaScript替换无class属性的HTML元素的文本内容？

方案1：递归遍历文本节点（兼容性最好，不破坏DOM结构） #

该方案只会修改匹配的纯文本内容，不会破坏元素上绑定的事件、原有属性和HTML结构，是最稳妥的实现方式：

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  const targetText = "watch yesterday's broadcast";
  const replaceText = "watch the webinar now";

  // 递归遍历所有节点筛选文本节点
  function replaceTextInNode(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      if (node.textContent.includes(targetText)) {
        node.textContent = node.textContent.replace(targetText, replaceText);
      }
      return;
    }
    // 遍历所有子节点
    for (let i = 0; i < node.childNodes.length; i++) {
      replaceTextInNode(node.childNodes[i]);
    }
  }

  // 从body根节点开始全页面遍历
  replaceTextInNode(document.body);
});

方案2：使用TreeWalker实现（性能更高，适合大页面场景） #

如果页面DOM节点数量较多，使用原生TreeWalker API遍历文本节点效率更高：

document.addEventListener('DOMContentLoaded', function() {
  const targetText = "watch yesterday's broadcast";
  const replaceText = "watch the webinar now";

  // 创建仅筛选文本节点的遍历器
  const textWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  let currentNode;
  while(currentNode = textWalker.nextNode()) {
    if (currentNode.textContent.includes(targetText)) {
      currentNode.textContent = currentNode.textContent.replace(targetText, replaceText);
    }
  }
});

注意事项 #

• 不推荐直接使用innerHTML做全局替换，会破坏元素上已绑定的事件监听，还存在XSS安全风险
• 如果目标文本是页面加载完成后动态渲染的，需要把替换逻辑放在动态内容渲染完成的回调之后执行
• 两种方案都不受元素类名、标签类型限制，不需要给目标元素额外加属性即可生效

内容的提问来源于stack exchange，提问作者Jonathan Edward