详谈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 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
一段利用WSH修改和查看IP配置的代码
May 11 Javascript
js控制框架刷新
Aug 01 Javascript
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
Feb 26 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
JavaScript回调函数callback用法解析
Jan 14 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
dedecms模板标签代码官方参考
2007/03/17 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
php实现微信支付之企业付款
2018/05/30 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
为输入框加入数字js校验代码分享
2017/11/02 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
sublime text 3配置使用python操作方法
2017/06/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
Python requests库用法实例详解
2018/08/14 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python加速程序运行的方法
2020/07/29 Python
Python request post上传文件常见要点
2020/11/20 Python
python接口自动化框架实战
2020/12/23 Python
纯CSS3大转盘抽奖示例代码(响应式、可配置)
2017/01/13 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
优秀班集体先进事迹材料
2014/05/28 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
房屋租赁意向书范本
2015/05/09 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书