javascript HTMLEncode HTMLDecode的完整實例(兼容ie和火狐)

2019-11-21 01:20:05

字體：大中小

來源：轉載

供稿：網友

方法一：
用的瀏覽器內部轉換器實現(xiàn)轉換，方法是動態(tài)創(chuàng)建一個容器標簽元素，如DIV，將要轉換的字符串設置為這個元素的innerText(ie支持)||textContent(火狐支持)，然后返回這個元素的innerHTML，即得到經過HTML編碼轉換的字符串,顯示的時候反過來就可以了（實際上顯示的時候不用通過轉換，直接賦值在div就可以正常顯示的）。

復制代碼代碼如下:

<script type="text/javascript"> 
function HTMLEncode(html) 
{ 
var temp = document.createElement ("div"); 
(temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html); 
var output = temp.innerHTML; 
temp = null; 
return output; 
} 
function HTMLDecode(text) 
{ 
var temp = document.createElement("div"); 
temp.innerHTML = text; 
var output = temp.innerText || temp.textContent; 
temp = null; 
return output; 
} 
var html = "<br>dffdf<p>qqqqq</p>"; 
var encodeHTML = HTMLEncode(html); 
alert("方式一：" + encodeHTML); 
var decodeHTML = HTMLDecode(encodeHTML); 
alert("方式一：" + decodeHTML); 
</script> 

方法二：
通過把正則表達式把<>和空格符轉換成html編碼,由于這種方式不是系統(tǒng)內置的所以很容易出現(xiàn)有些特殊標簽沒有替換的情況，而且效率低下

復制代碼代碼如下:

<script type="text/javascript"> 
function HTMLEncode2(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; 
} 
function HTMLDecode2(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; 
} 
var html = "<br>ccccc<p>aaaaa</p>"; 
var encodeHTML = HTMLEncode2(html); 
alert("方式二：" + encodeHTML); 
var decodeHTML = HTMLDecode2("方式二：" + encodeHTML); 
alert(decodeHTML); 
</script>