javascript處理HTML的Encode碼)和Decode(解碼)總結

　HTML的Encode(轉碼)和解碼(Decode)在平時的開發中也是經常要處理的，在這裡總結了使用javascript處理HTML的Encode(轉碼)和解碼(Decode)的常用方式 一、用瀏覽器內部轉換器實現轉換 1.1.用瀏覽器內部轉換器實現html轉碼 　　首先動態建立一個容器標籤元素，如DIV，然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(Firefox，google支援)，最後返回這個元素的innerHTML，即得到經過HTML編碼轉換的字串了。 1.2.用瀏覽器內部轉換器實現html解碼 　　首先動態建立一個容器標籤元素，如DIV，然後將要轉換的字串設定為這個元素的innerHTML(ie，Firefox，google都支援)，最後返回這個元素的innerText(ie支援)或者textContent(Firefox，google支援)，即得到經過HTML解碼的字串了。 1.3.具體實現代碼 複製代碼 1 var HtmlUtil = { 2     /*1.用瀏覽器內部轉換器實現html轉碼*/ 3     htmlEncode:function (html){ 4         //1.首先動態建立一個容器標籤元素，如DIV 5         var temp = document.createElement ("div"); 6         //2.然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(Firefox，google支援) 7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html); 8         //3.最後返回這個元素的innerHTML，即得到經過HTML編碼轉換的字串了 9         var output = temp.innerHTML;10         temp = null;11         return output;12     },13     /*2.用瀏覽器內部轉換器實現html解碼*/14     htmlDecode:function (text){15         //1.首先動態建立一個容器標籤元素，如DIV16         var temp = document.createElement("div");17         //2.然後將要轉換的字串設定為這個元素的innerHTML(ie，Firefox，google都支援)18         temp.innerHTML = text;19         //3.最後返回這個元素的innerText(ie支援)或者textContent(Firefox，google支援)，即得到經過HTML解碼的字串了。20         var output = temp.innerText || temp.textContent;21         temp = null;22         return output;23     }24 };複製代碼測試： 1 var html = "<br>aaaaaa<p>bbbb</p>";2 var encodeHtml = HtmlUtil.htmlEncode(html);3 alert("encodeHtml：" + encodeHtml);4 var decodeHtml = HtmlUtil.htmlDecode(encodeHtml);5 alert("decodeHtml：" + decodeHtml);運行結果： 　　  二、用Regex進行轉換處理 　　使用Regex也是一種常用的處理方式，實現原理就是使用替換的方式來實現轉碼和解碼，轉碼時把<>，空格符，&，'，""替換成html編碼，解碼就把html編碼替換成對應的字元，實現代碼如下： 複製代碼 1 var HtmlUtil = { 2     /*1.用Regex實現html轉碼*/ 3     htmlEncodeByRegExp:function (str){   4          var s = ""; 5          if(str.length == 0) return ""; 6          s = str.replace(/&/g,"&amp;"); 7          s = s.replace(/</g,"&lt;"); 8          s = s.replace(/>/g,"&gt;"); 9          s = s.replace(/ /g,"&nbsp;");10          s = s.replace(/\'/g,"&#39;");11          s = s.replace(/\"/g,"&quot;");12          return s;  13    },14    /*2.用Regex實現html解碼*/15    htmlDecodeByRegExp:function (str){  16          var s = "";17          if(str.length == 0) return "";18          s = str.replace(/&amp;/g,"&");19          s = s.replace(/&lt;/g,"<");20          s = s.replace(/&gt;/g,">");21          s = s.replace(/&nbsp;/g," ");22          s = s.replace(/&#39;/g,"\'");23          s = s.replace(/&quot;/g,"\"");24          return s;  25    }26 };複製代碼測試代碼： 1 var html = "<br>ccccc<p>aaaaa</p>";2 var encodeHTML = HtmlUtil.htmlEncodeByRegExp(html);3 alert("用Regex進行html轉碼，encodeHTML：" + encodeHTML);4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("用Regex進行html解碼：" + encodeHTML);5 alert(decodeHTML);測試結果： 　　 三、封裝HtmlUtil工具類 　　將兩種方式封裝HtmlUtil工具類，方便在開發中使用，完整代碼如下： 複製代碼 1 var HtmlUtil = { 2     /*1.用瀏覽器內部轉換器實現html轉碼*/ 3     htmlEncode:function (html){ 4         //1.首先動態建立一個容器標籤元素，如DIV 5         var temp = document.createElement ("div"); 6         //2.然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(Firefox，google支援) 7         (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html); 8         //3.最後返回這個元素的innerHTML，即得到經過HTML編碼轉換的字串了 9         var output = temp.innerHTML;10         temp = null;11         return output;12     },13     /*2.用瀏覽器內部轉換器實現html解碼*/14     htmlDecode:function (text){15         //1.首先動態建立一個容器標籤元素，如DIV16         var temp = document.createElement("div");17         //2.然後將要轉換的字串設定為這個元素的innerHTML(ie，Firefox，google都支援)18         temp.innerHTML = text;19         //3.最後返回這個元素的innerText(ie支援)或者textContent(Firefox，google支援)，即得到經過HTML解碼的字串了。20         var output = temp.innerText || temp.textContent;21         temp = null;22         return output;23     },24     /*3.用Regex實現html轉碼*/25     htmlEncodeByRegExp:function (str){  26          var s = "";27          if(str.length == 0) return "";28          s = str.replace(/&/g,"&amp;");29          s = s.replace(/</g,"&lt;");30          s = s.replace(/>/g,"&gt;");31          s = s.replace(/ /g,"&nbsp;");32          s = s.replace(/\'/g,"&#39;");33          s = s.replace(/\"/g,"&quot;");34          return s;  35    },36    /*4.用Regex實現html解碼*/37    htmlDecodeByRegExp:function (str){  38          var s = "";39          if(str.length == 0) return "";40          s = str.replace(/&amp;/g,"&");41          s = s.replace(/&lt;/g,"<");42          s = s.replace(/&gt;/g,">");43          s = s.replace(/&nbsp;/g," ");44          s = s.replace(/&#39;/g,"\'");45          s = s.replace(/&quot;/g,"\"");46          return s;  47    }48 };