&nbsp 无法在 javascript 中正确显示 [重复]答案

【问题标题】：&nbsp not displaying properly in javascript [duplicate]&nbsp 无法在 javascript 中正确显示 [重复]
【发布时间】：2021-06-12 18:14:46
【问题描述】：

我正在尝试使用 javascript 在我的页面中添加行。我最终计划从中生成 ascii 艺术，但这不是重点。出于某种原因，文本 |&nbsp;&nbsp;&nbsp;&nbsp;| 正确呈现为 html 的一部分，但不是 textNode。我的 MRE 如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="Test">
        |&nbsp;&nbsp;&nbsp;&nbsp;|
    </div>
    <script>
        testDiv = document.getElementById('Test')
        testDiv.appendChild(document.createElement('br'))
        testDiv.appendChild(document.createTextNode('|&nbsp;&nbsp;&nbsp;&nbsp;|'))
    </script>
</body>

在 Chromium 上，它显示为：

|    |
|&nbsp;&nbsp;&nbsp;&nbsp;|

我已经尝试了大约 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 的回答了解更多上下文。

标签： javascript textnode

【解决方案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>

【讨论】：