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 中的事件教程
Apr 05 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
浅谈Webpack打包优化技巧
Jun 12 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
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边学边教》(04.编写简易的通讯录――视频教程1)
2006/12/13 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
php中的buffer缓冲区用法分析
2019/05/31 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
matplotlib实现区域颜色填充
2019/03/18 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
Django stark组件使用及原理详解
2019/08/22 Python
python两个list[]相加的实现方法
2020/09/23 Python
如何用Python徒手写线性回归
2021/01/25 Python
CSS3教程(9):设置RGB颜色
2009/04/02 HTML / CSS
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
数据库方面面试题
2012/04/22 面试题
销售自荐信
2013/10/22 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
重阳节简报
2015/07/20 职场文书
导游词之吉林花园山
2019/10/17 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
一文搞懂MySQL索引页结构
2022/02/28 MySQL
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL