详谈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 相关文章推荐
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
Jul 10 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
vue 实现动态路由的方法
Jul 06 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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获取apk包信息的方法
2014/08/15 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
2011/09/20 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
JavaScript记录光标在编辑器中位置的实现方法
2016/04/22 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
AngularJS基础 ng-mouseleave 指令详解
2016/08/02 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
jQuery实现简单飞机大战
2020/07/05 jQuery
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python fabric使用笔记
2015/05/09 Python
python3使用requests模块爬取页面内容的实战演练
2017/09/25 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
python多任务及返回值的处理方法
2019/01/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
英国拖鞋购买网站:Bedroom Athletics
2020/02/28 全球购物
局域网标准
2016/09/10 面试题
防暑降温通知书
2015/04/27 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS