JS实现HTML标签转义及反转义

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现HTML标签转义及反转义相关的知识,希望对你有一定的参考价值。

参考技术A 简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。
这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。
由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。
这里提供一个非常简单有效的转义方案,利用了innerHTML和innerText
注:火狐不支持innerText,需要使用
textContent
属性,而IE早期版本不支持此属性,为了同时兼容IE及火狐,需要进行判断操作.
因为innerText(textContent)会获取纯文本内容,忽略html节点标签,而innerHTML会显示标签内容,
所以我们先将需转义的内容赋值给innerText(textContent),再获取它的innerHTML属性,这时获取到的就是转义后文本内容。
代码如下:
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)获取转义前的文本内容
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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

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));//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;

通过测试结果,可以看到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);//&lt;p&gt;&lt;b&gt;123&amp;456&lt;/b&gt;&lt;/p&gt;
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 = {
         "&lt;"  : "<", 
         "&gt;"  : ">", 
         "&amp;" : "&", 
         "&nbsp;": " ", 
         "&quot;": "\\"", 
         "&copy;": "©"

         // 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 = {
            "&lt;" : "<", 
            "&gt;" : ">", 
            "&amp;" : "&", 
            "&nbsp;": " ", 
            "&quot;": "\\"", 
            "&copy;": ""

            // 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, "&amp;"); 
        s = s.replace(/</g, "&lt;"); 
        s = s.replace(/>/g, "&gt;"); 
        s = s.replace(/ /g, "&nbsp;"); 
        s = s.replace(/\\\'/g, "&#39;"); 
        s = s.replace(/\\"/g, "&quot;"); 
            s = s.replace(/\\n/g, "<br/>"); 
        return s; 
    } 

    function html_decode(str) 
    { 
        var s = ""; 
        if (str.length == 0) return ""; 
        s = str.replace(/&amp;/g, "&"); 
        s = s.replace(/&lt;/g, "<"); 
        s = s.replace(/&gt;/g, ">"); 
        s = s.replace(/&nbsp;/g, " "); 
        s = s.replace(/&#39;/g, "\\\'"); 
        s = s.replace(/&quot;/g, "\\""); 
        s = s.replace(/<br\\/>/g, "\\n"); 
        return s; 
    } 



    console.log(html_decode(\'&lt;div&gt;123&lt;/div&gt;\')); 
    console.log(html_encode(html_decode(\'&lt;div&gt;123&lt;/div&gt;\')));

【转义字符】HTML 字符实体< &gt: &等

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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/\'/g, "&apos;");;
    },
    /**
     * @function unescapeHTML 还原html脚本 < > & " \'
     * @param a -
     *            字符串
     */
    unescapeHTML: function(a){
        a = "" + a;
        return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, \'"\').replace(/&apos;/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标签转义及反转义的主要内容,如果未能解决你的问题,请参考以下文章

JS实现HTML标签转义及反转义

JS实现HTML标签转义及反转义

js转义和反转义html

html转义/反转义

javascript对HTML的特殊字符的转义与反转义

Angular.js数据绑定时自动转义html标签及内容