详谈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 读后台cookie代码
Sep 15 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
JS中Location使用详解
May 12 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
Vue.js每天必学之方法与事件处理器
Sep 06 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
微信小程序之网络请求简单封装实例详解
Jun 28 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
详解用JS添加和删除class类名
Mar 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获取远程图片并把它保存到本地的代码
2008/04/07 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
thinkphp框架实现删除和批量删除
2016/06/29 PHP
Yii 2.0自带的验证码使用经验分享
2017/06/19 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
js里怎么取select标签里的值并修改
2012/12/10 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
基于Bootstrap重置输入框内容按钮插件
2016/05/12 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
Vue filter 过滤器、以及在table中的使用介绍
2020/09/07 Javascript
[48:53]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第一场
2014/05/26 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Python filter()及reduce()函数使用方法解析
2020/09/05 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
英语文学专业学生的自我评价
2013/10/31 职场文书
汽车销售顾问求职自荐信
2014/01/01 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
项目合作意向书
2015/05/08 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
浅谈python中的多态
2021/06/15 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android