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 相关文章推荐
JS控制输入框内字符串长度
May 21 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
Nov 30 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
解决layui的form里的元素进行动态生成,验证失效的问题
Sep 14 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
Zend Framework动作助手(Zend_Controller_Action_Helper)用法详解
2016/03/05 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
jQuery之自动完成组件的深入解析
2013/06/19 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
2014/03/08 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
利用jquery如何从json中读取数据追加到html中
2017/12/01 jQuery
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
Next.js实现react服务器端渲染的方法示例
2019/01/06 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
2020/02/27 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
Python 递归函数详解及实例
2016/12/27 Python
浅谈django orm 优化
2018/08/18 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
python groupby 函数 as_index详解
2019/12/16 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
ORACLE十问
2015/04/20 面试题
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
高考自主招生自荐信
2013/10/20 职场文书
人事档案接收函
2014/01/12 职场文书
20岁生日感言
2014/01/13 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
总经理的岗位职责
2014/02/23 职场文书
卫生主题班会
2015/08/14 职场文书
Python实现GIF动图以及视频卡通化详解
2021/12/06 Python