谈谈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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jquery拖拽排序简单实现方法(效果增强版)
Feb 16 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
推荐文章系统(一)
2006/10/09 PHP
php字符串截取的简单方法
2013/07/04 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
Laravel 模型关联基础教程详解
2019/09/17 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
网页中的图片的处理方法与代码
2009/11/26 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
jQuery代码优化 选择符篇
2011/11/01 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
人生苦短我用python python如何快速入门?
2018/03/12 Python
python素数筛选法浅析
2018/03/19 Python
python 反向输出字符串的方法
2018/07/16 Python
树莓派+摄像头实现对移动物体的检测
2019/06/22 Python
Pytorch提取模型特征向量保存至csv的例子
2020/01/03 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
如何在django中运行scrapy框架
2020/04/22 Python
python学习笔记之多进程
2020/08/06 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
纯CSS3代码实现文字描边
2016/04/25 HTML / CSS
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
全球最大的跑步用品商店:Road Runner Sports
2016/09/11 全球购物
澳大利亚在线购买儿童玩具:Toy Universe
2017/12/28 全球购物
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
技校毕业生自荐书
2014/05/23 职场文书
开展读书活动总结
2014/06/30 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
向女朋友道歉的话
2015/01/20 职场文书
Apache POI的基本使用详解
2021/11/07 Servers