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

　　转义的代码非常简单：

JavaScript代码
  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） 对于诸如“&lt;”，需要建立一张如下的表来查询。

JavaScript代码
  1. this.HTML_DECODE = {  
  2. 　　"<"  : "<",  
  3. 　　">"  : ">",  
  4. 　　"&" : "&",  
  5. 　　" ": " ",  
  6. 　　""": "\"",  
  7. 　　"©": "?"  
  8. 　　// Add more  
  9. 　　};  

　　由此我们可以有反转义的正则表达式：

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

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

JavaScript代码
  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代码
  1. $package("js.lang"); // 没有包管理时，也可简单写成 js = {lang:{}};  
  2.   
  3. js.lang.String = function(){    
  4.     this.REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;  
  5.     this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;  
  6.     this.REGX_TRIM = /(^\s*)|(\s*$)/g;  
  7.     this.HTML_DECODE = { 
  8.         "<" : "<",  
  9.         ">" : ">",  
  10.         "&" : "&",  
  11.         " ": " ",  
  12.         """: "\"",   
  13.         "©": ""  
  14.   
  15.         // Add more  
  16.     };  
  17.   
  18.     this.encodeHtml = function(s){  
  19.         s = (s != undefined) ? s : this.toString();  
  20.         return (typeof s != "string") ? s :  
  21.             s.replace(this.REGX_HTML_ENCODE,   
  22.                       function($0){  
  23.                           var c = $0.charCodeAt(0), r = ["&#"];  
  24.                           c = (c == 0x20) ? 0xA0 : c;  
  25.                           r.push(c); r.push(";");  
  26.                           return r.join("");  
  27.                       });  
  28.     };  
  29.   
  30.     this.decodeHtml = function(s){  
  31.         var HTML_DECODE = this.HTML_DECODE;  
  32.   
  33.         s = (s != undefined) ? s : this.toString();  
  34.         return (typeof s != "string") ? s :  
  35.             s.replace(this.REGX_HTML_DECODE,  
  36.                       function($0, $1){  
  37.                           var c = HTML_DECODE[$0];  
  38.                           if(c == undefined){  
  39.                               // Maybe is Entity Number  
  40.                               if(!isNaN($1)){  
  41.                                   c = String.fromCharCode(($1 == 160) ? 32:$1);  
  42.                               }else{  
  43.                                   c = $0;  
  44.                               }  
  45.                           }  
  46.                           return c;  
  47.                       });  
  48.     };  
  49.   
  50.     this.trim = function(s){  
  51.         s = (s != undefined) ? s : this.toString();  
  52.         return (typeof s != "string") ? s :  
  53.             s.replace(this.REGX_TRIM, "");  
  54.     };  
  55.   
  56.   
  57.     this.hashCode = function(){  
  58.         var hash = this.__hash__, _char;  
  59.         if(hash == undefined || hash == 0){  
  60.             hash = 0;  
  61.             for (var i = 0, len=this.length; i < len; i++) {  
  62.                 _char = this.charCodeAt(i);  
  63.                 hash = 31*hash + _char;  
  64.                 hash = hash & hash; // Convert to 32bit integer  
  65.             }  
  66.             hash = hash & 0x7fffffff;  
  67.         }  
  68.         this.__hash__ = hash;  
  69.   
  70.         return this.__hash__;   
  71.     };  
  72.   
  73. };  
  74.   
  75. js.lang.String.call(js.lang.String);  

　　在实际的使用中可以有两种方式：

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

　　2）还可以直接扩展String的prototype

JavaScript代码
  1. js.lang.String.call(String.prototype);    
  2.   // 那么    
  3.   var str = "<B>&'\"中国</B>abc def";    
  4.   var ec_str = str.encodeHtml();  
  5.     
  6.   document.write(ec_str);      
  7.   document.write("<bt><bt>");  
  8.   
  9.   var dc_str = ec_str.decodeHtml();    
  10.   document.write(dc_str);  
除非特别注明，鸡啄米文章均为原创
转载请标明本文地址：http://www.jizhuomi.com/software/389.html
2015年2月27日
作者:鸡啄米 分类:软件开发 浏览: 评论:1