详谈js对url进行编码和解码(三种方式的区别)


Posted in Javascript onAugust 16, 2017

Javascript语言用于编码的函数,一共有三个,最古老的一个就是escape()。虽然这个函数现在已经不提倡使用了,但是由于历史原因,很多地方还在使用它,所以有必要先从它讲起。

escape 和 unescape

实际上,escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,也就是说在Unicode字符集中,"春"是第6625个(十六进制)字符,"节"是第8282个(十六进制)字符。

它的具体规则是,除了ASCII字母、数字、标点符号"@ * _ + - . /"以外,对其他所有字符进行编码。在u0000到u00ff之间的符号被转成%xx的形式,其余符号被转成%uxxxx的形式。对应的解码函数是unescape()。

还有两个地方需要注意。

首先,无论网页的原始编码是什么,一旦被Javascript编码,就都变为unicode字符。也就是说,Javascipt函数的输入和输出,默认都是Unicode字符。这一点对下面两个函数也适用。

其次,escape()不对"+"编码。但是我们知道,网页在提交表单的时候,如果有空格,则会被转化为+字符。服务器处理数据的时候,会把+号处理成空格。所以,使用的时候要小心。

例如:

编码:

escape('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:"http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1"

escape('张')
结果:"%u5F20"

解码:

unescape("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:"http://www.baidu.com?name=zhang@xiao@jie&order=1"

unescape("%u5F20")
结果:"张"

encodeURI 和 decodeURI

encodeURI()是Javascript中真正用来对URL编码的函数。

它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中有特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。编码后,它输出符号的utf-8形式,并且在每个字节前加上%。

它对应的解码函数是decodeURI()。

注:需要注意的是,它不对单引号'编码。

例如:

编码:

encodeURI('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:http://www.baidu.com?name=zhang@xiao@jie&order=1

解码:

decodeURI("http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1")
结果:http%3A//www.baidu.com%3Fname%3Dzhang@xiao@jie%26order%3D1

encodeURIComponent 和 decodeURIComponent

最后一个Javascript编码函数是encodeURIComponent()。与encodeURI()的区别是,它用于对URL的组成部分进行个别编码,而不用于对整个URL进行编码。

因此,"; / ? : @ & = + $ , #",这些在encodeURI()中不被编码的符号,在encodeURIComponent()中统统会被编码。至于具体的编码方法,两者是一样。

它对应的解码函数是decodeURIComponent()。

例如:

编码:

encodeURIComponent('http://www.baidu.com?name=zhang@xiao@jie&order=1')
结果:"http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1"

解码:

decodeURIComponent("http%3A%2F%2Fwww.baidu.com%3Fname%3Dzhang%40xiao%40jie%26order%3D1")
http://www.baidu.com?name=zhang@xiao@jie&order=1

以上这篇详谈js对url进行编码和解码(三种方式的区别)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中符号转意问题示例探讨
Aug 19 Javascript
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
Mar 22 Javascript
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
JavaScript中undefined和null的区别
May 03 Javascript
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
js实现旋转木马轮播图效果
Jan 10 Javascript
Vue实现简易计算器
Feb 25 Javascript
Node.js 的模块知识汇总
Aug 16 #Javascript
vue绑定设置属性的多种方式(5)
Aug 16 #Javascript
jQuery中each循环的跳出和结束实例
Aug 16 #jQuery
随机生成10个不重复的0-100的数字(实例讲解)
Aug 16 #Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 #Javascript
基于js 本地存储(详解)
Aug 16 #Javascript
基于Vue实例生命周期(全面解析)
Aug 16 #Javascript
You might like
php设计模式之单例模式使用示例
2014/01/20 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
许愿墙中用到的函数
2006/10/07 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
jquery中表单 多选框的一种巧妙写法
2015/09/06 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
JS数组去重的6种方法完整实例
2018/12/08 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
Python函数学习笔记
2008/10/07 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
python画出三角形外接圆和内切圆的方法
2018/01/25 Python
python游戏地图最短路径求解
2019/01/16 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
PyTorch中的C++扩展实现
2020/04/02 Python
django 外键创建注意事项说明
2020/05/20 Python
基于CSS3制作立体效果导航菜单
2016/01/12 HTML / CSS
考博自荐信
2013/10/25 职场文书
投标邀请书范文
2014/01/31 职场文书
美术指导助理求职信
2014/04/20 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
教师工作能力自我评价
2015/03/04 职场文书
失恋33天观后感
2015/06/11 职场文书
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
hive数据仓库新增字段方法
2022/06/25 数据库