Question

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

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

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

我希望按原样显示内容，因为我需要突出显示注释，我也允许用户标记内容，如果他在显示的HTML中标记它们，则位置和长度将不同于原json。

示例：

JSON：

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

这显示为"Hi there"，因此，如果我想突出显示在位置17处标记的'how'，则会在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 是escaping JavaScript strings的JavaScript库，同时生成尽可能短的有效ASCII输出。 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格式显示jsesc输出，请不要将其设置为元素.innerHTML，而是使用.textContent。

Answer 2

尝试这个小功能，根据收到的字符添加正则表达式：

function html(str){
    return str.replace(/&/g, "&amp;").replace(/\t/g, "\\t").replace(/\n/g, "\\n").replace(/\r/g, "\\r");
}