原文
/** JQuery Html Encoding、Decoding * 原理是利用JQuery自带的html()和text()函数可以转义Html字符 * 虚拟一个Div通过赋值和取值来得到想要的Html编码或者解码 */ <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> //Html编码获取Html转义实体 function htmlEncode(value){ return $('<div/>').text(value).html(); } //Html解码获取Html实体 function htmlDecode(value){ return $('<div/>').html(value).text(); } </script>
//编码 function html_encode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, ">"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/\'/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br>"); return s; } //解码 function html_decode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/>/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/'/g, "\'"); s = s.replace(/"/g, "\""); s = s.replace(/<br>/g, "\n"); return s; }
比如有这样的hltml代码:
<a id="pcmobile" class="" " href="javascript:void(0);">PC&MOBILE</a><aid="test" href="javascript:void(0);"><</a>如果直接用$("# pcmobile").html()方法,那取得的值默认被浏览器转义了,原来的 &变成了 &。所以a标签里面的值变成PC&MOBILE。同样的,<被转义成<,>被转义成>。有时候为了防止xss注入,这种转义是有必要的,但是,如果不想被转义,解决方案很简单,不用html()方法 ,改成text()方法就行了.如 $("# pcmobile").text()。
部分字符转义如下:
- &符号:"&", "&"
- 双引号:"\"", """
- 小于号:"<", "<"
- 大于号:">", ">"
- 单引号:"'", "'"