谈谈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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
Aug 30 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
Sep 14 Javascript
node中的密码安全(加密)
Sep 17 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
js实现图片无缝循环轮播
Oct 28 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
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
一段非常简单的js判断浏览器的内核
2014/08/17 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
详解Vuex中mapState的具体用法
2017/09/28 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
Python 功能和特点(新手必学)
2015/12/30 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
美国婚礼装饰和活动用品批发供应商:Event Decor Direct
2018/10/12 全球购物
美国温暖商店:The Warming Store
2018/12/15 全球购物
幼师求职自荐信范文
2014/01/26 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
SpringBoot生成License的实现示例
2021/06/16 Java/Android
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript