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 02 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
js实现复制粘贴的两种方法
Dec 04 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
2006/12/14 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP 微信支付类 demo
2015/11/30 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
JavaScript登录验证基础教程
2017/11/01 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
VeeValidate 的使用场景以及配置详解
2019/01/11 Javascript
javascript自定义日期比较函数用法示例
2019/07/22 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
python动态加载变量示例分享
2014/02/17 Python
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python dataframe NaN处理方式
2019/12/26 Python
Pandas的Apply函数具体使用
2020/07/21 Python
python 实现表情识别
2020/11/21 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
综合管理员岗位职责
2015/02/11 职场文书
保送生自荐信范文
2015/03/26 职场文书
停电调休通知
2015/04/16 职场文书