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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
一些实用的jQuery代码片段收集
Jul 12 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
webpack+vue.js快速入门教程
Oct 12 Javascript
Bootstrap CSS组件之导航条(navbar)
Dec 17 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
Jan 06 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
用javascript实现的激活输入框后隐藏初始内容
2007/06/29 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python实现随机选择元素功能
2017/09/14 Python
遗传算法python版
2018/03/19 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python多项式回归的实现方法
2019/03/11 Python
python实现数据分析与建模
2019/07/11 Python
python开发入门——set的使用
2020/09/03 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
医学院校毕业生自荐信范文
2014/01/01 职场文书
中学家长会邀请函
2014/02/03 职场文书
关于长城的导游词
2015/01/30 职场文书
小学语文国培研修日志
2015/11/13 职场文书
《月光曲》教学反思
2016/02/16 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
mysql 索引合并的使用
2021/08/30 MySQL
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL