用Javascript實作HtmlEncode與HtmlDecode的另類方法

Html的Encode和Decode在伺服器端是很容易實作的，就拿ASP.net來說，調用現成的函數System.Web.HttpContext.Server.HtmlEncode或HtmlDecode就能簡單了事。     但随着Ajax的發展，人們越來越重視javascript或vbscript的程式設計，這就使得大家不得不用這些腳本語言解決一些曾經不長解決的問題，Html的Encode / Decode就是一個這樣的例子，javascript好像并沒有現成的函數，網上的相關代碼也很少，主要思想大都是用正規表達式來替換(replace)"<"、">"、"&"等符号，其實有一個很巧妙的辦法能解決這個問題，請看下面兩個函數

功能同函數名，htmlEncode是讓document.createTextNode把html代碼轉換成文本了，而htmlDecode是通過設定div的innerHTML使得浏覽器對文本(編碼後的html)做了代碼自動調整,還原成了html，進而實作了編碼/解碼功能。     這個方法在IE Firefox Opera上面均測試成功，别的浏覽器應該也不會有多大問題。

都沒有經過驗證

方法一：

用的浏覽器内部轉換器實作轉換，方法是動态建立一個容器标簽元素，如DIV，将要轉換的字元串設定為這個元素的innerText，然後傳回這個元素的innerHTML，即得到經過HTML編碼轉換的字元串。

function HTMLEncode ( input )

{

var converter = document.createElement("DIV");

converter.innerText = input;

var output = converter.innerHTML;

converter = null;

return output;

}

當然，還可以用相同的方法實作對字元串的HTMLDecode解碼，但有個問題就是緊跟在字元"<"後面的非空字元将連同字元"<"同時顯示不出來。當然，對字元串作相應處理是可以解決這個問題的，比如在字元"<"後面加個空格，解碼後再去掉就行，這是後話。畢竟，要使用HTMLDecode方法解碼，自然是字元串已經經過HTMLEncode方法編碼了，而經過HTMLEncode編碼後的字元串，是不可能有字元"<"存在的。

function HTMLDecode ( input )

converter.innerHTML = input;

var output = converter.innerText;

方法二：

<script    language=javascript>   

   function    HTMLEnCode(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(/\n/g,      "<br>");   

         return    s;   

   }   

   function    HTMLDeCode(str)   

         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");   

   </script>   

本文轉自高海東部落格園部落格，原文連結：http://www.cnblogs.com/ghd258/archive/2009/10/18/1274429.html，如需轉載請自行聯系原作者