Bootstrap

前端-html字符转义

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

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

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

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

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

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

String str = StringEscapeUtils.unescapeHtml4("&lt;p&gt;前端学习&lt;/p&gt;");

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

3.1页面渲染

  • velocity模板渲染

<div>$data</div>

  • Vue渲染

<div>{{data}}</div>

直接放在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("\\\\", "\\&#92;")

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

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

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

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;