使用JS获取JSON数据时的HTML编码/解码问题求助

我来帮你搞定这个德语特殊字符的显示问题～

问题原因分析 #

你遇到的核心问题有两个：

1. textContent的特性：这个属性会把所有内容当作纯文本渲染，不会解析任何HTML实体（比如&或ä），所以编码后的字符会原封不动显示出来；而手动粘贴时浏览器会自动解析这些实体，所以能正常显示。
2. 双重编码问题：从你的JSON示例能看到，原本的L&#228cheln!被存成了L&#228cheln!——这说明字符被做了两次HTML编码（&被转成了&，ä被转成了ä），需要解码两次才能还原成原始字符。

具体解决方案 #

根据你的场景，这里提供三种可行方案，你可以按需选择：

方案一：用innerHTML替代textContent（适合数据完全可信的场景）

如果你的API返回内容都是安全可控的（没有用户输入的恶意代码），可以直接修改赋值逻辑：

async function getData() {
  const response = await fetch(api_url);
  const data = await response.json();
  var i = Math.floor((Math.random() * 16534) + 0);
  const { gname, ename } = data[i];
  // 把textContent换成innerHTML
  document.getElementById('gname').innerHTML = gname;
  document.getElementById('ename').innerHTML = ename;
}

原理：innerHTML会让浏览器自动解析内容中的HTML实体，L&#228cheln!会先被解析为L&#228cheln!，再进一步解析为Lächeln!，最终正确显示特殊字符。

方案二：用临时元素解码实体（更安全，避免XSS风险）

如果担心API内容可能存在安全隐患，推荐用这个更安全的解码方法：

// 先写一个解码函数
function decodeHtmlEntities(text) {
  const tempDiv = document.createElement('div');
  tempDiv.innerHTML = text;
  // 解码后取出纯文本
  return tempDiv.textContent;
}

async function getData() {
  const response = await fetch(api_url);
  const data = await response.json();
  var i = Math.floor((Math.random() * 16534) + 0);
  const { gname, ename } = data[i];
  // 解码后再赋值给textContent
  document.getElementById('gname').textContent = decodeHtmlEntities(gname);
  document.getElementById('ename').textContent = decodeHtmlEntities(ename);
}

原理：利用浏览器的HTML解析能力，先把编码文本放到临时div的innerHTML里完成解码，再通过textContent取出纯文本，既解决了编码问题，又避免了直接用innerHTML带来的XSS风险。

方案三：从后端API根源修复（最优解）

如果可以修改后端代码，建议直接让API返回UTF-8编码的原始字符，而不是HTML编码后的内容。比如在你的PHP接口中：

// 设置正确的响应头
header('Content-Type: application/json; charset=utf-8');
// 输出JSON时不要对德语字符做HTML编码，保留原始UTF-8字符
echo json_encode($data, JSON_UNESCAPED_UNICODE);

这样后端返回的JSON会直接是{"gname": "Lächeln!"}，前端用textContent就能直接正常显示，不需要任何额外解码步骤。

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