用Javascript（js）進行HTML轉義工具（處理特殊字符顯示）

轉自：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

 

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

 

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

 

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

 

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);  
17.