以呈现的HTML形式显示特殊字符，HTML实体和unicode

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" ，因此，如果我要突出显示'how' （在用户界面中的位置17标记），我会在位置10或11处获得它。

同样，如果用户想要标记'are' ，则它将在14处被标记，而服务器希望在21处对其进行标记。

编辑：

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

1）所有html实体都转换为：

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

2） \\ t，\\ r，\\ n转换为：

\\t --> \\\\t ，使其显示为\\t

3）我也可以识别unicode字符并将其转换：

\\u --\u0026gt; \\\\u\u003c/code> ，以便按原样显示它们

但是还有其他一些问题，例如多余的空格，外来字符，\\ x等模式。我不认为我拥有所有内容的完整列表，并且迟早会损坏。

Answer 1

这正是jsesc所做的。 从自述文件：

jsesc是一个JavaScript库，用于转义JavaScript字符串，同时生成最短的有效纯ASCII输出。 这是一个在线演示。

如下使用它：

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");
}