html /转义

html > 转义

这是一个陷阱。
直接使用HTML标签会导致解析错误。

不信，不要直接在 HTML 文本中输入标签。

不要这样做，始终使用 HTML 标签并转义用户输入。

如何解决 HTML 文本插值中转义字符无法正确识别的问题？

嘿嘿，告诉你一下，我在前端工作的时候也遇到过坑。

我们来谈谈去年吧。
我有一个使用 Vue 的项目。
该请求是显示用户输入的文本，该文本可能有换行符。
直接使用 {{ userText }} 吗？字母n应该显示为正常字符，而页面上有很多“n”字母，这尤其糟糕。

一开始只是想到了，尝试了很久。
终于搞定了，只有两个办法。

第一类简单粗暴。
只需在服务器端将 n 替换为
即可。
例如，要在 Java 中进行替换， userText = userText.replace("\n", "
");。
然后用户界面就可以直接{{ userText }}。
效率是有了，但是服务器还要做更多的工作。

第二个选项是自己实现用户界面。
使用 v-。
代码是这样写的：
<样本> </模板>
<脚本> 默认导出{ 数据（）{ 返回{ userText: "第一行和第二行", 格式化文本：“”， }; }, 安装（）{ this.formattedText = this.userText.replace(/\n/g, "
"); }, }; </脚本>
替换是在绑定钩子中完成的，v-显示处理后的字符串。
这减轻了服务器的压力，但确保了 userText 的安全，不会受到 XSS 攻击或类似的攻击。

还有另一种使用 CSS 空白的方法。
例如，空白：pre；将保留所有格式，包括 n。
但缺点是，如果用户在前面输入两个空格，在后面输入两个空格，使用 pre 时，页面会保留这些空格，从而导致布局混乱。
因此，除非有特殊需要保留格式，一般不建议这样做。

以后我经常推荐第一种方法，简单直接。
第二个用的是v-所以要注意安全。

无论如何，n在HTML中不是换行符，所以你必须将其转换为
或者使用whitespace属性。
尝试一下，你一定能做到。

html转义/反转义

此代码有两个函数：一个用于转义 HTML 特殊字符 (enXssHtml)，另一个用于取消转义它们 (deXssHtml)。

1 . enXssHtml 函数：
将 HTML 特殊字符（<、>、&、"、' 等）转换为相应的实体编码。

示例：< 变为 <，> 变为 >。

2 deXssHtml 函数：
将 HTML 实体的编码转换为相应的特殊字符。

每个函数执行以下步骤：
创建一个包含 HTML 特殊字符及其相应实体编码的对象 matchList。

将对象的键值转换为正则表达式字符串。

使用正则表达式将文本中的实体编码替换为相应的特殊字符。

注意：
正则表达式中的逗号必须转义。

g 标志在正则表达式中用于指示全局匹配。

使用示例： JavaScript letoriginalText = ""; 编码文本 = enXssHtml(originalText); 解码文本 = deXssHtml(encodedText);
console.log(encodedText); // 输出： console.log(解码后的文本); // 输出：
你自己掂量一下吧。