总结:encodeURI对除三种字符()之外的字符进行编码

encodeURIComponent对除两种字符之外的字符进行编码,保留字符会被转义

在进行SaaS前端开发的时候,大家经常会用到两个JavaScriptNative函数:encodeURI 和 encodeURIComponent。这篇文章详细解释这两个函数的用途并比较它们的不同之处
 
背景 
encodeURI 和 encodeURIComponent都是ECMA-262标准中定义的函数,所有兼容这个标准的语言(如JavaScript, ActionScript)都会实现这两个函数。它们都是用来对URI (RFC-2396)字符串进行编码的全局函数,但是它们的处理方式和使用场景有所不同。为了解释它们的不同,我们首先需要理解RFC-2396中对于URI中的字符分类 
保留字符(reserved characters):这类字符是URI中的保留关键字符,它们用于分割URI中的各个部分。这些字符是:";" | "/" | "?" | ":" | "@" | "&" | "=" | "+" | "$" | "," 
Mark字符(mark characters):这类字符在RFC-2396中特别定义,但是没有特别说明用途,可能是和别的RFC标准相关。 这些字符是:"-" | "_" | "." | "!" | "~" | "*" | "'" | "(" | ")" 
基本字符(alphanum characters):这类字符是URI中的主体部分,它包括所有的大写字母、小写字母和数字 
在介绍完上面三类字符串后,我们就非常容易来解释encodeURI和encodeURIComponent函数的不同之处了: 
encodeURI: 该函数对传入字符串中的所有非(基本字符、Mark字符和保留字符)进行转义编码(escaping)。所有的需要转义的字符都按照UTF-8编码转化成为一个、两个或者三个字节的十六进制转义字符(%xx)。例如,字符空格" "转换成为"%20"。在这种编码模式下面,需要编码的ASCII字符用一个字节转义字符代替,在\u0080和\u007ff之间的字符用两个字节转义字符代替,其他16为Unicode字符用三个字节转义字符代替 
encodeURIComponent: 该函数处理方式和encodeURI只有一个不同点,那就是对于保留字符同样做转义编码。例如,字符":"被转义字符"%3A"代替 
之所以有上面两个不同的函数,是因为我们在写JS代码的时候对URI进行两种不同的编码处理需求。encodeURI可以用来对完整的URI字符串进行编码处理。而encodeURIComponent可以对URI中一个部分进行编码,从而让这一部分可以包含一些URI保留字符。这在我们日常编程中是十分有用的。比如下面的URI字符串: 
http://www.mysite.com/send-to-friend.aspx?url=http://www.mysite.com/product.html 
在这个URI字符串中。send-to-friend.aspx页面会创建HTML格式的邮件内容,里面会包含一个链接,这个链接的地址就是上面URI字符串中的url值。显然上面的url值是URI中的一个部分,里面包含了URI保留关键字符。我们必须调用encodeURIComponent对它进行编码后使用,否则上面的URI字符串会被浏览器认为是一个无效的URI。正确的URI应该如下: 
http://www.mysite.com/send-to-friend.aspx?url=http%3A%2F%2Fwww.mysite.com%2Fproduct.html 
例子 
encodeURI

复制代码代码如下:
var uri="my test.asp?name=ståle&car=saab"; 
document.write(encodeURI(uri)); 

上面的输出如下: 
my%20test.asp?name=st%C3%A5le&car=saab

encodeURIComponent

复制代码代码如下:
var uri="http://jb51.net/my test.asp?name=ståle&car=saab"; 
document.write(encodeURIComponent(uri)); 

上面的输出如下: 
http%3A%2F%2Fjb51.net%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab 
其他 
在ECMA-262标准中还定义了和这两个encode函数向对应的decode全局函数,它们是decodeURI和decodeURIComponent。我们可以用它们来decode编码后的字符串

javascript encodeURI和encodeURIComponent的比较的更多相关文章

  1. JavaScript encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent()

    URI:  Uniform Resource Identifier encodeURI() And decodeURI() The encodeURI() function is used to en ...

  2. javascript - encodeURI和encodeURIComponent的区别

    这两个函数功能上面比较接近,但是有一些区别. encodeURI:不会进行编码的字符有82个 :!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z, ...

  3. javascript中escape()、unescape()、encodeURI()、encodeURIComponent()、decodeURI()、decodeURIComponent()比较

    这些URI方法encodeURI.encodeURIComponent().decodeURI().decodeURIComponent()代替了BOM的escape()和unescape()方法.U ...

  4. 关于JavaScript中的escape、encodeURI和encodeURIComponent

    此文内容与关于JavaScript中的编码和解码函数 关联 escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被 ...

  5. 【javascript】escape()、encodeURI()、encodeURIComponent()区别详解

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  6. Javascript中escape()、encodeURI()、encodeURIComponent()的区别

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

  7. Javascript中escape(), encodeURI()和encodeURIComponent()之精析与比较

    escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者, ...

  8. escape(), encodeURI()和encodeURIComponent()(转)

      escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学 ...

  9. escape()、encodeURI()、encodeURIComponent()区别详解--zt

    JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...

随机推荐

  1. linux强制umount设备的方法

    假如挂载时使用了:mount /dev/sda1 /mnt/sda1 #查找占用设备的pid fuser -m /mnt/sda1 #假如此时得到的pid为12345 kill -9 12345 um ...

  2. PHP生成二维码【谷歌API+qrcode+圆角Logo】

    方法一:谷歌二维码API 接口地址:https://chart.googleapis.com/chart 官方文档:https://developers.google.com/chart/infogr ...

  3. println()函数输出int类型返回值错误的问题

    out.println(); 在用这个语句输出其他类返回大的int类型的数据的时候,注意输出错误. 例如: out.println(class1.方法()):  导致错误: our.println(c ...

  4. android实操--练习1

    这两天有空,打算把一些文档整理一下,快要考试了,找一些简单的例子来做做,重温安卓的知识. 下面是第一个练习: 实现很简单,下面我们来看看: 首先新建一个安卓项目Demo1 接着是界面的布局(包括act ...

  5. InnoDB Status Output – Buffer Pool and Spin Rounds

    InnoDB has a good source of information about its status which can be requested every time you need ...

  6. php防盗链,php ci在control里面控制除了自己站内的链接点击跳转,其他来源的都跳到站内页面

    php防盗链,php ci在control里面控制除了自己站内的链接点击跳转,其他来源的都跳到站内页面 $route['jump/(:any)/(:any)'] = "index/jump/ ...

  7. Backup: Flow Control in Perl6

    Control Flow 注意空格,注意空格,注意空格 和 Perl5不同的是,这些结构都可以返回值,而且即使倒置结构也可以用 block 了 block 可以有逗号 with without orw ...

  8. 自定义Exception

    本文改编自http://blog.csdn.net/stellaah/article/details/6738424 [总结] 1.自定义异常: class 异常类名 extends Exceptio ...

  9. sqlite3内存不断增加的原因

    数据库是这样设计的:用内存保存数据,以提高增删查改的速度,同时把数据写入磁盘,让数据落地. 如果不删除数据库里的数据,随着数据不断地添加到数据库,数据库越来越大,RES内存也越来越大. 见测试代码a. ...

  10. 文件名唯一(A.txt => An.txt)

    /// <summary> /// 文件名唯一(A.txt => An.txt) /// </summary> /// <param name="full ...