XML文本节点创建时避免字符实体引用转义的问题求助

我完全懂你碰到的这个糟心问题——用JavaScript的XML DOM创建<option>元素时，字符实体引用（比如₂）里的&会被自动转义成&，导致下拉菜单里显示的是₂而不是对应的下标2字符，太影响体验了！

下面给你几个实用的解决方案，按需选择：

方案1：直接使用Unicode字符代替实体引用 #

最直接的办法就是跳过实体引用，直接在JavaScript字符串里使用对应的Unicode转义序列。比如₂对应的是Unicode码点U+2082（下标数字2），你可以写成"\u2082"，这样用createTextNode创建文本节点时，会直接渲染成目标字符：

// 创建下拉菜单容器
const selectElement = document.createElement('select');

// 创建option元素
const option = document.createElement('option');
// 直接用Unicode转义序列写入文本
option.appendChild(document.createTextNode("H\u2082O 选项"));

selectElement.appendChild(option);
document.body.appendChild(selectElement);

方案2：先解码实体引用再创建文本节点 #

如果你的文本是从外部获取的（比如后端返回的带实体的字符串），没办法直接写Unicode，可以用一个临时DOM元素来帮你解析实体：

// 定义实体解码函数
function decodeCharacterEntities(entityText) {
  const tempContainer = document.createElement('div');
  // 把带实体的文本作为HTML插入，浏览器会自动解析实体
  tempContainer.innerHTML = entityText;
  // 返回解析后的纯文本
  return tempContainer.textContent;
}

// 使用示例
const selectElement = document.createElement('select');
const option = document.createElement('option');

// 假设这是你拿到的带实体的文本
const rawText = "H₂O 选项";
// 解码实体
const decodedText = decodeCharacterEntities(rawText);

option.appendChild(document.createTextNode(decodedText));
selectElement.appendChild(option);
document.body.appendChild(selectElement);

方案3：直接用innerHTML设置option内容 #

如果你不需要严格遵循XML DOM的操作流程，也可以直接给<option>的innerHTML赋值，浏览器会自动解析里面的字符实体：

const selectElement = document.createElement('select');
const option = document.createElement('option');

// 直接通过innerHTML设置带实体的文本
option.innerHTML = "H₂O 选项";

selectElement.appendChild(option);
document.body.appendChild(selectElement);

注意：这个方法要确保文本里没有恶意HTML标签，否则会被解析执行。如果只是纯文本带实体，完全可以放心用。

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