DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript另類方法實現htmlencode()與htmldecode()函數實例分析
javascript另類方法實現htmlencode()與htmldecode()函數實例分析
編輯:關於JavaScript     

本文實例講述了javascript另類方法實現htmlencode()與htmldecode()函數。分享給大家供大家參考,具體如下:

最常見的做法是采用正則表達式替換的方法,將特殊字符如 < > & 等進行替換,htmlencode的時候這樣替換還比較容易,但發過來htmldecode的時候就不一定好用了,因為需要反轉的情況很多,出了常見的<>&以外,還有 ©"®等數十個字符實體,還有AB中文或者中文之類以字符的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('<p> & © ABC 中文 中文 </p>'));
}

效果不錯。

htmldecode對入參有要求,如果入參不是合法的encode後的結果,可能無法得到預期結果。

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

更多關於JavaScript相關內容感興趣的讀者可查看本站專題:《javascript編碼操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved