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 options属性集合操作代码
Dec 28 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
cookie的secure属性详解
Apr 08 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
Sep 26 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 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 socket方式提交的post详解
2008/07/19 PHP
深入php数据采集的详解
2013/06/02 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
Python异常模块traceback用法实例分析
2019/10/22 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Python 实现进度条的六种方式
2021/01/06 Python
python装饰器代码深入讲解
2021/03/01 Python
关于canvas.toDataURL 在iOS运行失败的问题解决
2020/09/16 HTML / CSS
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
ghd官网:英国ghd直发器品牌
2018/05/04 全球购物
学习十八大精神心得体会
2013/12/31 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
趣味运动会标语口号
2015/12/26 职场文书
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL