在呈现的HTML中显示特殊字符、HTML实体和unicode

Displaying special characters, HTML entities, unicode as is in rendered HTML

本文关键字：HTML 实体 unicode 特殊字符 显示      更新时间：2023-09-26

我从后端收到一个带注释的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"，因此如果我想在UI中突出显示在位置17标记的'how'，我会在位置10或11得到它。

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

编辑：

这就是我现在所拥有的：

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

> --> &gt，使得它们在所呈现的HTML中显示为>而不是>

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

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

3）我还可以识别unicode字符并转换它们：

'u --> ''u，使其显示为

但还有一些其他问题，比如，额外的空白、外来字符、''x等模式。我不认为我有一个全面的列表，迟早会崩溃。

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。

试试这个小函数，根据接收到的字符添加正则表达式：

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

jsfiddle

相关文章：