谈谈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 相关文章推荐
javascript从image转换为base64位编码的String
Jul 29 Javascript
js实现文本框输入文字个数限制代码
Dec 25 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
好好了解一下Cookie(强烈推荐)
Jun 14 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 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&amp;mysql(六)
2006/10/09 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
PHP命名空间定义与用法实例分析
2019/08/14 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
一个php+js实时显示时间问题
2015/10/12 Javascript
javascript手风琴下拉菜单实现代码
2015/11/12 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
Python实现批量下载图片的方法
2015/07/08 Python
Python打印输出数组中全部元素
2018/03/13 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
员工拾金不昧表扬信
2014/01/09 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
什么样的创业计划书可行性高?
2014/02/01 职场文书
甜品店创业计划书
2014/09/21 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
海弦WR-800F
2022/04/05 无线电