本文实例讲述了JS Html转义和反转义（html编码和解码）的实现与使用方法。分享给大家供大家参考，具体如下：1、JS实现html转义和反转义主要有两种方式：1）、利用用浏览器内部转换器实现html转义；2）、用正则表达式实现html转义；2、封装的JS工具类：
var HtmlUtil = {

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

htmlEncode:function (html){

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

var temp = document.createElement ("div");

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

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

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

var output = temp.innerHTML;

temp = null;

return output;

},

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

htmlDecode:function (text){

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

var temp = document.createElement("div");

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

temp.innerHTML = text;

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

var output = temp.innerText || temp.textContent;

temp = null;

return output;

},

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

htmlEncodeByRegExp:function (str){

var temp = "";

if(str.length == 0) return "";

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

temp = temp.replace(/
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];});

}

};


var HtmlUtil = {

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

htmlEncode:function (html){

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

var temp = document.createElement ("div");

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

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

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

var output = temp.innerHTML;

temp = null;

return output;

},

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

htmlDecode:function (text){

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

var temp = document.createElement("div");

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

temp.innerHTML = text;

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

var output = temp.innerText || temp.textContent;

temp = null;

return output;

},

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

htmlEncodeByRegExp:function (str){

var temp = "";

if(str.length == 0) return "";

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

temp = temp.replace(/
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];});

}

};

3、测试及效果：1）、html代码：





























2）、js测试代码：

var strHtml='