详谈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 相关文章推荐
jQuery 研究心得 取得属性的值
Nov 30 Javascript
你必须知道的Javascript知识点之"单线程事件驱动"的使用
Apr 23 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Javascript中的几种继承方式对比分析
Mar 22 Javascript
轻松搞定js表单验证
Oct 13 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
jQuery Position方法使用和兼容性
Aug 23 jQuery
浅谈Vue.js组件(二)
Apr 09 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
Node.js API详解之 module模块用法实例分析
May 13 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
全国FM电台频率大全 - 14 江西省
2020/03/11 无线电
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php 引用(&)详解
2009/11/20 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
Yii框架form表单用法实例
2014/12/04 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Gambit vs CL BO3 第一场 2.13
2021/03/10 DOTA
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
JS数字抽奖游戏实现方法
2015/05/04 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
2015/08/24 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
Python获取Redis所有Key以及内容的方法
2019/02/19 Python
parser.add_argument中的action使用
2020/04/20 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
网络编辑岗位职责范本
2014/02/10 职场文书
超市中秋节活动方案
2014/02/12 职场文书
护林员个人总结
2015/03/04 职场文书
学雷锋广播稿大全
2015/08/19 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python