1. 程式人生 > >HTML的Encode(轉碼)和解碼(Decode)

HTML的Encode(轉碼)和解碼(Decode)

HTML的Encode(轉碼)和解碼(Decode)在平時的開發中也是經常要處理的,在這裡總結了使用javascript處理HTML的Encode(轉碼)和解碼(Decode)的常用方式

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

1.2.用瀏覽器內部轉換器實現html解碼
  首先動態建立一個容器標籤元素,如DIV,然後將要轉換的字串設定為這個元素的innerHTML(ie,火狐,google都支援),最後返回這個元素的innerText(ie支援)或者textContent(火狐,google支援),即得到經過HTML解碼的字串了。

1.3.具體實現程式碼

var HtmlUtil = {
/1.用瀏覽器內部轉換器實現html轉碼/
htmlEncode:function (html){
//1.首先動態建立一個容器標籤元素,如DIV
var temp = document.createElement (“div”);
//2.然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(火狐,google支援)
(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(ie支援)或者textContent(火狐,google支援),即得到經過HTML解碼的字串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
}
};
二、用正則表示式進行轉換處理
  使用正則表示式也是一種常用的處理方式,實現原理就是使用替換的方式來實現轉碼和解碼,轉碼時把<>,空格符,&,’,""替換成html編碼,解碼就把html編碼替換成對應的字元,實現程式碼如下:

var HtmlUtil = {
/1.用正則表示式實現html轉碼/
htmlEncodeByRegExp:function (str){
var s = “”;
if(str.length == 0) return “”;
s = str.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," “);
s = s.replace(/’/g,”’");
s = s.replace(/"/g,""");
return s;
},
/2.用正則表示式實現html解碼/
htmlDecodeByRegExp:function (str){
var s = “”;
if(str.length == 0) return “”;
s = str.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," “);
s = s.replace(/’/g,”’");
s = s.replace(/"/g,""");
return s;
}
};
三、封裝HtmlUtil工具類
  將兩種方式封裝HtmlUtil工具類,方便在開發中使用,完整程式碼如下:
  var HtmlUtil = {
/1.用瀏覽器內部轉換器實現html轉碼/
htmlEncode:function (html){
//1.首先動態建立一個容器標籤元素,如DIV
var temp = document.createElement (“div”);
//2.然後將要轉換的字串設定為這個元素的innerText(ie支援)或者textContent(火狐,google支援)
(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(ie支援)或者textContent(火狐,google支援),即得到經過HTML解碼的字串了。
var output = temp.innerText || temp.textContent;
temp = null;
return output;
},
/3.用正則表示式實現html轉碼/
htmlEncodeByRegExp:function (str){
var s = “”;
if(str.length == 0) return “”;
s = str.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," “);
s = s.replace(/’/g,”’");
s = s.replace(/"/g,""");
return s;
},
/4.用正則表示式實現html解碼/
htmlDecodeByRegExp:function (str){
var s = “”;
if(str.length == 0) return “”;
s = str.replace(/&/g,"&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," “);
s = s.replace(/’/g,”’");
s = s.replace(/"/g,""");
return s;
}
};