目标 :
前后端通用,规范,实用的html转义与反转义
ps:
网上这种的html转义与反转义博客太多了,并且也更有各的简介,好处是理解的深入,但是不容易统一规范,个人更倾向于规范。加上StringEscapeUtils的转义会把汉字也转义,有的时候也用的不方便,所以采用前端 underscore.js的通用工具类转义。
解决方案
1.前端采用 underscore.js 的_.escape(str)
如果不愿意集成这个js的可以采用下载源码1.8版本,把1342行到1356行copy出来用function就可以
2.后端根据_.escape(str) 源码编写一套相同的转义。 已经写好可以文章后自行下载
为什么这么解决呢?
是因为前后端通用,且规范
代码
1.前端
<script type="text/javascript" src="js/lib/underscore/underscore.js"></script>
<script>
var source = "<font>chen磊 xing</font>";
console.log(source);
console.log(_.escape(source));
console.log(_.unescape(_.escape(source)));
</script>
2.后端
package com.fanfan.util;
import org.apache.commons.lang.StringEscapeUtils;
/**
* 学习一下 前端Underscorejs 的 思想
*
* @ClassName UnderscoreUtil
* @author <a href="892042158@qq.com" target="_blank">于国帅</a>
* @date 2018年8月12日 下午8:02:20
*
*/
public class _ {
/**
* var escapeMap = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''', '`': '`' };
*
* @Title htmlEncode
* @author 于国帅
* @date 2018年8月12日 下午8:05:47
* @param source
* @return String
*/
public static String escape(String source) {
if (source == null) {
return source;
}
StringBuffer buffer = new StringBuffer();
char c = ' ';
for (int i = 0; i < source.length(); i++) {
c = source.charAt(i);
switch (c) {
case '&':
buffer.append("&");
break;
case '<':
buffer.append("<");
break;
case '>':
buffer.append(">");
break;
case '"':
buffer.append(""");
break;
case '\'':
buffer.append("#x27;");
break;
case '`':
buffer.append("`");
break;
default:
buffer.append(c);
}
}
return buffer.toString();
}
public static void main(String[] args) {
String source = "<font>chen磊 xing</font>";
System.err.println("StringEscapeUtils的转义 汉字也会被转义");
System.err.println(StringEscapeUtils.escapeHtml(source));
System.err.println("模拟 underscore.js的转义");
System.err.println(_.escape(source));
}
}
控制台打印