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

简单说一下业务场景，前台用户通过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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

/*1.用浏览器内部转换器实现html编码（转义）*/

    htmlEncode : function (html){ 

            //.首先动态创建一个容器标签元素，如DIV 

            var  temp = document.createElement ("div")

            //然后将要转换的字符串设置为这个元素的innerText或者textContent 

            (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html) 

            //最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了 

            var   output = temp.innerHTML

            temp = null    

            return  output

     },

/*2.用浏览器内部转换器实现html解码（反转义）*/

     htmlDecode : function (text){

            //首先动态创建一个容器标签元素，如DIV

            var  temp =  document.createElement("div")

            //.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)

            temp.innerHTML = text

            //最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。                    var  output = temp.innerText  ||  temp.textContent

            temp =null

            return  output

     },

注：这两种方法都是利用innerHTML会编译字符串来实现转义和反转义

/*3.用正则表达式实现html编码（转义）*/

     htmlEncodeByRegExp : function (str){ 

            var  temp = " "

            if(str.length == 0)

                return " "

            temp = str.replace(/&/g,"&")

            temp = temp.replace(//g,">")

            temp = temp.replace(/\s/g," ")

            temp = temp.replace(/\'/g,"'")

            temp = temp.replace(/\"/g,""")

            return  temp

     },

/*4.用正则表达式实现html解码（反转义）*/

    htmlDecodeByRegExp:function (str){ 

            var  temp = ""

            if (str.length == 0)

               return  " "

            temp = str.replace(/&/g,"&")

            temp = temp.replace(/</g,"<")

            temp = temp.replace(/>/g,">")

            temp = temp.replace(/ /g," ")

            temp = temp.replace(/'/g,"\'")

            temp = temp.replace(/"/g,"\"")

            return temp 

    },

/*5.用正则表达式实现html编码（转义）（另一种写法）*/

        html2Escape : function(sHtml) {

                return   sHtml.replace (/[<>&"]/g,function(c){return{'<':'<','>':'>','&':'&','"':'"'}[c]})

         },

/*6.用正则表达式实现html解码（反转义）（另一种写法）*/

        escape2Html : function (str) {

                var  arrEntities = {'lt':'<','gt':'>','nbsp':' ','amp':'&','quot':'"'}

                return   str.replace(/&(lt|gt|nbsp|amp|quot)/ig,function(all,t){return arrEntities[t]})

        }

原文地址： https://www.cnblogs.com/willingtolove/p/11059325.html

---