⽤Javascript（js）进⾏HTML转义⼯具（处理特殊字符显⽰）众所周知页⾯上的字符内容通常都需要进⾏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)通常转义为“ ”也就是“ ”。
转义的代码⾮常简单：
return (typeof s != "string") ? s :
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 = {
"<"  : "<",
">"  : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": "©"
/
/ Add more
};
由此我们可以有反转义的正则表达式：
this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;
反转的代码也很简单，如下：
this.decodeHtml = function(s){
return (typeof s != "string") ? s :
function($0,$1){
var c = this.HTML_ENCODE[$0]; // 尝试查表
if(c === undefined){
/
/ Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32 : $1);
}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+;|&#(\d+);/g;
this.REGX_TRIM = /(^\s*)|(\s*$)/g;
this.HTML_DECODE = {
"<" : "<",
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": ""
// Add more
};
s = (s != undefined) ? s : String();
return (typeof s != "string") ? s :
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;
s = (s != undefined) ? s : String();
return (typeof s != "string") ? s :
function($0, $1){
var c = HTML_DECODE[$0];
if(c == undefined){html代码转链接
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1 == 160) ? 32:$1);
}else{
c = $0;
}
}
return c;
});
};
s = (s != undefined) ? s : String();
return (typeof s != "string") ? s :
};
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.deHtml(s)和js.lang.String.decodeHtml(s)。  2）还可以直接扩展String的prototype
js.lang.String.call(String.prototype);
// 那么
var str = "&'\"中国abc def";
var ec_str = deHtml();
document.write(ec_str);
document.write(""); // CU的博客在线编辑有bug，放不上来
var dc_str = ec_str.decodeHtml();
document.write(dc_str);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。