javascript - 按渲染 HTML 中的方式显示特殊字符、HTML 实体、unicode

Question

我从后端收到一个带注释的 json，我需要在 UI 中显示它。

json 包含根据内容中的位置和长度标记的字符串。

它可能包含 \t\n 或额外的 空格 等字符，还有 html 实体、unicode 等。当我尝试显示它时在 HTML 中，此信息会丢失，html 实体 被转换为相应的值，空格 被减少为单个，unicode 被转换为相应的字符。

我想按原样显示内容，因为我需要突出显示注释，并且我还允许用户标记内容，如果他在显示的 HTML 中标记它们，则位置和长度将与原始 json。

示例:

json:

{
"content": " \tHi there &nbsp how are you?"
}

这显示为“Hi There”，因此如果我想突出显示'how'(标记在位置17)，在UI中我会得到它位于位置 10 或 11。

此外，如果用户想要标记 'are'，它会被标记为 14，而服务器会期望它被标记为 21。

编辑:

这是我到目前为止所拥有的:

1) 所有 html 实体都转换为:

> --> &gt 以便它们在渲染的 HTML 中显示为 > 而不是 >

2)\t、\r、\n 转换为:

\t -->\\t ，以便显示为 \t

3) 我还可以识别 unicode 字符并转换它们:

\u -->\\u ，以便它们按原样显示

但还有一些其他问题，例如额外的空格、外来字符、\x 等模式。我认为我没有所有内容的完整列表，迟早它可能会崩溃。

Answer 1

这正是jsesc做。来自自述文件:

jsesc is a JavaScript library for escaping JavaScript strings while generating the shortest possible valid ASCII-only output. Here’s an online demo.

按如下方式使用:

var data = { "content": " \tHi there &nbsp how are you?"};
var escaped = jsesc(data.content);
// → ' \\tHi there &nbsp how are you?'

有很多选项可以自定义输出。请参阅文档了解更多详细信息。

要以 HTML 形式显示 jsec 输出，请勿将其设置为元素的 .innerHTML，而是使用 .textContent。