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 相关文章推荐
json跟xml的对比分析
Jun 10 Javascript
javascript 基础篇2 数据类型,语句,函数
Mar 14 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 Javascript
详解JavaScript 的变量
Mar 08 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
JS实现基本的网页计算器功能示例
Jan 16 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
vue动态绑定style样式
Apr 20 Vue.js
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
php和javascript之间变量的传递实现代码
2012/12/19 PHP
拖动Html元素集合 Drag and Drop any item
2006/12/22 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
谈谈JavaScript数组常用方法总结
2017/01/24 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
利用Vue2.x开发实现JSON树的方法
2018/01/04 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python中的条件判断语句基础学习教程
2016/02/07 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python实现带百分比的进度条
2016/06/28 Python
Python实现的knn算法示例
2018/06/14 Python
Flask之flask-script模块使用
2018/07/26 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
对Python的交互模式和直接运行.py文件的区别详解
2019/06/29 Python
基于python的Paxos算法实现
2019/07/03 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Python之qq自动发消息的示例代码
2021/02/18 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
建筑工程管理专业自荐信范文
2013/12/28 职场文书
咖啡店自主创业商业计划书
2014/01/22 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
详解在OpenCV中如何使用图像像素
2022/03/03 Python