Javascript解析URL方法详解

当我们使用JavaScript编写Web应用程序时，需要对URL进行解析。在本攻略中，我们将详细介绍JavaScript中解析URL的方法。

URL的基本结构

一个URL（Uniform Resource Locator）通常由以下几个部分组成：

协议://主机名[:端口号]/路径?查询字符串#锚点

其中：

• 协议：如http、https、ftp等。
• 主机名：指定服务器地址，如www.example.com。
• 端口号（可选）：指定服务端口号，如80、8080。
• 路径：指定请求的资源路径，如/index.html。
• 查询字符串（可选）：以?开头，多个参数之间用&分隔，如?id=1&name=test。
• 锚点（可选）：以#开头，用于定位页面内某个位置。

解析URL的方法

JavaScript提供了window.location对象来获取当前URL信息，包括URL的各个组成部分。下面是常用的解析URL的方法。

1. 获取当前URL

console.log(window.location.href);

执行以上代码，会输出当前页面的完整URL。

2. 获取协议

console.log(window.location.protocol);

执行以上代码，会输出“http:”或“https:”等协议名称。

3. 获取主机名

console.log(window.location.host);

执行以上代码，会输出“www.example.com”等主机名。

4. 获取端口号

console.log(window.location.port);

执行以上代码，会输出端口号，如果URL中没有明确指定端口号，则返回默认值80或443。

5. 获取路径

console.log(window.location.pathname);

执行以上代码，会输出当前URL的路径部分，如“/index.html”。

6. 获取查询字符串

console.log(window.location.search);

执行以上代码，会输出查询字符串部分，如“?id=1&name=test”。

7. 获取锚点

console.log(window.location.hash);

执行以上代码，会输出锚点部分，如“#top”。

示例说明

假设对于以下URL：http://www.example.com/index.html?id=1&name=test#top

执行如下代码：

console.log(window.location.protocol);//输出http:
console.log(window.location.host);//输出www.example.com
console.log(window.location.port);//输出默认端口80
console.log(window.location.pathname);//输出/index.html
console.log(window.location.search);//输出?id=1&name=test
console.log(window.location.hash);//输出#top
console.log(window.location.href);//输出完整URL

以上代码将输出URL的各个组成部分信息。

假设还有一个URL是：https://www.example.com:8080/demo.html#bottom

执行如下代码：

console.log(window.location.protocol);//输出https:
console.log(window.location.host);//输出www.example.com:8080
console.log(window.location.port);//输出8080
console.log(window.location.pathname);//输出/demo.html
console.log(window.location.search);//输出空字符串
console.log(window.location.hash);//输出#bottom
console.log(window.location.href);//输出完整URL

以上代码将输出URL的各个组成部分信息。注意这里的端口号被明确指定为8080。