用Javascript进行HTML转义

37015阅读　2评论2012-03-06　hoodng
分类：系统运维

  众所周知页面上的字符内容通常都需要进行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)通常转义为“ ”也就是“ ”。

  转义的代码非常简单：
  
  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;

  反转的代码也很简单，如下：

  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、完整版本的代码

  1. $package("js.lang"); // 没有包管理时，也可简单写成 js = {lang:{}};

  3. js.lang.String = function(){

  5.     this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;

  7.     this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;

  9.     this.REGX_TRIM = /(^\s*)|(\s*$)/g;

  11.     this.HTML_DECODE = {
  12.         "&lt;" : "<",
  13.         "&gt;" : ">",
  14.         "&amp;" : "&",
  15.         "&nbsp;": " ",
  16.         "&quot;": "\"",
  17.         "©": ""

  19.         // Add more
  20.     };

  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.     };

  34.     this.decodeHtml = function(s){
  35.         var HTML_DECODE = this.HTML_DECODE;

  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.     };

  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.     };


  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;

  74.         return this.__hash__;
  75.     };

  77. };

  79. js.lang.String.call(js.lang.String);
   在实际的使用中可以有两种方式：

  1）使用js.lang.String.encodeHtml(s)和js.lang.String.decodeHtml(s)。

  2）还可以直接扩展String的prototype
   
  1. js.lang.String.call(String.prototype);

  3.   // 那么

  5.   var str = "&'\"中国abc def";

  7.   var ec_str = str.encodeHtml();
  8.   
  9.   document.write(ec_str);
  10.   
  11.   document.write(""); // CU的博客在线编辑有bug,
    放不上来！！！

  13.   var dc_str = ec_str.decodeHtml();

  15.   document.write(dc_str);
上一篇：改进Javascript Base64编码传送
下一篇：Javascript日期的Format与Parse

文章评论