谈谈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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
jquery实现倒计时效果
Dec 14 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Vue编写多地区选择组件
Aug 21 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 Javascript
vue element实现表格合并行数据
Nov 30 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
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
js href的用法
2010/05/13 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
小程序云开发初探(小结)
2018/10/24 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python3生成手写体数字方法
2018/01/30 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python对日志进行处理的实例代码
2018/10/06 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python流程控制 if else实现解析
2019/09/02 Python
Python time库基本使用方法分析
2019/12/13 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
党员廉洁自律承诺书
2014/05/26 职场文书
党性教育心得体会
2014/09/03 职场文书
Python源码解析之List
2021/05/21 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers