首页 > 代码库 > js转义和反转义html
js转义和反转义html
本文地址： http://www.cnblogs.com/daysme/p/7100553.html
下面的代码网上常用有，但不是想要的。
JS实现HTML标签转义及反转义
http://blog.csdn.net/wangyuheng77/article/details/50315051
简单说一下业务场景，前台用户通过input输入内容，在离开焦点时，将内容在div中显示。
这时遇到一个问题，如果用户输入了html标签，则在div显示中，标签被解析。
由于是纯前端操作，不涉及后端，因此需要通过js对输入内容进行转义。
这里提供一个非常简单有效的转义方案，利用了innerHTML和innerText
注：火狐不支持innerText，需要使用 textContent 属性，而IE早期版本不支持此属性，为了同时兼容IE及火狐，需要进行判断操作.
因为innerText（textContent）会获取纯文本内容，忽略html节点标签，而innerHTML会显示标签内容，
所以我们先将需转义的内容赋值给innerText（textContent），再获取它的innerHTML属性，这时获取到的就是转义后文本内容。
代码如下：
//HTML转义function HTMLEncode(html) {var temp = document.createElement("div");(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);var output = temp.innerHTML;temp = null;return output;}var tagText = "<p><b>123&456</b></p>";console.log(HTMLEncode(tagText));//<p><b>123&456</b></p>通过测试结果，可以看到html标签及&符都被转义后保存。
同理，反转义的方法为先将转义文本赋值给innerHTML，然后通过innerText（textContent）获取转义前的文本内容
//HTML反转义function HTMLDecode(text) { var temp = document.createElement("div"); temp.innerHTML = text; var output = temp.innerText || temp.textContent; temp = null; return output; } var tagText = "<p><b>123&456</b></p>";var encodeText = HTMLEncode(tagText);console.log(encodeText);//<p><b>123&456</b></p>console.log(HTMLDecode(encodeText)); //<p><b>123&456</b></p>当 HTMLDecode(‘1<’) 时返回了 1< ，而我希望希望 1< ，也就是只转义实体字符，而不是做解析。
下面是个人适合的转义：
用Javascript进行HTML转义
http://blog.chinaunix.net/uid-20511797-id-3118652.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、一个有意思的认识
其实在用正则表达式转义之前，我一直都是用遍历整个字符串，逐个比较字符的方式。直到有一天，看到一篇文章说，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("<bt><bt>"); // CU的博客在线编辑有bug, 放不上来！！！ var dc_str = ec_str.decodeHtml(); document.write(dc_str);其他
function html_encode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/\‘/g, "'"); s = s.replace(/\"/g, """); s = s.replace(/\n/g, "<br/>"); return s; } function html_decode(str) { var s = ""; if (str.length == 0) return ""; s = str.replace(/&/g, "&"); s = s.replace(/</g, "<"); s = s.replace(/>/g, ">"); s = s.replace(/ /g, " "); s = s.replace(/'/g, "\‘"); s = s.replace(/"/g, "\""); s = s.replace(/<br\/>/g, "\n"); return s; } console.log(html_decode(‘<div>123</div>‘)); console.log(html_encode(html_decode(‘<div>123</div>‘)));【转义字符】HTML 字符实体< >: &等
http://www.cnblogs.com/LiuLiangXuan/p/5212155.html
在开发中遇到javascript从后台获取的url 会被转义，如：http://localhost:8080/Home/Index?a=14&b=15&c=123，想把它转成http://localhost:8080/Home/Index?a=14&b=15&c=123
网上找了半天的解决方案：
转义分为escapeHTML和unescapeHTML，先看两个函数的实现。
js代码：
/** * @function escapeHTML 转义html脚本 < > & " ‘ * @param a - * 字符串 */ escapeHTML: function(a){ a = "" + a; return a.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/‘/g, "'");; }, /** * @function unescapeHTML 还原html脚本 < > & " ‘ * @param a - * 字符串 */ unescapeHTML: function(a){ a = "" + a; return a.replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, ‘"‘).replace(/'/g, "‘"); },1，escapeHTML将< > & “ ‘转成字符实体
使用场景：
（1）用户在页面中录入（比如输入框） ， js将该内容提交给后端保存
（2）显示时，后端将字符串返回前端；js接收到之后：
a, 使用escapeHTML，将字符串转为 <script>alert(2);</script>此时，浏览器将能正确解析，因为浏览器接收到实体字符后，转成对应的尖括号等。
b, 不使用escapeHTML，浏览器一看到<，便认为是html标签的开始，直接把刚才的字符串当脚本执行了，这就是xss漏洞。
2，unescapeHTML将字符实体转成< > & “ ‘
使用场景：
后端将已经转义后的内容显示到页面；比如<script>alert(2);</script>
js收到后：
a，前端进行unescapeHTML，则可以直接dom操作，将标签显示到页面。
b，前端没有unescapeHTML，则原样输出，但此时并没有执行。
转义字符：
提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。
js转义和反转义html