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


Posted in Javascript onJune 02, 2009

方法一:
用的浏览器内部转换器实现转换,方法是动态创建一个容器标签元素,如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,"&"); 
s = s.replace(/</g,"<"); 
s = s.replace(/>/g,">"); 
s = s.replace(/ /g," "); 
s = s.replace(/\'/g,"'"); 
s = s.replace(/\"/g,"""); 
return s; 
} 
function HTMLDecode2(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,"\""); 
return s; 
} 
var html = "<br>ccccc<p>aaaaa</p>"; 
var encodeHTML = HTMLEncode2(html); 
alert("方式二:" + encodeHTML); 
var decodeHTML = HTMLDecode2("方式二:" + encodeHTML); 
alert(decodeHTML); 
</script>
Javascript 相关文章推荐
javascript Excel操作知识点
Apr 24 Javascript
javascript 写类方式之九
Jul 05 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
jQuery的context属性用法实例
Dec 27 Javascript
javascript中cookie对象用法实例分析
Jan 30 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
js微信分享实现代码
Oct 11 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
Angular服务Request异步请求的实例讲解
Aug 13 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序实现弹框效果
May 26 Javascript
Javascript String对象扩展HTML编码和解码的方法
Jun 02 #Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 #Javascript
慎用 somefunction.prototype 分析
Jun 02 #Javascript
网页和浏览器兼容性问题汇总(draft1)
Jun 01 #Javascript
javascript 图片上传预览-兼容标准
Jun 01 #Javascript
javascript 关闭IE6、IE7
Jun 01 #Javascript
帮助避免错误的Javascript陷阱清单
May 31 #Javascript
You might like
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
PHP正则表达式笔记与实例详解
2019/05/09 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
DOM 中的事件处理介绍
2012/01/18 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
Python时间模块datetime、time、calendar的使用方法
2016/01/13 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
对python 矩阵转置transpose的实例讲解
2018/04/17 Python
详解python3中的真值测试
2018/08/13 Python
Django实现跨域的2种方法
2019/07/31 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
机械工程系毕业生求职信
2013/09/27 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
2014年中秋寄语
2014/08/11 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
英语感谢信范文
2015/01/20 职场文书
国王的演讲观后感
2015/06/03 职场文书
家长意见书
2015/06/04 职场文书
新学期感想
2015/08/10 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
员工试用期工作总结
2019/06/20 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
Golang数据类型和相互转换
2022/04/12 Golang