用瀏覽器內部轉換器實現轉換

1.1.用瀏覽器內部轉換器實現html轉碼

　　首先動態建立一個容器標籤元素，如DIV，然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(火狐，google支援)，最後返回這個元素的innerHTML，即得到經過HTML編碼轉換的字串了。

1.2.用瀏覽器內部轉換器實現html解碼

　　首先動態建立一個容器標籤元素，如DIV，然後將要轉換的字串設定為這個元素的innerHTML(ie，火狐，google都支援)，最後返回這個元素的innerText(ie支援)或者textContent(火狐，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(火狐，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.首先動態建立一個容器標籤元素，如DIV
16         var temp = document.createElement("div");
17         //2.然後將要轉換的字串設定為這個元素的innerHTML(ie，火狐，google都支援)
18         temp.innerHTML = text;
19         //3.最後返回這個元素的innerText(ie支援)或者textContent(火狐，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);

執行結果：

 二、用正則表示式進行轉換處理

　　使用正則表示式也是一種常用的處理方式，實現原理就是使用替換的方式來實現轉碼和解碼，轉碼時把<>，空格符，&，'，""

1 var HtmlUtil = {
 2     /*1.用正則表示式實現html轉碼*/
 3     htmlEncodeByRegExp:function (str){  
 4          var s = "";
 5          if(str.length == 0) return "";
 6          s = str.replace(/&/g,"&");
 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.用正則表示式實現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("用正則表示式進行html轉碼，encodeHTML：" + encodeHTML);
4 var decodeHTML = HtmlUtil.htmlDecodeByRegExp("用正則表示式進行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(火狐，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.首先動態建立一個容器標籤元素，如DIV
16         var temp = document.createElement("div");
17         //2.然後將要轉換的字串設定為這個元素的innerHTML(ie，火狐，google都支援)
18         temp.innerHTML = text;
19         //3.最後返回這個元素的innerText(ie支援)或者textContent(火狐，google支援)，即得到經過HTML解碼的字串了。
20         var output = temp.innerText || temp.textContent;
21         temp = null;
22         return output;
23     },
24     /*3.用正則表示式實現html轉碼*/
25     htmlEncodeByRegExp:function (str){  
26          var s = "";
27          if(str.length == 0) return "";
28          s = str.replace(/&/g,"&");
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.用正則表示式實現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 };

轉自：http://www.itdaan.com/blog/2014/05/12/ed4c526c9dd4400325aee775b0b32062.html