谈谈encodeURI和encodeURIComponent以及escape的区别与应用


Posted in Javascript onNovember 24, 2015

首先,我们都知道这三个东西都是用来编码的先来说encodeURI()和encodeURIComponent(),这两个是在转换url时候用来编码解码用的。

有编码就会有解码,解码就是decodeURI()和decodeURIComponent(),他们的用法很简单,在参数中带入要转码的文字就可实现目的

如:

encodeURI("我是要编码的文字")

decodeURI("我是要解码的文字")

encodeURIComponent("我是要编码的文字")

decodeURIComponent("我是要解码的文字")

而encodeURI()和encodeURIComponent()的区别其实并不大

主要区别在于:

encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z

encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z

encodeURI主要用于直接赋值给地址栏时候:

location.href=encodeURI("http://www.cnblogs.com/Tezml/");

而encodeURIComponent主要用于url的query参数:

location.href="http://www.cnblogs.com/Tezml/test.php?a="+encodeURIComponent("我就是我"); 

而escape,相比于上面那两个,就有所不同了

escape()是编码,unescape()是解码

escape 方法

对 String 对象编码以便它们能在所有计算机上可读,

escape(charString)

必选项 charstring 参数是要编码的任意 String 对象或文字。

说明

escape 方法返回一个包含了 charstring 内容的字符串值( Unicode 格式)。所有空格、标点、重音符号以及其他非 ASCII 字符都用 %xx 编码代替,

其中 xx 等于表示该字符的十六进制数。例如,空格返回的是 "%20" 。

字符值大于 255 的以 %uxxxx 格式存储。

escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z

注意   escape 方法不能够用来对统一资源标示码 (URI) 进行编码。对其编码应使用 encodeURI 和encodeURIComponent 方法。

最后上一段关于编码解码的demo

<!DOCTYPE html>
<html>
 <head>
 <title>Tezml_编码解码测试</title>
 <meta charset="utf-8">
 <meta name="author" content="Tezml" />
 <meta name="copyright" content="Tezml" />
 <meta name="description" content="Tezml" />
 <script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<div id="wz1"></div>
<div id="wz2"></div>
<div id="wz3"></div>
<div id="wz4"></div>
<div id="wz5"></div>
<div id="wz6"></div>
<div id="wz7"></div>
<div id="wz8"></div>
<div id="wz9"></div>
<div id="wz10"></div>
<div id="wz11"></div>
<div id="wz12"></div>
</body>
<script type="text/javascript">
var chinese="请叫我中文"
var english="place tall me englash"
var Monster=":#&$/@"
$("#wz1").html(encodeURI(chinese))//编码 %E8%AF%B7%E5%8F%AB%E6%88%91%E4%B8%AD%E6%96%87
$("#wz2").html(decodeURI(chinese))//解码 请叫我中文
$("#wz3").html(encodeURI(english))//编码 place%20tall%20me%20englash
$("#wz4").html(decodeURI(english))//解码 place tall me englash
$("#wz5").html(encodeURIComponent(Monster))//编码 %3A%23%26%24%2F%40
$("#wz6").html(encodeURI(Monster))//编码 :#&$/@
$("#wz7").html(escape(chinese))//编码 %u8BF7%u53EB%u6211%u4E2D%u6587
$("#wz8").html(escape(english))//编码 place%20tall%20me%20englash
$("#wz9").html(escape(Monster))//编码 %3A%23%26%24/@
$("#wz10").html(unescape(chinese))//编码 请叫我中文
$("#wz11").html(unescape(english))//编码 place tall me englash
$("#wz12").html(unescape(Monster))//编码 :#&$/@
</script>
</html>

总结

escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,,escape()不对"+"编码 主要用于汉字编码,现在已经不提倡使用。

encodeURI()是Javascript中真正用来对URL编码的函数。 编码整个url地址,但对特殊含义的符号"; / ? : @ & = + $ , #",也不进行编码。对应的解码函数是:decodeURI()。

encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。

假如要传递带&符号的网址,所以用encodeURIComponent()

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
Jun 12 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
jquery衣服颜色选取插件效果代码分享
Aug 28 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
微信小程序实现上传图片功能
May 28 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
javascript实现加载xml文件的方法
Nov 24 #Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 #Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 #Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 #Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 #Javascript
JS获取数组最大值、最小值及长度的方法
Nov 24 #Javascript
基于jquery实现日历签到功能
Sep 11 #Javascript
You might like
PHP+DBM的同学录程序(2)
2006/10/09 PHP
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
Jquery网页内滑动缓冲导航的实现代码
2015/04/05 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
node内置调试方法总结
2018/02/22 Javascript
webpack的tree shaking的实现方法
2019/09/18 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Django集成百度富文本编辑器uEditor攻略
2014/07/04 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
matplotlib实现区域颜色填充
2019/03/18 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
pytorch 模型的train模式与eval模式实例
2020/02/20 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
钳工实习自我鉴定
2013/09/19 职场文书
《中华少年》教学反思
2014/02/15 职场文书
教师新年寄语
2014/04/03 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
预备党员介绍人意见
2015/06/01 职场文书
教育读书笔记
2015/07/02 职场文书
pyqt5打包成exe可执行文件的方法
2021/05/14 Python
MySQL 查询速度慢的原因
2021/05/25 MySQL
服务器间如何实现文件共享
2022/05/20 Servers
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL