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 中的 &amp;&amp; 和 || 使用小结
Apr 25 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
学习vue.js中class与style绑定
Dec 03 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
解决layui表格内文本超出隐藏的问题
Sep 12 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 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
用PHP和ACCESS写聊天室(九)
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php中的观察者模式
2010/03/24 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jquery ready(fn)事件使用介绍
2013/08/21 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
推荐VSCode 上特别好用的 Vue 插件之vetur
2017/09/14 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
实例讲解python中的协程
2018/10/08 Python
Python解决两个整数相除只得到整数部分的实例
2018/11/10 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
机电一体化毕业生求职信
2013/11/02 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
校园十大歌手策划书
2014/02/01 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
白酒代理协议书范本
2014/10/26 职场文书
给老师的感谢信
2015/01/20 职场文书
中标通知书格式
2015/04/17 职场文书
杨善洲电影观后感
2015/06/04 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL