快捷導(dǎo)航

javascript另類方法實現(xiàn)htmlencode()與htmldecode()函數(shù)實例分析

更新時間：2023年05月06日 11:15:55 作者：cuixiping

這篇文章主要介紹了javascript另類方法實現(xiàn)htmlencode()與htmldecode()函數(shù),結(jié)合實例形式分析了javascript字符編碼與解碼操作的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了javascript另類方法實現(xiàn)htmlencode()與htmldecode()函數(shù)。分享給大家供大家參考，具體如下：

一般比較常用的函數(shù)代碼如下

function HTMLDeCode(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(/'/g,  "\'");
	s    =    s.replace(/&quot;/g,  "\"");
	s    =    s.replace(/<br>/g,  "\n");
	return    s;
}

最常見的做法是采用正則表達(dá)式替換的方法，將特殊字符如 < > & 等進(jìn)行替換，htmlencode的時候這樣替換還比較容易，但發(fā)過來htmldecode的時候就不一定好用了，因為需要反轉(zhuǎn)的情況很多，出了常見的<>&以外，還有 ©"®等數(shù)十個字符實體，還有AB中文或者中文之類以字符的Unicode編碼的十進(jìn)制或16進(jìn)制表示的轉(zhuǎn)義，難以全部列舉，用逐個替換不僅代碼冗長而且低效，還容易漏掉某些字符。

代碼如下：

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)簡潔！

編碼原理就是創(chuàng)建TextNode節(jié)點，附加到容器中，再取容器的innerHTML.

解碼原理是將字符串賦給容器的innerHTML，再取innerText或textContent.

測試一下：

//測試
document.onclick = function (){
  //&lt;p&gt; &amp; &lt;/p&gt;
  alert(htmlencode('<p> & </p>'));
  //<p> & ? ABC 中文 中文 </p>
  alert(htmldecode('&lt;p&gt; &amp; &copy; &#65;&#66;&#67; &#20013;&#25991; &#x4E2D;&#x6587; &lt;/p&gt;'));
}

效果不錯。

htmldecode對入?yún)⒂幸?，如果入?yún)⒉皇呛戏ǖ膃ncode后的結(jié)果，可能無法得到預(yù)期結(jié)果。

我在google搜索，在cnblogs找到一篇和我一樣思路的，原來已經(jīng)有別人這樣想了=||=，不過他的htmldecode代碼有錯誤。

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript編碼操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: