浏览器扩展开发：如何获取保留HTML实体的节点文本？

问题描述 #

我在开发浏览器扩展的Content Script时，需要处理网页文本并替换部分内容，同时保证网页结构不被破坏。目前用document.createTreeWalker筛选并遍历文本节点：

let nodes = document.createTreeWalker(...);

while ((node = nodes.nextNode())) {
  let text = node.nodeValue;
  // 文本替换逻辑
}

遇到一个问题：对于包含‏和‎实体的span元素：

<span class="a-text-bold">Product
                                    &rlm;
                                        :
                                    &lrm;
                                </span>

node.nodeValue返回的是转义后的Unicode字符，而非原始HTML实体：

"Product
                                    ‏
                                        :
                                    ‎
                                
"

替换文本后，由于丢失了原始实体对应的格式控制，网页排版被破坏。如何在处理时保留这些HTML实体的形式？

解决方案 #

核心原理 #

浏览器加载HTML后，会将所有实体解析为对应的Unicode字符（‏对应U+200F，‎对应U+200E），因此无法直接从文本节点获取原始的实体字符串。解决思路分为两种：

方案1：保留Unicode控制字符直接处理

不需要还原实体，而是在替换逻辑中保留这些控制字符，避免丢失格式：

while ((node = nodes.nextNode())) {
  let text = node.nodeValue;
  // 示例：替换"Product"为"商品"，同时保留RLM/LRM等控制字符
  text = text.replace(/Product(\s*[\u200F\u200E]\s*:)/, `商品$1`);
  node.nodeValue = text;
}

这种方法直接操作文本节点，不会破坏DOM结构，是最简洁的方案。

方案2：将Unicode字符转换为HTML实体插入

如果必须在DOM中保留‏/‎的实体形式，需要将文本节点替换为包含实体的HTML内容：

while ((node = nodes.nextNode())) {
  let text = node.nodeValue;
  // 先执行你的文本替换逻辑
  text = text.replace('Product', '商品');
  // 将Unicode控制字符转换为HTML实体
  const htmlContent = text.replace(/\u200F/g, '‏').replace(/\u200E/g, '‎');
  
  // 创建临时元素解析HTML
  const tempEl = document.createElement('span');
  tempEl.innerHTML = htmlContent;
  
  // 替换原文本节点
  const parent = node.parentNode;
  parent.insertBefore(tempEl.firstChild, node);
  // 插入所有子节点（如果实体被解析为单独节点）
  while (tempEl.firstChild) {
    parent.insertBefore(tempEl.firstChild, node.nextSibling);
  }
  parent.removeChild(node);
}

注意：这种方法会修改DOM结构（拆分原文本节点），需要确保后续遍历逻辑能适配变化后的节点。

内容的提问来源于stack exchange，提问作者K. V.