用Javascript进行HTML转义-CSDN博客

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

转义的代码非常简单：

  this.encodeHtml = function(s){
return (typeof s != "string") ? s :
          s.replace(this.REGX_HTML_ENCODE,
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
                        c = (c == 0x20) ? 0xA0 : c;
                        r.push(c); r.push(";");
return r.join("");
                    });
  };

** 2、反转义

既然有转义，自然需要反转义。

1）对“&#num;”实体编号的转义，直接提取编号然后fromCharCode就可以得到字符。

2）对于诸如“<”，需要建立一张如下的表来查询。

   this.HTML_DECODE = {
        "&lt;"  : "<", 
        "&gt;"  : ">", 
        "&amp;" : "&", 
        "&nbsp;": " ", 
        "&quot;": "\"", 
        "&copy;": "©"

// Add more
   };

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

  this.REGX_HTML_DECODE = /&\w{1,};|&#\d{1,};/g;

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

  this.decodeHtml = function(s){
return (typeof s != "string") ? s :
          s.replace(this.REGX_HTML_DECODE,
function($0){
var c = this.HTML_ENCODE[$0]; // 尝试查表
                        if(c === undefined){
// Maybe is Entity Number
                            var m = $0.match(/\d{1,}/);
if(m){
var cc = m[0];
                                cc = (cc === 0xA0) ? 0x20 : cc;
                                c = String.fromCharCode(cc);
                            }else{
// Not Entity Number
                                c = $0;
                            }
                        }
return c;
                    });
  };

** 3、一个有意思的发现

其实在用正则表达式转义之前，我一直都是用遍历整个字符串，逐个比较字符的方式。直到有一天，我看到一篇文章说，javascript正则表达式是C实现的，比自己用javascript遍历字符要快，于是我就试着改写成上面这种方式。虽然代码看起来的确显得神秘而又牛叉，但遗憾的是，在我的Chrome 11 (FreeBSD 64 9.0)上，遍历字符转义/反转的方式要比上面正则表达式的代码快2到3倍（字符串长度越长越明显）。

** 4、完整版本的代码

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

js.lang.String = function(){

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

this.REGX_HTML_DECODE = /&\w{1,};|&#\d{1,};/g;

this.REGX_ENTITY_NUM  = /\d{1,}/;

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

this.HTML_DECODE = {
        "&lt;"  : "<", 
        "&gt;"  : ">", 
        "&amp;" : "&", 
        "&nbsp;": " ", 
        "&quot;": "\"", 
        "&copy;": "©"

// Add more
    };

this.encodeHtml = function(s){
        s = (s != undefined) ? s : this;
return (typeof s != "string") ? s :
            s.replace(this.REGX_HTML_ENCODE, 
function($0){
var c = $0.charCodeAt(0), r = ["&#"];
                          c = (c == 0x20) ? 0xA0 : c;
                          r.push(c); r.push(";");
return r.join("");
                      });
    };

this.decodeHtml = function(s){
var HTML_DECODE = this.HTML_DECODE, 
        REGX_NUM = this.REGX_ENTITY_NUM;

        s = (s != undefined) ? s : this;
return (typeof s != "string") ? s :
            s.replace(this.REGX_HTML_DECODE,
function($0){
var c = HTML_DECODE[$0];
if(c == undefined){
// Maybe is Entity Number
                              var m = $0.match(REGX_NUM);
if(m){
var cc = m[0];
                                  cc = (cc == 160) ? 32: cc;
                                  c = String.fromCharCode(cc);
                              }else{
                                  c = $0;
                              }
                          }
return c;
                      });
    };

this.trim = function(s){
        s = (s != undefined) ? s : this;
return (typeof s != "string") ? s :
            s.replace(this.REGX_TRIM, "");
    };


this.hashCode = function(){
var hash = this.__hash__, _char;
if(hash == undefined || hash == 0){
            hash = 0;
for (var i = 0, len=this.length; i < len; i++) {
                _char = this.charCodeAt(i);
                hash = 31*hash + _char;
                hash = hash & hash; // Convert to 32bit integer
            }
            hash = hash & 0x7fffffff;
        }
this.__hash__ = hash;

return this.__hash__;  
    };

};

js.lang.String.call(js.lang.String);

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

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

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

  js.lang.String.call(String.prototype);

// 那么

var str = "<B>&'\"中国</B>abc   def";

var ec_str = str.encodeHtml();

  document.write(ec_str);

  document.write("<br><br>");

var dc_str = ec_str.decodeHtml();

  document.write(dc_str);