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 相关文章推荐
jQuery中创建实例与原型继承揭秘
Dec 21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
js模仿html5 placeholder适应于不支持的浏览器
Jan 13 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
Jan 16 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
js模糊查询实例分享
Dec 26 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
js实现二级联动简单实例
Jan 11 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 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
谈一谈收音机的高放电路
2021/03/02 无线电
实用函数3
2007/11/08 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
有道搜索和IP138的IP的API接口(PHP应用)
2012/11/29 PHP
php实现的日历程序
2015/06/18 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
准确获得页面、窗口高度及宽度的JS
2006/11/26 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
js采用map取到id集合组并且实现点击一行选中一行
2013/12/16 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
微信小程序性能优化之checkSession的使用
2019/03/06 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
Python continue继续循环用法总结
2018/06/10 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
大学自我评价
2014/02/12 职场文书
建筑节能汇报材料
2014/08/22 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
培训督导岗位职责
2015/04/10 职场文书
遗嘱格式范本
2015/08/07 职场文书
《狮子和鹿》教学反思
2016/02/16 职场文书
2019教师的学习计划
2019/06/25 职场文书