用Javascript(js)进行HTML转义工具(处理特殊字符显示)-阿里云开发者社区

开发者社区> 开发与运维> 正文

用Javascript(js)进行HTML转义工具(处理特殊字符显示)

简介: 转自:http://blog.csdn.net/hj7jay/article/details/51280405  众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,Textarea提交的内容,更是要进行转义以防止javascript注入攻击。
转自:http://blog.csdn.net/hj7jay/article/details/51280405 

众所周知页面上的字符内容通常都需要进行HTML转义才能正确显示,尤其对于Input,Textarea提交的内容,更是要进行转义以防止javascript注入攻击。

  通常的HTML转义主要是针对内容中的"<",">","&",以及空格、单双引号等。但其实还有很多字符也需要进行转义。具体的可以参考这篇文章
** 1、HTML转义
  参考上面的提到的文章,基本上可以确定以下的转义的范围和方式。
  1)对"\""、"&"、"'"、"<"、">"、空格(0x20)、0x00到0x20、0x7F-0xFF
  以及0x0100-0x2700的字符进行转义,基本上就覆盖的比较全面了。
  
   用javascript的正则表达式可以写为:
   this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g; 
  2)为保证转义结果对浏览器的无差别,转义编码为实体编号,而不用实体名称。
  
  3)空格(0x20)通常转义为“ ”也就是“ ”。
  转义的代码非常简单:
  
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. this.encodeHtml = function(s){  
  2.       return (typeof s != "string") ? s :  
  3.           s.replace(this.REGX_HTML_ENCODE,  
  4.                     function($0){  
  5.                         var c = $0.charCodeAt(0), r = ["&#"];  
  6.                         c = (c == 0x20) ? 0xA0 : c;  
  7.                         r.push(c); r.push(";");  
  8.                         return r.join("");  
  9.                     });  
  10.   };  
** 2、反转义
  既然有转义,自然需要反转义。
  1) 对“&#num;”实体编号的转义,直接提取编号然后fromCharCode就可以得到字符。
  2) 对于诸如“<”,需要建立一张如下的表来查询。
   this.HTML_DECODE = {
        "<"  : "<", 
        ">"  : ">", 
        "&" : "&", 
        " ": " ", 
        """: "\"", 
        "©": "©"
        // Add more
   };
  由此我们可以有反转义的正则表达式:
  this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
  反转的代码也很简单,如下:
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. this.decodeHtml = function(s){  
  2.       return (typeof s != "string") ? s :  
  3.           s.replace(this.REGX_HTML_DECODE,  
  4.                     function($0,$1){  
  5.                         var c = this.HTML_ENCODE[$0]; // 尝试查表  
  6.                         if(c === undefined){  
  7.                             // Maybe is Entity Number  
  8.                             if(!isNaN($1)){  
  9.                                 c = String.fromCharCode(($1 == 160) ? 32 : $1);  
  10.                             }else{  
  11.                                 // Not Entity Number  
  12.                                 c = $0;  
  13.                             }  
  14.                         }  
  15.                         return c;  
  16.                     });  
  17.   };  

** 3、一个有意思的认识
  其实在用正则表达式转义之前,我一直都是用遍历整个字符串,逐个比较字符的方式。直到有一天,看到一篇文章说,javascript正则表达式是C实现的,比自己用javascript遍历字符要快,于是我就试着改写成上面这种方式。虽然代码看起来的确显得神秘而又牛叉,但遗憾的是,在我的Chrome 11 (FreeBSD 64 9.0)上,遍历字符转义/反转的方式要比上面正则表达式的代码快2到3倍(字符串长度越长越明显)。其实,想想也能明白为什么。
** 4、完整版本的代码
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. $package("js.lang"); // 没有包管理时,也可简单写成 js = {lang:{}};  
  2.   
  3. js.lang.String = function(){  
  4.   
  5.     this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;  
  6.   
  7.     this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;  
  8.   
  9.     this.REGX_TRIM = /(^\s*)|(\s*$)/g;  
  10.   
  11.     this.HTML_DECODE = {  
  12.         "<" : "<",   
  13.         ">" : ">",   
  14.         "&" : "&",   
  15.         " "" ",   
  16.         """: "\"",   
  17.         "©"""  
  18.   
  19.         // Add more  
  20.     };  
  21.   
  22.     this.encodeHtml = function(s){  
  23.         s = (s != undefined) ? s : this.toString();  
  24.         return (typeof s != "string") ? s :  
  25.             s.replace(this.REGX_HTML_ENCODE,   
  26.                       function($0){  
  27.                           var c = $0.charCodeAt(0), r = ["&#"];  
  28.                           c = (c == 0x20) ? 0xA0 : c;  
  29.                           r.push(c); r.push(";");  
  30.                           return r.join("");  
  31.                       });  
  32.     };  
  33.   
  34.     this.decodeHtml = function(s){  
  35.         var HTML_DECODE = this.HTML_DECODE;  
  36.   
  37.         s = (s != undefined) ? s : this.toString();  
  38.         return (typeof s != "string") ? s :  
  39.             s.replace(this.REGX_HTML_DECODE,  
  40.                       function($0, $1){  
  41.                           var c = HTML_DECODE[$0];  
  42.                           if(c == undefined){  
  43.                               // Maybe is Entity Number  
  44.                               if(!isNaN($1)){  
  45.                                   c = String.fromCharCode(($1 == 160) ? 32:$1);  
  46.                               }else{  
  47.                                   c = $0;  
  48.                               }  
  49.                           }  
  50.                           return c;  
  51.                       });  
  52.     };  
  53.   
  54.     this.trim = function(s){  
  55.         s = (s != undefined) ? s : this.toString();  
  56.         return (typeof s != "string") ? s :  
  57.             s.replace(this.REGX_TRIM, "");  
  58.     };  
  59.   
  60.   
  61.     this.hashCode = function(){  
  62.         var hash = this.__hash__, _char;  
  63.         if(hash == undefined || hash == 0){  
  64.             hash = 0;  
  65.             for (var i = 0, len=this.length; i < len; i++) {  
  66.                 _char = this.charCodeAt(i);  
  67.                 hash = 31*hash + _char;  
  68.                 hash = hash & hash; // Convert to 32bit integer  
  69.             }  
  70.             hash = hash & 0x7fffffff;  
  71.         }  
  72.         this.__hash__ = hash;  
  73.   
  74.         return this.__hash__;   
  75.     };  
  76.   
  77. };  
  78.   
  79. js.lang.String.call(js.lang.String);  

   在实际的使用中可以有两种方式:
  1)使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。
  2)还可以直接扩展String的prototype
  
[javascript] view plain copy
 在CODE上查看代码片派生到我的代码片
  1. js.lang.String.call(String.prototype);  
  2.   
  3.   // 那么  
  4.   
  5.   var str = "&'\"中国abc def";  
  6.   
  7.   var ec_str = str.encodeHtml();  
  8.     
  9.   document.write(ec_str);  
  10.     
  11.   document.write(""); // CU的博客在线编辑有bug,  
  12. 放不上来!!!  
  13.   
  14.   var dc_str = ec_str.decodeHtml();  
  15.   
  16.   document.write(dc_str);  

若转载请注明出处!若有疑问,请回复交流!

版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章