无法在 javascript 中正确显示 [重复]
Posted
技术标签:
【中文标题】  无法在 javascript 中正确显示 [重复]【英文标题】：  not displaying properly in javascript [duplicate] 【发布时间】：2021-06-12 18:14:46 【问题描述】：我正在尝试使用 javascript 在我的页面中添加行。我最终计划从中生成 ascii 艺术，但这不是重点。出于某种原因，文本 |    | 正确呈现为 html 的一部分，但不是 textNode。我的 MRE 如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="Test">
| |
</div>
<script>
testDiv = document.getElementById('Test')
testDiv.appendChild(document.createElement('br'))
testDiv.appendChild(document.createTextNode('| |'))
</script>
</body>
在 Chromium 上，它显示为：
| |
| |
我已经尝试了大约 10 种不同的方法来对不间断空间进行编码，但无论如何我都会得到类似的结果。对于我能找到的每种编码，我都尝试过使用\ 和$#。我没有在其他浏览器上尝试过。
【问题讨论】：
Duplicate of How to insert HTML entities with createTextNode?。与插入 HTML（.innerHTML、.insertAdjacentHTML）相反，插入文本（.textContent、.createTextNode）不会解析 HTML（包括 HTML 实体）。
要安全地解析 HTML 实体，请尝试 testDiv.appendChild(document.createTextNode(new DOMParser().parseFromString('|&nbsp;&nbsp;&nbsp;&nbsp;|', "text/html").documentElement.textContent));。这将在无法执行任何脚本的独立文档中解析 HTML。
@SebastianSimon 你能详细说明你的安全评论吗？假设附加的字符串是可信的，我不明白为什么这是必要的。
@importhuh 字符串可能不受信任正是原因。 element.innerHTML = "&nbsp;" 工作正常，但 element.innerHTML = '<img src="." onerror="alert(1);">' 可能很危险。 DOMParser 方法不会发生此类 XSS 攻击。编写的代码也忽略了 HTML 元素，并且只获取 HTML 实体的结果文本内容。请参阅我对Find and replace specific text characters across a document with JS 的回答了解更多上下文。
【参考方案1】：
您可以在这种情况下使用 unicode 文字。
document.createTextNode("|\u00A0\u00A0\u00A0\u00A0|")
【讨论】：
【参考方案2】：用<pre></pre> 标记将您的文本括起来。它会在您键入时呈现。你不需要&nbsp;
<pre>
| |
</pre>
Javascript 示例
<script>
function myFunction()
var x = document.createElement("PRE");
var t = document.createTextNode("| |");
x.appendChild(t);
document.body.appendChild(x);
</script>
【讨论】：
以上是关于  无法在 javascript 中正确显示 [重复]的主要内容，如果未能解决你的问题，请参考以下文章