详谈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 相关文章推荐
json的前台操作和后台操作实现代码
Jan 20 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
取得元素的左和上偏移量的方法
Sep 17 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JS的时间格式化和时间戳转换函数示例详解
Jul 27 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
详解TypeScript的基础类型
Feb 18 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程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php fsockopen中多线程问题的解决办法[翻译]
2011/11/09 PHP
教你如何使用php session
2013/10/28 PHP
ThinkPHP模板中数组循环实例
2014/10/30 PHP
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
2015/08/18 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue如何使用混合Mixins和插件开发详解
2020/02/05 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
详解Django框架中的视图级缓存
2015/07/23 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
详解【python】str与json类型转换
2019/04/29 Python
Django框架封装外部函数示例
2019/05/28 Python
Django websocket原理及功能实现代码
2020/11/14 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
将HTML5 Canvas的内容保存为图片借助toDataURL实现
2013/05/20 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
致百米运动员广播稿5篇
2014/10/13 职场文书
2015年保育员个人工作总结
2015/05/13 职场文书
投资申请报告
2015/05/19 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript