前端-html字符转义

遇到个问题，前台展示的时候，像"<"、">"、"&"等字符，都展示成了"<"、">"、"&"等的转义字符。

修复起来还挺简单。主要想马一下这个实现方案。

1.入库时，把原字符转义成转义字符存库。

好处：防止sql注入、xss漏洞等各种错误发生

2.使用时，后端转义回原字符：用unescapeHtml()转义

当前端不是直接在页面渲染，而是别的用途不能处理，需要直接转义后使用，需要后端先转义好再传给前端。

String str = StringEscapeUtils.unescapeHtml4("<p>前端学习</p>");

3.使用时，前端转义回原字符：用html渲染，会自动把字符转义。

3.1页面渲染

• velocity模板渲染

$data

• Vue渲染

{{data}}

直接放在html里，html渲染的时候会转义。

3.2页面渲染完后，再赋值到某个节点上

需要用$(".div").html(data)

不能用$(".div").text(data)

因为html()函数的值是inner HTML，会当成html标签内容解析

而text()函数的值是纯文本内容

3.3双斜杠问题，json解析报错，后台将反斜杠转义

因为后台是mapToJson(data)输出，前台是JSON.parse(data)解析

如果data中包含"\;"的话,mapToJson会把内容转义成"\\;"

然后前台JSON.parse(".....\\;.....")就会js报错，无法往下执行。

这时需要把后台的反斜杠也换成反斜杠转义字符str.replaceAll("\\\\", "\\\")

String 的 replaceAll()方法，采用的是正则表达式的规则匹配，

四个\\\\ ，java解析为\\交给正则表达式， 正则表达式再经过一次转换，把\\转换成为\

这就是java里面要用正则来表示一个 \ 必须写成4个\