# URL相关操作

# 1. 对URL进行转码、解码

# 1.1 encodeURIComponent、decodeURIComponent

encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码(只有由两个Unicode代理区字符组成的字符才用四个转义字符编码)。

encodeURIComponent:转义除了字母、数字、().!~*'-_之外的所有字符。

decodeURIComponent:用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符(URI)。

ECMAScript 3rd Edition (ECMA-262) 初始定义的,兼容性应该很强

encodeURIComponent('https://www.baidu.com?abc=ddd&dd=1234')
// "https%3A%2F%2Fwww.baidu.com%3Fabc%3Dddd%26dd%3D1234"

decodeURIComponent("https%3A%2F%2Fwww.baidu.com%3Fabc%3Dddd%26dd%3D1234")
// https://www.baidu.com?abc=ddd&dd=1234

# 1.2 encodeURI、decodeURI

encodeURI:对URL进行转码,会替换所有的字符,但不包括以下字符,即使它们具有适当的UTF-8转义序列:

类型 包含
保留字符 ; , / ? : @ & = + $
非转义的字符 字母 数字 - _ . ! ~ * ' ( )
数字符号 #

请注意,encodeURI 自身无法产生能适用于HTTP GET 或 POST 请求的URI,例如对于 XMLHTTPRequests, 因为 "&", "+", 和 "=" 不会被编码,然而在 GET 和 POST 请求中它们是特殊字符。encodeURIComponent这个方法会对这些字符编码。

decodeURI: 解码一个由encodeURI先前创建的统一资源标识符(URI)或类似的例程。

encodeURI("https://www.baidu.com?abc=中文");
// https://www.baidu.com?abc=%E4%B8%AD%E6%96%87

encodeURI(";,/?:@&=+$-_.!~*'()#");
// ;,/?:@&=+$-_.!~*'()#

decodeURI("https://www.baidu.com?abc=%E4%B8%AD%E6%96%87")
// https://www.baidu.com?abc=中文

# 2. 在浏览器中获取URL一些信息Location

JavaScript中使用Location对象来获取URL一些信息,DocumentWindow 接口都有这样一个链接的Location,分别通过 Document.locationWindow.location 访问

# 3. 页面访问来源referrer

document.referrer

如果在Google中搜索百度,打开百度页面后,在浏览器控制台:

document.referrer
// "https://www.google.com.hk/"

注意: 如果用户直接打开了这个页面(不是通过页面跳转,而是通过地址栏或者书签等打开的),则该属性为空字符串。由于该属性只是返回一个字符串,所以不能够通过该属性引用页面的 DOM。

# 4. URLSearchParams:处理URL的查询字符串

注意:此方法在IE浏览器和Edge Mobile端不支持。

参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

https://segmentfault.com/a/1190000019099536

# 5. 参考资料

encodeURIComponent() MDN

decodeURIComponent() MDN

encodeURI() MDN

decodeURI() MDN

Location MDN