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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
bootstrap table实例详解
Jan 06 Javascript
以BootStrap Tab为例写一个前端组件
Jul 25 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 29 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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php删除数组元素示例分享
2014/02/17 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
python ansible服务及剧本编写
2017/12/29 Python
python微信公众号之关键词自动回复
2018/06/15 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
如何写一份好的英文求职信
2014/03/19 职场文书
父母对孩子的寄语
2014/04/09 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
写得不错的求职信范文
2014/07/11 职场文书
体育专业求职信
2014/07/16 职场文书
药房管理制度范本
2015/08/06 职场文书
公司与个人合作协议书
2016/03/19 职场文书
六年级作文之预言作文
2019/10/25 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
利用python进行数据加载
2021/06/20 Python