不使用innerHTML替换DOM占位符，避免移除事件监听器

直接操作DOM的文本节点是最可靠的方式——只修改文本内容，完全不触动元素结构，自然不会丢失已绑定的事件监听器。

核心实现代码 #

function replacePlaceholdersInTextNodes(placeholder, replacement) {
  // 转义正则特殊字符（若占位符含$、.等特殊字符必须启用）
  const escapedPlaceholder = placeholder.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(escapedPlaceholder, 'g');

  // 用TreeWalker高效遍历所有文本节点
  const treeWalker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );

  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    // 跳过脚本、样式等无需替换的敏感节点
    const parentTag = currentNode.parentElement?.tagName.toLowerCase();
    if (parentTag && ['script', 'style', 'noscript'].includes(parentTag)) {
      continue;
    }

    // 仅当文本包含占位符时才执行替换，提升性能
    if (regex.test(currentNode.nodeValue)) {
      currentNode.nodeValue = currentNode.nodeValue.replace(regex, replacement);
    }
  }
}

调用方式 #

// 替换单个占位符
replacePlaceholdersInTextNodes('{placeholder1}', 'replacementValue1');

// 批量替换示例
const replacements = [
  ['{userName}', '张三'],
  ['{orderId}', '202405201001']
];
replacements.forEach(([k, v]) => replacePlaceholdersInTextNodes(k, v));

关键优势 #

• 事件安全：仅修改文本节点的nodeValue，元素的事件监听器、自定义属性完全不受影响
• 性能高效：TreeWalker是原生DOM遍历API，比手动递归更轻便，避免冗余操作
• 精准控制：可跳过script、style等敏感节点，防止破坏页面逻辑或样式
• 全局替换：支持一次性替换所有匹配的占位符

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