小編給大家分享一下JS實(shí)現(xiàn)html轉(zhuǎn)義和反轉(zhuǎn)義的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)是一群有想法、有熱情，對(duì)互聯(lián)網(wǎng)抱有執(zhí)著信念的年輕人，愿用自己的智慧和熱情，幫助您使用好互聯(lián)網(wǎng)工具，成為您的建站英雄，成為您網(wǎng)站制作和網(wǎng)絡(luò)營(yíng)銷的“秘密武器”，專注于網(wǎng)站策劃、備案、空間域名、設(shè)計(jì)、后臺(tái)開發(fā)、關(guān)鍵詞優(yōu)化排名、運(yùn)營(yíng)管理、維護(hù)服務(wù)、微信網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)，網(wǎng)站上線不是大家合作的終結(jié)，相反，網(wǎng)站維護(hù)才剛剛開始，我們期待常年累月的網(wǎng)站運(yùn)行過程總著為您提供更多的支持。我們致力于解決問題，創(chuàng)造價(jià)值，不推諉，主動(dòng)承擔(dān)。

1、JS實(shí)現(xiàn)html轉(zhuǎn)義和反轉(zhuǎn)義主要有兩種方式：

1）、利用用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html轉(zhuǎn)義；

2）、用正則表達(dá)式實(shí)現(xiàn)html轉(zhuǎn)義；

2、封裝的JS工具類：

var HtmlUtil = {
    /*1.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html編碼（轉(zhuǎn)義）*/
    htmlEncode:function (html){
      //1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV
      var temp = document.createElement ("div");
      //2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerText或者textContent
      (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
      //3.最后返回這個(gè)元素的innerHTML，即得到經(jīng)過HTML編碼轉(zhuǎn)換的字符串了
      var output = temp.innerHTML;
      temp = null;
      return output;
    },
    /*2.用瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)html解碼（反轉(zhuǎn)義）*/
    htmlDecode:function (text){
      //1.首先動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素，如DIV
      var temp = document.createElement("div");
      //2.然后將要轉(zhuǎn)換的字符串設(shè)置為這個(gè)元素的innerHTML(ie，火狐，google都支持)
      temp.innerHTML = text;
      //3.最后返回這個(gè)元素的innerText或者textContent，即得到經(jīng)過HTML解碼的字符串了。
      var output = temp.innerText || temp.textContent;
      temp = null;
      return output;
    },
    /*3.用正則表達(dá)式實(shí)現(xiàn)html編碼（轉(zhuǎn)義）*/
    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.用正則表達(dá)式實(shí)現(xiàn)html解碼（反轉(zhuǎn)義）*/
    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.用正則表達(dá)式實(shí)現(xiàn)html編碼（轉(zhuǎn)義）（另一種寫法）*/
    html2Escape:function(sHtml) {
       return sHtml.replace(/[<>&"]/g,function(c){return {'<':'<','>':'>','&':'&','"':'"'}[c];});
    },
    /*6.用正則表達(dá)式實(shí)現(xiàn)html解碼（反轉(zhuǎn)義）（另一種寫法）*/
    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、測(cè)試及效果：

1）、html代碼：

&
&