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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
JavaScript限定图片显示大小的方法
Mar 11 Javascript
Bootstrap精简教程
Nov 27 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
Jul 25 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
node.js实现复制文本到剪切板的功能
Jan 23 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
详解js加减乘除精确计算
Mar 19 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
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
php的扩展写法总结
2019/05/14 PHP
(function($){...})(jQuery)的意思
2010/07/22 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
2014年50个程序员最适用的免费JQuery插件
2014/12/15 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
Vue.use源码学习小结
2018/06/20 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
详解微信UnionID作用
2019/05/15 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python threading多线程编程实例
2014/09/18 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python3 判断列表是一个空列表的方法
2018/05/04 Python
django 模型中的计算字段实例
2020/05/19 Python
Keras实现支持masking的Flatten层代码
2020/06/16 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
人事专员岗位职责
2013/11/20 职场文书
银行柜员应聘推荐信范文
2013/11/24 职场文书
化工工艺设计求职信
2014/06/25 职场文书
人代会标语
2014/06/30 职场文书
收款委托书
2014/10/14 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js