1.介绍
网页的 URL 只能包含合法的字符。合法字符分成两类。
- URL 元字符:分号(
;
),逗号(,
),斜杠(/
),问号(?
),冒号(:
),at(@
),&
,等号(=
),加号(+
),美元符号($
),井号(#
) - 语义字符:a-z,A-Z,0-9,连词号(
-
),下划线(_
),点(.
),感叹号(!
),波浪线(~
),星号(*
),单引号('
),圆括号(()
)
除了以上字符,其他字符出现在 URL 之中都必须转义,规则是根据操作系统的默认编码,将每个字节转为百分号(%
)加上两个大写的十六进制
字母。
2.使用
编码/解码方法
encodeURI()
encodeURIComponent()
decodeURI()
decodeURIComponent()
其中decodeURI()
、decodeURIComponent()
用于URL 片段的解码。它们分别是encodeURI()
、encodeURIComponent()
方法的逆运算。
2.1 encodeURI()
encodeURI()
方法用于转码整个 URL。它的参数是一个字符串,代表整个 URL。它会将元字符和语义字符之外的字符,都进行转义。示例如下:
encodeURI('https://www.baidu.com/s?ie=UTF-8&wd=中国')
// 输出: https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD
2.2 encodeURIComponent()
encodeURIComponent()
方法用于转码 URL 的组成部分,会转码除了语义字符之外的所有字符,即元字符也会被转码。所以,它不能用于转码整个 URL。它接受一个参数,就是 URL 的片段。示例如下:
// 对URL中的特殊编码字符部分进行转码
'https://www.baidu.com/s?ie=UTF-8&wd='+encodeURIComponent('中国')
//输出: "https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD"
// 对URL中的回调链接进行转码
'https://www.baidu.com/s?returnURL=' +encodeURIComponent('http://www.test.com/')
//输出: "https://www.baidu.com/s?returnURL=http%3A%2F%2Fwww.test.com%2F"
2.3 decodeURI()、decodeURIComponent()
decodeURI()
、decodeURIComponent()
用于URL 片段的解码。它们分别是encodeURI()
、encodeURIComponent()
方法的逆运算,两个解码方法只接受一个入参,就是转码后的字符串;示例如下:
//decodeURI
decodeURI("https://www.baidu.com/s?ie=UTF-8&wd=%E4%B8%AD%E5%9B%BD")
//输出: https://www.baidu.com/s?ie=UTF-8&wd=中国
//decodeURIComponent
decodeURIComponent("http%3A%2F%2Fwww.test.com%2F")
//输出:"http://www.test.com/"
3 encodeURI()、encodeURIComponent()区别
1.encodeURI
方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码:- _ . ! ~ * ' ( )
。
该方法的目的是对 URI 进行完整的编码,因此对以下在 URI 中具有特殊含义的 ASCII 标点符号,encodeURI() 函数是不会进行转义的:;/?:@&=+$,#
2.encodeURIComponent()
方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( )
。
其他字符(比如 :;/?:@&=+$,#
这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。
传递参数时需要使用encodeURIComponent,这样组合的url才不会被#等特殊字符截断。
3.形象的解释,encodeURI
全角日韩汉字其作用,对URL中的特殊字符不做处理。encodeURIComponent()
对url中的特殊字符做出来,将他们转化成对应的ASCII码。
4.encodeURI
不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z
5.encodeURIComponent
不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z