HTML encoding/decoding 问题,当使用 JS 从 JSON 数据样本中获取时
HTML encoding/decoding issue, when using JS to get from JSON data sample
我有一个网站,想要显示文字。文本是德语的,来自我拥有的 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ächeln!" }
<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>
感谢任何帮助或建议。如果有什么需要解释的,请告诉我。
使用 innerHTML 而不是 innetText 来解决您的问题
function getData() {
const data = { "id": "32", "ename": "Smile.", "gname": "Lächeln!" };
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>
如果您的字符串包含 HTML 个实体,例如 ä
,那么它不是文本,而是 HTML。
textContent
希望您将纯文本传递给它,而不是 HTML 源代码。
改用innerHTML
。
const value = "erzählt";
text.textContent = value;
html.innerHTML = value;
<div id=text></div>
<div id=html></div>
我有一个网站,想要显示文字。文本是德语的,来自我拥有的 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ächeln!" }
<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>
感谢任何帮助或建议。如果有什么需要解释的,请告诉我。
使用 innerHTML 而不是 innetText 来解决您的问题
function getData() {
const data = { "id": "32", "ename": "Smile.", "gname": "Lächeln!" };
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>
如果您的字符串包含 HTML 个实体,例如 ä
,那么它不是文本,而是 HTML。
textContent
希望您将纯文本传递给它,而不是 HTML 源代码。
改用innerHTML
。
const value = "erzählt";
text.textContent = value;
html.innerHTML = value;
<div id=text></div>
<div id=html></div>