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面向对象之二 命名空间
Feb 08 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
js+css3实现旋转效果
Jan 20 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
原生js+ajax分页组件
Jan 30 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中文件上传的一个问题
2010/09/04 PHP
php中一个完整表单处理实现代码
2011/11/10 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
详解php实现页面静态化原理
2017/06/21 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
Javascript调用C#代码
2011/01/17 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
js游戏人物上下左右跑步效果代码分享
2015/08/28 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
python的re模块应用实例
2014/09/26 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
python生成ppt的方法
2018/06/07 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
2015年幼儿园毕业感言
2014/02/12 职场文书
个人函授自我鉴定
2014/03/25 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
小学数学新课改心得体会
2016/01/22 职场文书
2019年最新借条范本!
2019/07/08 职场文书