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设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 Javascript
一篇超完整的Vue新手入门指导教程
Nov 18 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读写文件的方法(生成HTML)
2006/11/27 PHP
PHP5 的对象赋值机制介绍
2011/08/02 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
php实现36进制与10进制转换功能示例
2017/01/10 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
Node.js实现文件上传
2016/07/05 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
详解Howler.js Web音频播放终极解决方案
2020/08/23 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中os和shutil模块实用方法集锦
2014/05/13 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python中logging包的使用总结
2018/02/28 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python基于Tkinter模块实现的弹球小游戏
2018/12/27 Python
python实现狄克斯特拉算法
2019/01/17 Python
关于python多重赋值的小问题
2019/04/17 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
人力资源本科毕业生求职信
2014/06/04 职场文书
应届生自荐书
2014/06/23 职场文书