替换曼达伊字符为希伯来字符的JS代码为何破坏页面链接？

问题根源 #

原代码的两个核心问题导致链接失效：

• 针对<b>和<td>标签的处理逻辑中，直接修改element.textContent：如果这些标签内部包含<a>等链接元素，textContent会提取所有子节点的纯文本，赋值新文本时会完全替换标签内的所有HTML结构，直接删除其中的链接标签，导致链接失效。
• 全局文本节点遍历的逻辑和第一个循环重复处理，且MutationObserver监听整个文档的DOM变化，每次触发都会全量执行替换，可能引发不必要的DOM重写。

修复方案 #

修改代码，只遍历并修改纯文本节点，避免直接替换元素内容破坏HTML结构；同时优化处理逻辑，排除不需要替换的场景，避免重复操作：

function replaceMandaicCharacters() {
  const mandaicLetters = "\u{0840}\u{0841}\u{0842}\u{0843}\u{0844}\u{0845}\u{0846}\u{0847}\u{0848}\u{0849}\u{084A}\u{084B}\u{084C}\u{084D}\u{084E}\u{084F}\u{0850}\u{0851}\u{0852}\u{0853}\u{0854}\u{0855}";
  const hebrewLetters = "אבגדחוזהטיכלמנסעפצקרשת";
  const excludeTags = ["SCRIPT", "STYLE"]; // 排除无需处理的标签，若需替换链接文本可移除"A"

  // 递归遍历文本节点的工具函数
  function traverseTextNodes(node, callback) {
    if (node.nodeType === Node.TEXT_NODE) {
      const parentTag = node.parentElement?.tagName;
      if (excludeTags.includes(parentTag)) return;
      callback(node);
    } else {
      if (excludeTags.includes(node.tagName)) return;
      for (const child of node.childNodes) {
        traverseTextNodes(child, callback);
      }
    }
  }

  // 执行字符替换
  traverseTextNodes(document.body, (textNode) => {
    const originalText = textNode.textContent;
    const regex = new RegExp(`[${mandaicLetters}]`, "g");
    const newText = originalText.replace(regex, (match) => {
      const index = mandaicLetters.indexOf(match);
      return index !== -1 ? hebrewLetters.charAt(index) : match;
    });
    if (newText !== originalText) {
      textNode.textContent = newText;
    }
  });
}

// 优化MutationObserver触发逻辑，避免过度执行
const observer = new MutationObserver((mutations) => {
  let needUpdate = false;
  for (const mutation of mutations) {
    if (mutation.addedNodes.length > 0) {
      for (const node of mutation.addedNodes) {
        if (node.nodeType === Node.TEXT_NODE || (node.nodeType === Node.ELEMENT_NODE && node.childNodes.length > 0)) {
          needUpdate = true;
          break;
        }
      }
      if (needUpdate) break;
    }
  }
  if (needUpdate) replaceMandaicCharacters();
});

observer.observe(document.body, { subtree: true, childList: true });

关键优化点 #

• 仅修改纯文本节点：通过递归遍历直接修改文本内容，完全保留原有HTML结构，不会删除链接等元素。
• 可配置标签过滤：通过excludeTags排除脚本、样式等无需处理的标签，若需要替换链接内的曼达伊字符，移除"A"即可。
• 减少无效触发：MutationObserver仅在新增节点时执行替换，避免无意义的重复DOM操作，提升性能。

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