JS 解析 URL - JavaScript

在本文中，我们将探讨如何使用 JavaScript 解析 URL。

URI 和 URL

URI (Uniform Resource Identifier) 是一种用来标识某个资源的字符串。而 URL (Uniform Resource Locator) 是具体的一种 URI，它描述的是在某个指定协议下访问某个资源的地址。

下面是一个 URL 的示例：https://www.example.com/path/to/resource?param1=value1&param2=value2#section

其中，https 是 URL 的协议部分，www.example.com 是 URL 的主机部分，/path/to/resource 是 URL 的路径部分，param1=value1&param2=value2 是 URL 的查询部分，section 是 URL 的片段部分。

解析 URL

1. 创建一个 URL 对象

使用 JavaScript 中的 URL 对象可以轻松地解析 URL。我们只需要将 URL 作为参数传递给 URL() 构造函数，即可创建一个 URL 对象。

const urlString = 'https://www.example.com/path/to/resource?param1=value1&param2=value2#section';
const url = new URL(urlString);

2. 获取 URL 的各个部分

URL 对象提供了许多属性，用于获取 URL 的各个部分：

• url.protocol：获取 URL 的协议部分，例如 https:
• url.host：获取 URL 的主机部分，例如 www.example.com
• url.hostname：获取 URL 的主机名部分，例如 example.com
• url.port：获取 URL 的端口部分，例如 443
• url.pathname：获取 URL 的路径部分，例如 /path/to/resource
• url.search：获取 URL 的查询部分，例如 ?param1=value1&param2=value2
• url.hash：获取 URL 的片段部分，例如 #section

console.log(url.protocol);   // https:
console.log(url.host);       // www.example.com
console.log(url.hostname);   // example.com
console.log(url.port);       // 443
console.log(url.pathname);   // /path/to/resource
console.log(url.search);     // ?param1=value1&param2=value2
console.log(url.hash);       // #section

3. 解析查询部分

查询部分通常包含一些键值对，可以使用 URLSearchParams 对象来处理。可以通过访问 url.searchParams 属性来获取 URLSearchParams 对象。

const params = url.searchParams;
console.log(params.get('param1'));   // value1
console.log(params.get('param2'));   // value2

4. 修改 URL 的各个部分

URL 对象的各个属性都是可读写的，我们可以使用它们来修改 URL 的各个部分。

url.protocol = 'http:';
url.pathname = '/new/path';
console.log(url.href);   // http://www.example.com/new/path?param1=value1&param2=value2#section

结论

使用 URL 对象，我们可以轻松地解析和构造 URL。它简单易用，并提供了许多属性和方法来处理 URL 的各个部分。