首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

用JS兑现HtmlEncode与HtmlDecode方法

2012-10-29 
用JS实现HtmlEncode与HtmlDecode方法script typetext/javascriptfunction htmlEncode (str){var div

用JS实现HtmlEncode与HtmlDecode方法
<script type="text/javascript">function htmlEncode (str){var div = document.createElement("div");var text = document.createTextNode(str);div.appendChild(text);return div.innerHTML;}function htmlDecode (str){var div = document.createElement("div");div.innerHTML = str;return div.innerHTML;}</script>
功能同函数名,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 )
{
var converter = document.createElement("DIV");
converter.innerHTML = input;
var output = converter.innerText;
converter = null;
return output;
}


方法二:

<script    language=javascript>  
   function    HTMLEnCode(str)  
   {  
         var    s    =    "";  
         if    (str.length    ==    0)    return    "";  
         s    =    str.replace(/&/g,    "&gt;");  
         s    =    s.replace(/</g,        "&lt;");  
         s    =    s.replace(/>/g,        "&gt;");  
         s    =    s.replace(/    /g,        "&nbsp;");  
         s    =    s.replace(/\'/g,      "'");  
         s    =    s.replace(/"/g,      "&quot;");  
         s    =    s.replace(/\n/g,      "<br>");  
         return    s;  
   }  
   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");  
         s    =    s.replace(/&#39;/g,      "\'"); 
         return    s;  
   }  
   </script>  


热点排行