详谈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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
编写高性能的JavaScript 脚本的加载与执行
Apr 19 Javascript
关于COOKIE个数与大小的问题
Jan 17 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
没有document.getElementByName方法
Aug 19 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
Vue+Webpack完美整合富文本编辑器TinyMce的方法
Nov 30 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
基于layui的下拉列表的数据回显方法
Sep 24 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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后退一页表单内容保存实现方法
2012/06/17 PHP
深入解析phpCB批量转换的代码示例
2013/06/27 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
Laravel登录失败次数限制的实现方法
2020/08/26 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JavaScript Window浏览器对象模型原理解析
2020/05/30 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
判断网页编码的方法python版
2016/08/12 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
通过实例了解python property属性
2019/11/01 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
20行Python代码实现视频字符化功能
2020/04/13 Python
python 常用日期处理-- datetime 模块的使用
2020/09/02 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
材料化学应届生求职信
2013/10/09 职场文书
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
运动会广播稿30字
2014/01/21 职场文书
软件项目实施计划书
2014/05/02 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
学校消防安全责任书
2014/07/23 职场文书
感恩节寄语2015
2015/03/24 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
php双向队列实例讲解
2021/11/17 PHP