时间戳

首页 > 解决方案 > 使用 JS 从 JSON 数据样本中获取 HTML 编码/解码问题

javascript - 使用 JS 从 JSON 数据样本中获取 HTML 编码/解码问题

问题描述

我有一个网站，想显示文字。文本是德语，来自我拥有的 JSON 数据集。现在是从 localhost 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>

任何帮助或建议表示赞赏。如果有什么需要解释的，请告诉我。

标签： javascripthtmljsonencodingdecoding

解决方案

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

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

改为使用innerHTML。

const value = "erz&#228hlt";
text.textContent = value;
html.innerHTML = value;
<div id=text></div>
<div id=html></div>

推荐阅读