代码改变世界

兼容IE和FF的JS HTMLEncode和HTMLDecode的完整实例[转]

2012-03-14 16:37  @影子@  阅读(326)  评论(0编辑  收藏  举报

兼容IE和FF的JS HTMLEncode和HTMLDecode的完整实例,因为这个在在线编辑器和Ajax中经常用到,所以封装成函数可以直接调用,希望对大家有帮助。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>HTMLEcode</title>
</head>
<body>

方法一:

用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如DIV,将 要转换的字符串设置为这个元素的innerText(ie支持) ||textContent(火狐支持),然后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串,显示的时候反过来就可以了(实际 上显示的时候不用通过转换,直接赋值在div就可以正常显示的)。

<script type="text/javascript">
function HTMLEncode(html)
{
var temp = document.createElement ("div");
(temp.textContent
!= null) ? (temp.textContent = html) : (temp.innerText = html);
var output = temp.innerHTML;
temp
= null;
return output;
}

function HTMLDecode(text)
{
var temp = document.createElement("div");
temp.innerHTML
= text;
var output = temp.innerText || temp.textContent;
temp
= null;
return output;
}

var html = "<br>dffdf<p>qqqqq</p>";
var encodeHTML = HTMLEncode(html);
alert(
"方式一:" + encodeHTML);
var decodeHTML = HTMLDecode(encodeHTML);
alert(
"方式一:" + decodeHTML);

</script>

 

方 法二:

通过把正则表达式把<>和空格符转换成html编码,由于这种方式不是系统 内置的所以很容易出现有些特殊标签没有替换的情况,而且效率低下

<script type="text/javascript">  

function HTMLEncode2(str)
{
var s = "";
if(str.length == 0) return "";
s
= str.replace(/&/g,"&amp;");
s
= s.replace(/</g,"&lt;");
s
= s.replace(/>/g,"&gt;");
s
= s.replace(/ /g,"&nbsp;");
s = s.replace(/\'/g,"&#39;");
s
= s.replace(/\"/g,"&quot;");
return s;
}
function HTMLDecode2(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(/&#39;/g,"\'");
s
= s.replace(/&quot;/g,"\"");
return s;
}
var html = "<br>ccccc<p>aaaaa</p>";
var encodeHTML = HTMLEncode2(html);
alert(
"方式二:" + encodeHTML);
var decodeHTML = HTMLDecode2("方式二:" + encodeHTML);
alert(decodeHTML);
</script>
</body>
</html>