快捷導(dǎo)航

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

更新時(shí)間：2009年06月02日 17:45:50 作者：

用的瀏覽器內(nèi)部轉(zhuǎn)換器實(shí)現(xiàn)轉(zhuǎn)換，方法是動(dòng)態(tài)創(chuàng)建一個(gè)容器標(biāo)簽元素

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

復(fù)制代碼代碼如下:

<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> 

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

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
function HTMLEncode2(str) 
{ 
var s = ""; 
if(str.length == 0) return ""; 
s = str.replace(/&/g,"&amp;"); 
s = s.replace(/</g,"&lt;"); 
s = s.replace(/>/g,"&gt;"); 
s = s.replace(/ /g,"&nbsp;"); 
s = s.replace(/\'/g,"&#39;"); 
s = s.replace(/\"/g,"&quot;"); 
return s; 
} 
function HTMLDecode2(str) 
{ 
var s = ""; 
if(str.length == 0) return ""; 
s = str.replace(/&amp;/g,"&"); 
s = s.replace(/&lt;/g,"<"); 
s = s.replace(/&gt;/g,">"); 
s = s.replace(/&nbsp;/g," "); 
s = s.replace(/&#39;/g,"\'"); 
s = s.replace(/&quot;/g,"\""); 
return s; 
} 
var html = "<br>ccccc<p>aaaaa</p>"; 
var encodeHTML = HTMLEncode2(html); 
alert("方式二：" + encodeHTML); 
var decodeHTML = HTMLDecode2("方式二：" + encodeHTML); 
alert(decodeHTML); 
</script>

您可能感興趣的文章:

相關(guān)文章

微信小程序之GET請(qǐng)求的實(shí)例詳解
這篇文章主要介紹了微信小程序之GET請(qǐng)求的實(shí)例詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家理解掌握該如何使用get請(qǐng)求,需要的朋友可以參考下
2017-09-09
js中取得變量絕對(duì)值的方法
這篇文章主要介紹了js中取得變量絕對(duì)值的方法,較為詳細(xì)的分析了js中abs方法取絕對(duì)值的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01
Event altKey,ctrlKey,shiftKey屬性解析
本篇文章主要是對(duì)Event altKey,ctrlKey,shiftKey屬性解析了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
js獲取ip和地區(qū)
本文主要介紹了js獲取ip和地區(qū)的方法，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
2017-03-03
JS實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)好友列表中的好友頭像時(shí)顯示資料卡的效果
需求為當(dāng)用戶鼠標(biāo)經(jīng)過(guò)好友列表中好友頭像時(shí)，顯示該好友的基本資料，其實(shí)也就是類似QQ客戶端的那種功能，下面是具體的實(shí)現(xiàn)思路及過(guò)程
2014-07-07
echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖
近期在使用echart開(kāi)發(fā)過(guò)程中遇到一些問(wèn)題,需要開(kāi)發(fā)橫向柱狀圖,下面這篇文章主要給大家介紹了關(guān)于echarts如何實(shí)現(xiàn)帶百分比的橫向柱狀圖的相關(guān)資料,需要的朋友可以參考下
2021-12-12
js（jquery）實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)404頁(yè)面不存在效果
有時(shí)候我們希望臨時(shí)讓某個(gè)分類或者多個(gè)文章不能正常訪問(wèn)，手動(dòng)給html文件改名？或者改后臺(tái)改程序？太麻煩了。用本文的js代碼很容易實(shí)現(xiàn)，而且使用得當(dāng)很隱蔽。這篇文章主要介紹了js（jquery）實(shí)現(xiàn)無(wú)刷新跳轉(zhuǎn)404頁(yè)面不存在效果,需要的朋友可以參考下
2023-04-04
css transform 3D幻燈片特效實(shí)現(xiàn)步驟解讀
3D幻燈片特效想必大家以不在陌生至于表現(xiàn)形式一般都是拘泥于傳統(tǒng)接下來(lái)為大家介紹下使用css3 transform配合js以及html實(shí)現(xiàn)3D幻燈片特效
2013-03-03
JS字符串與二進(jìn)制的相互轉(zhuǎn)化實(shí)例代碼詳解
這篇文章主要介紹了JS字符串與二進(jìn)制的相互轉(zhuǎn)化 ,在文中給大家提到了Js之字符串和字節(jié)碼之間的相互轉(zhuǎn)換，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
JavaScript請(qǐng)求后臺(tái)數(shù)據(jù)的常用方法匯總
這篇文章主要介紹了JavaScript請(qǐng)求后臺(tái)數(shù)據(jù)的幾種常用方式,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06