[TOC]

URL相关操作

1. URI、URL、URN说明

URI：

统一资源标志符（英语：Uniform Resource Identifier)，用于标志某一互联网资源名称的字符串。该种标志允许用户对网络中的资源通过特定的协议进行交互操作。URI的最常见的形式是统一资源定位符（URL），经常指定为非正式的网址。更罕见的用法是统一资源名称（URN），其目的是通过提供一种途径。用于在特定的名字空间资源的标志，以补充网址。

通用URI的格式如下：[协议名]://[用户名]:[密码]@[主机名]:[端口]/[路径]?[查询参数]#[片段ID]

                   hierarchical part
        ┌───────────────────┴─────────────────────┐
                    authority               path
        ┌───────────────┴───────────────┐┌───┴────┐
  abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
  └┬┘   └───────┬───────┘ └────┬────┘ └┬┘           └─────────┬─────────┘ └──┬──┘
scheme  user information     host     port                  query         fragment

  urn:example:mammal:monotreme:echidna
  └┬┘ └──────────────┬───────────────┘
scheme              path

URL

统一资源定位符(英语：Uniform Resource Locator)，俗称网页地址，简称网址，是因特网上标准的资源的地址（Address），如同在网络上的门牌。它最初是由蒂姆·伯纳斯-李发明用来作为万维网的地址，现在它已经被万维网联盟编制为因特网标准。

超文本传输协议的统一资源定位符将从因特网获取信息的五个基本元素包括在一个简单的地址中：
1. 传送协议
2. 层级URL标记符号（为“//”，固定不变）
3. 访问资源需要的凭证信息（可省略）
4. 服务器（通常为域名，有时为IP地址）
5. 端口号（以数字方式表示，若为默认值可省略）
6. 路径（以“/”字符区别路径中的每一个目录名称）
7. 查询（GET模式的窗体参数，以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与资料，通常以UTF-8的URL编码，避开字符冲突的问题）
8. 片段（以“#”字符为起点）
以“https://zh.wikipedia.org:443/w/index.php?title=随机页面”为例，其中：https，是协议，zh.wikipedia.org，是服务器，443，是服务器上的网络端口号，/w/index.php，是路径，?title=Special:随机页面，是询问。

大多数网页浏览器不要求用户输入网页中“https://”的部分，因为绝大多数网页内容是超文本传输协议文件。同样，“443”是超文本传输安全协议文件的常用端口号（而“80”是超文本传输协议文件的常用端口号），因此一般也不必写明。一般来说用户只要键入统一资源定位符的一部分（如“zh.wikipedia.org/w/index.php?title=Special:随机页面|随机页面”）就可以了。

由于超文本传输协议允许服务器将浏览器重定向到另一个网页地址，因此许多服务器允许用户省略网页地址中的部分，比如“www”。从技术上来说这样省略后的网页地址实际上是一个不同的网页地址，浏览器本身无法决定这个新地址是否通，服务器必须完成重定向的任务。
URN

统一资源名称(英语：Uniform Resource Name)，是统一资源标识（URI）的历史名字，它使用urn:作为URI scheme。

URN的语法[3]用巴科斯范式来写是：<URN> ::= "urn:" <NID> ":" <NSS>

解析出来是：urn:<NID>:<NSS>

开头的urn:序列大小写不敏感的。<NID>是命名空间标识，它是一个“命名空间特定”的字符串，决定了如何解释<NSS>的句法。统一资源名称的功能需求在RFC 1737中描述。

2. 对URL进行编码、解码

encodeURI 和 decodeURI 函数操作的是完整的 URI；这俩函数假定 URI 中的任何保留字符都有特殊意义，所有不会编码它们。

encodeURIComponent 和 decodeURIComponent 函数操作的是组成 URI 的个别组件；这俩函数假定任何保留字符都代表普通文本，所以必须编码它们，所以它们（保留字符）出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

encodeURI：通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码，encodeURI不会转义以下字符：

类型包含

保留字符 ; , / ? : @ & = + $

非转义的字符字母数字 - _ . ! ~ * ' ( )

数字符号 #
decodeURI: 解码一个由encodeURI先前创建的统一资源标识符（URI）或类似的例程。
encodeURIComponent：是对统一资源标识符（URI）的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码（只有由两个Unicode代理区字符组成的字符才用四个转义字符编码），转义除了字母、数字、(、)、.、!、~、*、'、-和_之外的所有字符。
decodeURIComponent：用于解码由 encodeURIComponent 方法或者其它类似方法编码的部分统一资源标识符（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=中文

// 对部分URL 加密，如参数
encodeURIComponent('?abc=ddd&dd=1234')
// '%3Fabc%3Dddd%26dd%3D1234'
decodeURIComponent('%3Fabc%3Dddd%26dd%3D1234')
// '?abc=ddd&dd=1234'

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

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

4. 页面访问来源referrer

document.referrer

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

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

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

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

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

参考资料：

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

https://segmentfault.com/a/1190000019099536

参考资料

统一资源标志符URI 维基百科

统一资源定位符 URL 维基百科

统一资源名称 URN 维基百科

encodeURIComponent() MDN

decodeURIComponent() MDN

encodeURI() MDN

decodeURI() MDN

Location MDN

# URL相关操作

# 1. URI、URL、URN说明

# 2. 对URL进行编码、解码

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

# 4. 页面访问来源referrer

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

# 参考资料