javascript另類方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù)實(shí)例分析
本文實(shí)例講述了javascript另類方法實(shí)現(xiàn)htmlencode()與htmldecode()函數(shù)。分享給大家供大家參考，具體如下：
一般比較常用的函數(shù)代碼如下
function HTMLDeCode(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, "\"");
s = s.replace(/<br>/g, "\n");
return s;
}最常見的做法是采用正則表達(dá)式替換的方法，將特殊字符如 < > & 等進(jìn)行替換，htmlencode的時(shí)候這樣替換還比較容易，但發(fā)過來htmldecode的時(shí)候就不一定好用了，因?yàn)樾枰崔D(zhuǎn)的情況很多，出了常見的<>&以外，還有 ©"®等數(shù)十個(gè)字符實(shí)體，還有AB中文或者中文之類以字符的Unicode編碼的十進(jìn)制或16進(jìn)制表示的轉(zhuǎn)義，難以全部列舉，用逐個(gè)替換不僅代碼冗長(zhǎng)而且低效，還容易漏掉某些字符。
代碼如下：
function htmlencode(s){
var div = document.createElement('div');
div.appendChild(document.createTextNode(s));
return div.innerHTML;
}
function htmldecode(s){
var div = document.createElement('div');
div.innerHTML = s;
return div.innerText || div.textContent;
}
相當(dāng)簡(jiǎn)潔！
編碼原理就是創(chuàng)建TextNode節(jié)點(diǎn)，附加到容器中，再取容器的innerHTML.
解碼原理是將字符串賦給容器的innerHTML，再取innerText或textContent.
測(cè)試一下：
//測(cè)試
document.onclick = function (){
//<p> & </p>
alert(htmlencode('<p> & </p>'));
//<p> & ? ABC 中文 中文 </p>
alert(htmldecode('<p> & © ABC 中文 中文 </p>'));
}
效果不錯(cuò)。
htmldecode對(duì)入?yún)⒂幸?，如果入?yún)⒉皇呛戏ǖ膃ncode后的結(jié)果，可能無法得到預(yù)期結(jié)果。
我在google搜索，在cnblogs找到一篇和我一樣思路的，原來已經(jīng)有別人這樣想了=||=，不過他的htmldecode代碼有錯(cuò)誤。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript編碼操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
- javascript HTMLEncode HTMLDecode的完整實(shí)例(兼容ie和火狐)
- php中json_decode()和json_encode()的使用方法
- js中encode、decode的應(yīng)用說明
- 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)行編碼/解碼分析
相關(guān)文章
JS 驗(yàn)證碼功能的三種實(shí)現(xiàn)方式
這篇文章主要介紹了驗(yàn)證碼功能的三種實(shí)現(xiàn)方式,分為數(shù)字短信驗(yàn)證碼，圖形驗(yàn)證碼，滑動(dòng)驗(yàn)證碼，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁(yè)
表單通常用來收集網(wǎng)頁(yè)訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁(yè)應(yīng)用的注冊(cè)或者登陸界面等，通讀本篇對(duì)大家的學(xué)習(xí)或工作具有一定的價(jià)值，需要的朋友可以參考下2021-10-10
微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法示例
這篇文章主要介紹了微信js-sdk預(yù)覽圖片接口及從拍照或手機(jī)相冊(cè)中選圖接口用法,較為詳細(xì)的分析了預(yù)覽圖片接口及與拍照或手機(jī)相冊(cè)中選圖接口的功能、調(diào)用方法與相關(guān)使用技巧,需要的朋友可以參考下2016-10-10
詳解webpack 多頁(yè)面/入口支持&公共組件單獨(dú)打包
這篇文章主要介紹了詳解webpack 多頁(yè)面/入口支持&公共組件單獨(dú)打包,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義
這篇文章主要介紹了javascript對(duì)HTML字符轉(zhuǎn)義與反轉(zhuǎn)義，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了如何通過微信小程序開發(fā)一個(gè)簡(jiǎn)單的記賬本，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以和小編一起學(xué)習(xí)一下2023-01-01
ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡(jiǎn)單實(shí)例
這篇文章主要介紹了ListBox實(shí)現(xiàn)上移,下移,左移,右移的簡(jiǎn)單實(shí)例。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
微信小程序云開發(fā)如何實(shí)現(xiàn)數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)
這篇文章主要介紹了小程序云開發(fā) 數(shù)據(jù)庫(kù)自動(dòng)備份實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
超詳細(xì)JavaScript深淺拷貝的實(shí)現(xiàn)教程
淺拷貝是指，一個(gè)新的對(duì)象對(duì)原始對(duì)象的屬性值進(jìn)行精確地拷貝；深拷貝是指，對(duì)于簡(jiǎn)單數(shù)據(jù)類型直接拷貝他的值，對(duì)于引用數(shù)據(jù)類型，在堆內(nèi)存中開辟一塊內(nèi)存用于存放復(fù)制的對(duì)象，并把原有的對(duì)象類型數(shù)據(jù)拷貝過來。本文將實(shí)現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09
本文主要介紹了用原生js做單頁(yè)應(yīng)用的相關(guān)知識(shí)。具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01