众所周知页面上的字符内容通常都需要进行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、一个有意思的认识
其实在用正则表达式转义之前,我一直都是用遍历整个字符串,逐个比较字符的方式。直到有一天,看到一篇文章说,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
};
this.encodeHtml = function(s){
s = (s != undefined) ? s : this.toString();
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;
s = (s != undefined) ? s : this.toString();
return (typeof s != "string") ? s :
s.replace(this.REGX_HTML_DECODE,
function($0,$1){
var c = HTML_DECODE[$0];
if(c == undefined){
// Maybe is Entity Number
if(!isNaN($1)){
c = String.fromCharCode(($1==160)?32:$1);
}else{
c = $0;
}
}
return c;
});
};
this.trim = function(s){
s = (s != undefined) ? s : this.toString();
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);
分享到:
相关推荐
常用HTML转义字符,html转义符,JavaScript转义符,html转义字符表,HTML语言特殊字符对照表(ISO Latin-1字符集) - 来源:嘻嘻网 114_xixik_com_files
在JavaScript中对HTML进行反转义详解_.docx
在JavaScript中对字符串进行转义和反转义操作,常用的方法莫过于使用encodeURI (decodeURI)、encodeURIComponent (decodeURIComponent)这几个方法,具体使用方法和区别。 但是如何在JavaScript中对HTML进行反转义...
Spring MVC下彻底解决@ResponseBody转义html特殊字符问题,解决包括尖角号(),单引号('),双引号("),按位与(&),反斜杠(\)。
1.背景:在项目中,经常遇到一些字符需要进行转义后才能显示到界面上,如“&”,在界面中显示的是“&”,在html中书写“&”,显示在界面的中的依然是“&”。 这时候,就需要进行转义 2.解决方案 [removed] var ...
浅谈html转义及防止javascript注入攻击的方法.docx
本文给大家分享的是个人项目中的一个小需求,需要使用php转义输出HTML到JavaScript,就写了个function,推荐给大家,希望大家能够喜欢。
转义-html 在HTML中使用的转义字符串此模块导出单个函数escapeHtml ,该函数用于转义内容字符串,以便可以将其内插到HTML内容中。安装这是通过提供的模块。 使用完成 : $ npm install escape-htmlAPIescapeHtml...
Ansi到HTML 这最初是从到JavaScript的ansi到html转换器的端口。 从那以后,它进行了很多修改。 它有一些补充: 已对API进行了更改,以接受构造函数中的选项,并在toHtml()输入。 处理将前景色或背景色设置为默认值的...
通过html转义能解决这个问题。 一:什么是html转义? html转义是将特殊字符或html标签转换为与之对应的字符。如:< 会转义为 <> 或转义为 >像“[removed]alert(‘test’);[removed]”这段字符会转义为...
JavaScript基础语法07_连接符和转义字符 JavaScript基础语法08_算数运算符 JavaScript基础语法09_赋值运算符 JavaScript基础语法10_关系运算符 JavaScript基础语法11_条件运算符 JavaScript基础语法12_逻辑运算符 ...
84、原生JavaScript用正则表达式按字母排序,对每行进行数组排序 85、原生JavaScript字符串反序 86、原生JavaScript用正则表达式清除html代码中的脚本 87、原生JavaScript动态执行JavaScript脚本 88、原生JavaScript...
阻止任何可能攻击服务器的意图,或者防止插入一些不需要的MySql命令、HTML语句或者Javascript脚本。 插件的两个个方法接受一个字符串,对它进行"过滤"处理后,就可以用在自己的网站上或MySql数据库里。 ...
转义用于HTML或反安装的字符串$ npm install escape-goat用法const escapeGoat = require('escape-goat'); escapeGoat.escape(':unicorn:&:goat:'); // =>':unicorn:&amp; :goat:'转义用于HTML或反向安装的...
为什么不回学校再学习呢?请参阅W3学校:JavaScript字符串[^]
该软件包使用工具进行自动加载和依赖性管理。 从您的项目根文件夹中运行: composer require phower/escaper 用法 像往常一样简单地实例化您的对象: ``` php use Phower\Escaper; $escaper = new Escaper(); ``...
在数据提交到数据库之前的简单HTML字符转意,防止javascript恶意代码,因为项目中用到了输出为xml,所以在输出之前还要进行二次转意,把数据库中之前加入的 转义为正常。