详谈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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
详解jenkins自动化部署vue
May 14 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
JavaScript oncopy事件用法实例解析
May 13 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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
一个程序下载的管理程序(三)
2006/10/09 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
完美的php分页类
2017/10/24 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
javascript 最常用的10个自定义函数[推荐]
2009/12/26 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
js this函数调用无需再次抓获id,name或标签名
2014/03/03 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
js改变Iframe中Src的方法
2015/05/05 Javascript
javascript作用域链(Scope Chain)用法实例解析
2015/11/30 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Vue插件之滑动验证码
2019/09/21 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
深入理解Python中装饰器的用法
2016/06/28 Python
简单实现python聊天程序
2018/04/01 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python找出因数与质因数的方法
2019/07/25 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
python实现三种随机请求头方式
2021/01/05 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
幼儿园毕业教师感言
2014/02/21 职场文书
酒店开业策划方案
2014/06/02 职场文书
小学生感恩父母演讲稿
2014/08/28 职场文书
专项资金申请报告
2015/05/15 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
MySQL学习之基础命令实操总结
2022/03/19 MySQL