# 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一些信息,Document 和 Window 接口都有这样一个链接的Location,分别通过 Document.location和Window.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