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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
layui获取多选框中的值方法
Aug 15 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
vue 单页应用和多页应用的优劣
Oct 22 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实现今天是星期几的几种写法
2013/09/26 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
js中unicode转码方法详解
2015/10/09 Javascript
jQuery语法小结(超实用)
2015/12/31 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
Echart折线图手柄触发事件示例详解
2018/12/16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Python 数据结构之堆栈实例代码
2017/01/22 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python continue继续循环用法总结
2018/06/10 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
家长会演讲稿范文
2014/01/10 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
2015年教研员工作总结
2015/05/26 职场文书
党员转正党支部意见
2015/06/02 职场文书
2016年清明节网上祭英烈活动总结
2016/04/01 职场文书
Python 绘制多因子柱状图
2022/05/11 Python