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就可以正常顯示的)。
<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)有替換的情況,而且效率低下
<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>
用的瀏覽器內(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,"&");
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>
您可能感興趣的文章:
- php中json_decode()和json_encode()的使用方法
- js中encode、decode的應(yīng)用說(shuō)明
- javascript encodeURI和encodeURIComponent的比較
- 淺析php中json_encode()和json_decode()
- JS中encodeURIComponent函數(shù)用php解碼的代碼
- php數(shù)組轉(zhuǎn)換js數(shù)組操作及json_encode的用法詳解
- JS的encodeURI和java的URLDecoder.decode使用介紹
- php中json_encode UTF-8中文亂碼的更好解決方法
- JS對(duì)URL字符串進(jìn)行編碼/解碼分析
- javascript另類(lèi)方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù)實(shí)例分析
相關(guān)文章
純JavaScript 實(shí)現(xiàn)flappy bird小游戲?qū)嵗a
這篇文章主要介紹了純JavaScript 實(shí)現(xiàn)flappy bird小游戲?qū)嵗a,b本文分七大步驟給大家介紹,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09javascript實(shí)現(xiàn)時(shí)間日期的格式化的方法匯總
這篇文章主要介紹了javascript實(shí)現(xiàn)時(shí)間日期的格式化的方法匯總,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08localResizeIMG先壓縮后使用ajax無(wú)刷新上傳(移動(dòng)端)
隨著技術(shù)的發(fā)展,移動(dòng)設(shè)備像素越來(lái)越高,但是這么大的圖片怎么上傳呢?下面小編就給大家一起學(xué)習(xí)移動(dòng)端圖片上傳的方法之localResizeIMG先壓縮后使用ajax無(wú)刷新上傳,需要的朋友可以參考下2015-08-08微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序個(gè)人中心的列表控件實(shí)現(xiàn)代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04javascript加減乘除的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇javascript加減乘除的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)modal彈出框遮罩層組件(可帶文本框)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法
這篇文章主要介紹了js實(shí)現(xiàn)緩沖運(yùn)動(dòng)效果的方法,涉及javascript操作元素運(yùn)動(dòng)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04