在浏览器中解析任意 URL 的组成部分

浏览器的location对象拥有很多方便的属性用于获取当前URL的组成部分：

• location.protocol：协议名
• location.username：用户名
• location.password：密码
• location.hostname：主机名
• location.port：端口号
• location.host：主机名和端口号
• location.pathname：路径
• location.search：查询串
• location.hash：书签名

在较新（未测试，估计是支持跨域XHR之后的）浏览器中，还有

• location.origin：协议名、主机名和端口号

可以使用。

可以看出location的属性是非常方便的URL解析器。但是其局限是只能解析当前URL的组成部分。如果我们要解析任意URL的组成部分，使用location是无法完成的。location的构造器Location是无法在JavaScript中手动创建的。所以如果我们要解析任意URL还需要找别的办法。

查询了MDN，发现Location中获得URL的组成部分的属性都来自于一个叫URLUtil的接口。然后惊喜的发现实现这个接口的接口有三个：Location、HTMLAnchorElement、HTMLAreaElement。Location不能手动创建，但是后两者都是可以用JavaScript手动创建的。

所以我们有了解决方案：

1. 构造一个HTMLAnchorElement（或者HTMLAreaElement）对象。
2. 将该对象的href设置为要解析的URL。
3. 获得对象的相关属性。

在JSFiddle上做了基本实现：

PS. 我在IE8中测试发现以下几点差别：

• 前文提到的没有origin属性
• 如果没在URL中指定端口号，host属性中会返回一个默认的端口号。
• 如果URL中有username部分，那么无法获取任何一个部分，给出安全错误。

PS2. 如果没有很高的兼容性需求，HTML5还提供了URL接口，可以更方便的进行URL解析。