HTML encoding/decoding 问题，当使用 JS 从 JSON 数据样本中获取时

Question

我有一个网站，想要显示文字。文本是德语的，来自我拥有的 JSON 数据集。这是目前从本地主机 API URL 检索到的。德语单词将特殊字符替换为 HTML 编码字符。例如，erzählt 在 JSON 数据中保存为 erzählt。当我将段落标记的 textContent 设为 JSON 德语文本时，HTML 编码不起作用。但是，如果我只是手动复制并粘贴它，它确实有效。如何触发编码工作并使其正确显示？

代码：从 JSON API 中获取随机德语单词，将文本放入段落中。编码问题。显示的是 erzählt 而不是 erzählt 。

JSON 示例： { "id": "32", "ename": "Smile.", "gname": "L&#228cheln!" }

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
</head>
 <h4>German:</h4>
 <div>
  <p id="gname">
</div>

<script>
      const api_url = 'http://localhost:3000/fyp/api/grandom.php';
      
      async function getData() {
        const repsonse = await fetch(api_url);
        const data = await repsonse.json();
        var i = Math.floor((Math.random() * 16534) + 0);
        const { gname, ename } = data[i];
        document.getElementById('gname').textContent = gname;
        document.getElementById('ename').textContent = ename;

      }

      getData();
    </script>

感谢任何帮助或建议。如果有什么需要解释的，请告诉我。

Answer 1

使用 innerHTML 而不是 innetText 来解决您的问题

function getData() {
  const data =  { "id": "32", "ename": "Smile.", "gname": "L&#228cheln!" };
  document.getElementById('gname').innerHTML = data.gname;
  document.getElementById('ename').innerHTML = data.ename;
}

getData();

<head>
  <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
</head>
<body>
 <h4>German:</h4>
 <div>
  <p id="gname"></p>
  <p id="ename"></p>
</div>
<body>

Answer 2

如果您的字符串包含 HTML 个实体，例如 &#228，那么它不是文本，而是 HTML。

textContent 希望您将纯文本传递给它，而不是 HTML 源代码。

改用innerHTML。

const value = "erz&#228hlt";
text.textContent = value;
html.innerHTML = value;

<div id=text></div>
<div id=html></div>

HTML encoding/decoding 问题，当使用 JS 从 JSON 数据样本中获取时

HTML encoding/decoding issue, when using JS to get from JSON data sample

javascript

html

json

encoding

decoding