javascript另类方法实现htmlencode()与htmldecode()函数实例分析


Posted in Javascript onNovember 17, 2016

本文实例讲述了javascript另类方法实现htmlencode()与htmldecode()函数。分享给大家供大家参考,具体如下:

最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需要反转的情况很多,出了常见的<>&以外,还有 ©"®等数十个字符实体,还有AB中文或者中文之类以字符的Unicode编码的十进制或16进制表示的转义,难以全部列举,用逐个替换不仅代码冗长而且低效,还容易漏掉某些字符。

代码如下:

function htmlencode(s){
  var div = document.createElement('div');
  div.appendChild(document.createTextNode(s));
  return div.innerHTML;
}
function htmldecode(s){
  var div = document.createElement('div');
  div.innerHTML = s;
  return div.innerText || div.textContent;
}

相当简洁!

编码原理就是创建TextNode节点,附加到容器中,再取容器的innerHTML.

解码原理是将字符串赋?容器的innerHTML,再取innerText或textContent.

测试一下:

//测试
document.onclick = function (){
  //<p> & </p>
  alert(htmlencode('<p> & </p>'));
  //<p> & © ABC 中文 中文 </p>
  alert(htmldecode('<p> & © ABC 中文 中文 </p>'));
}

效果不错。

htmldecode对入参有要求,如果入参不是合法的encode后的结果,可能无法得到预期结果。

我在google搜索,在cnblogs找到一篇和我一样思路的,原来已经有别人这样想了=||=,不过他的htmldecode代码有错误。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 高效运行代码分析
Mar 18 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
js遮罩效果制作弹出注册界面效果
Jan 25 Javascript
js实现一键复制功能
Mar 16 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 #Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 #Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 #Javascript
用Vue.js实现监听属性的变化
Nov 17 #Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 #Javascript
JS实现的适合做faq或menu滑动效果示例
Nov 17 #Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 #Javascript
You might like
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
checkbox 复选框不能为空
2009/07/11 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
原生js实现打字动画游戏
2017/02/04 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
Vue分页效果与购物车功能
2019/12/13 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python 字典dict使用介绍
2014/11/30 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python实现根据文件格式分类
2019/10/31 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
Python提取视频中图片的示例(按帧、按秒)
2020/10/22 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
评析教师个人的自我评价
2014/02/19 职场文书
人力资源管理系自荐信
2014/05/31 职场文书
个人批评与自我批评总结
2014/10/17 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL