用Javascript进展HTML转义
日期：2014-05-17 浏览次数：20721 次
用Javascript进行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)通常转义为“ ”也就是“ ”。
? 转义的代码非常简单：
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 = {
"<" : "<",
">" : ">",
"&" : "&",
" ": " ",
""": "\"",
"©": "?"
// Add more
};
?? 由此我们可以有反转义的正则表达式：
this.REGX_HTML_DECODE = /&\w+;|&#(\d+);/g;?
? 反转的代码也很简单，如下：
this.decodeHtml = function(s){
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_DECODE,
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、一个有意思的认识
? 其实在用正则表达式转义之前，我一直都是用遍历整
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
