在 HTML 中从 JSON 打印出相同格式的转义字符？

Question

我在打印 HTML

中的 JSON 数据时遇到问题

var a = "We are the world.\n \tWelcome to our place.";

假设我有来自后端的 json 数据，我想打印出类似这样的内容。

<div>
We are the world.
  Welcome to our place.
</div>

我试过使用 ng-bind-html 但它显示所有内联字符串。

谢谢。

Answer 1

你不能简单地做到这一点。因为 \n 和 \t 无法识别 Html 的编码。您必须先将其替换为可识别的 Html 编码。您可以通过以下方式完成此操作：

$scope.a = "We are the world.\n \tWelcome to our place."
$scope.a.replace(/(?:\r\n|\r|\n)/g, '<br />');

但是现在，如果您将此文本绑定到 Html，它将省略单词 Welcome 之前多余的 space，只留下一个 space.

因此，要解决此问题，您必须将此 Html 绑定到 pre 标记内。它将保留您的格式。

<pre>{{a}}<pre>

Answer 2

您可以使用 style="white-space: pre"

让浏览器保留您的空格

如果你还需要自动换行，你可以使用white-space: pre-wrap

Print out same format with escape characters in HTML from JSON?