javascript另類方法高效實現htmlencode()與htmldecode()函數

最常見的做法是采用正則表達式替換的方法，將特殊字符如 < > & 等進行替換，htmlencode的時候這樣替換還比較容易，但發過來htmldecode的時候就不一定好用了，因為需要反轉的情況很多，出了常見的&lt;&gt;&amp;以外，還有&nbsp;&copy;&quot;&reg;等數十個字符實體，還有&#65;&#66;&#20013;&#25991;或者&#x4E2D;&#x6587;之類以字符的Unicode編碼的十進制或16進制表示的轉義，難以全部列舉，用逐個替換不僅代碼冗長而且低效，還容易漏掉某些字符。

代碼如下：

 

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

相當簡潔！

編碼原理就是創建TextNode節點，附加到容器中，再取容器的innerHTML.

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

 

測試一下：

 

//測試
document.onclick = function (){
    //<p> & </p>
    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對入參有要求，如果入參不是合法的encode后的結果，可能無法得到預期結果。

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