如何使用 JavaScript 解析 URL？

在 Web 开发中，我们经常需要解析 URL，以获取 URL 中的各个部分，例如协议、主机名、路径、查询参数等等。在 JavaScript 中，我们可以使用内置的 URL 对象来解析 URL。

解析 URL

我们可以通过创建 URL 对象并将 URL 字符串传递给它来解析 URL。例如：

const url = new URL('https://www.example.com/path?foo=bar');
console.log(url.protocol); // 输出：https:
console.log(url.hostname); // 输出：www.example.com
console.log(url.pathname); // 输出：/path
console.log(url.searchParams.get('foo')); // 输出：bar

上面的示例代码中，new URL() 方法接收一个 URL 字符串，并返回一个 URL 对象。我们可以使用 URL 对象的属性（如 protocol、hostname、pathname）来获取 URL 的各个部分，也可以使用 URL 对象的方法（如 searchParams.get()）来获取 URL 的查询参数。

修改 URL

我们可以通过修改 URL 对象的各个属性和方法来操作 URL。例如：

const url = new URL('https://www.example.com/path?foo=bar');
url.protocol = 'http:';
url.hostname = 'localhost';
url.searchParams.set('baz', 'qux');
console.log(url.href); // 输出：http://localhost/path?foo=bar&baz=qux

上面的示例代码中，我们通过修改 URL 对象的 protocol、hostname 和 searchParams 属性来修改 URL 的协议、主机名和查询参数。最后，我们使用 URL 对象的 href 属性来获取修改后的 URL。

解析当前页面的 URL

我们还可以使用 window.location 对象来获取当前页面的 URL，并使用 URL 对象来解析它。例如：

const url = new URL(window.location.href);
console.log(url.protocol); // 输出：https:
console.log(url.hostname); // 输出：www.example.com
console.log(url.pathname); // 输出：/
console.log(url.searchParams.get('foo')); // 输出：bar

上面的示例代码中，我们使用 window.location.href 属性获取当前页面的 URL，并使用 new URL() 方法创建一个 URL 对象。然后，我们就可以使用 URL 对象的属性和方法来获取 URL 的各个部分了。

小结

在 JavaScript 中，我们可以使用 URL 对象来解析 URL，以获取 URL 的各个部分。我们还可以使用 URL 对象来修改 URL，以修改 URL 的协议、主机名、路径、查询参数等等。同时，我们也可以使用 window.location 对象来获取当前页面的 URL，然后使用 URL 对象来解析它。