javascript HTMLEncode HTMLDecode的完整实例(兼容ie和火狐)

 更新时间:2009年06月02日 17:45:50   作者:  
用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素
方法一:
用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如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>

相关文章

  • 微信小程序之GET请求的实例详解

    微信小程序之GET请求的实例详解

    这篇文章主要介绍了微信小程序之GET请求的实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握该如何使用get请求,需要的朋友可以参考下
    2017-09-09
  • js中取得变量绝对值的方法

    js中取得变量绝对值的方法

    这篇文章主要介绍了js中取得变量绝对值的方法,较为详细的分析了js中abs方法取绝对值的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-01-01
  • Event altKey,ctrlKey,shiftKey属性解析

    Event altKey,ctrlKey,shiftKey属性解析

    本篇文章主要是对Event altKey,ctrlKey,shiftKey属性解析了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • js获取ip和地区

    js获取ip和地区

    本文主要介绍了js获取ip和地区的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果

    JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果

    需求为当用户鼠标经过好友列表中好友头像时,显示该好友的基本资料,其实也就是类似QQ客户端的那种功能,下面是具体的实现思路及过程
    2014-07-07
  • echarts如何实现带百分比的横向柱状图

    echarts如何实现带百分比的横向柱状图

    近期在使用echart开发过程中遇到一些问题,需要开发横向柱状图,下面这篇文章主要给大家介绍了关于echarts如何实现带百分比的横向柱状图的相关资料,需要的朋友可以参考下
    2021-12-12
  • js(jquery)实现无刷新跳转404页面不存在效果

    js(jquery)实现无刷新跳转404页面不存在效果

    有时候我们希望临时让某个分类或者多个文章不能正常访问,手动给html文件改名?或者改后台改程序?太麻烦了。用本文的js代码很容易实现,而且使用得当很隐蔽。这篇文章主要介绍了js(jquery)实现无刷新跳转404页面不存在效果,需要的朋友可以参考下
    2023-04-04
  • css transform 3D幻灯片特效实现步骤解读

    css transform 3D幻灯片特效实现步骤解读

    3D幻灯片特效想必大家以不在陌生至于表现形式一般都是拘泥于传统接下来为大家介绍下使用css3 transform配合js以及html实现3D幻灯片特效
    2013-03-03
  • JS字符串与二进制的相互转化实例代码详解

    JS字符串与二进制的相互转化实例代码详解

    这篇文章主要介绍了JS字符串与二进制的相互转化 ,在文中给大家提到了Js之字符串和字节码之间的相互转换,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • JavaScript请求后台数据的常用方法汇总

    JavaScript请求后台数据的常用方法汇总

    这篇文章主要介绍了JavaScript请求后台数据的几种常用方式,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-06-06

最新评论