轻松玩转 JS：巧用多种方式获取 URL 信息

2023-05-01 14:32:47

获取网页 URL 的终极指南

在网络开发中，获取和操作网页 URL 是至关重要的。本文将深入探究四种常用的 JavaScript 方法，帮助你轻松获取和分析 URL 信息。

1. window.location：最常用的获取 URL 方法

window.location 是 JavaScript 中获取 URL 信息最流行的方式。它是一个只读属性，包含了当前窗口 URL 的完整信息。以下属性可用于访问 URL 的不同部分：

// 获取完整 URL
window.location.href

// 获取协议（如 "http" 或 "https"）
window.location.protocol

// 获取主机名（如 "www.example.com"）
window.location.hostname

// 获取端口号（如 "80" 或 "443"）
window.location.port

// 获取路径（如 "/path/to/file.html"）
window.location.pathname

// 获取查询字符串（如 "?q=search+term"）
window.location.search

// 获取哈希值（如 "#fragment"）
window.location.hash

2. document.URL：获取当前文档的 URL

document.URL 是另一种获取 URL 的常用方法。它是一个只读属性，包含了当前文档的 URL。与 window.location.href 的区别在于，document.URL 仅返回文档的 URL，不包括协议、主机名和端口号。

3. location.href：获取当前窗口的 URL

location.href 是获取当前窗口 URL 的第三种方法。它是一个只读属性，包含了当前窗口 URL 的完整信息。与 window.location.href 的区别在于，location.href 仅返回当前窗口的 URL，不包括查询字符串和哈希值。

4. URLSearchParams：解析 URL 查询字符串

URLSearchParams 是一个内置的 JavaScript 对象，用于解析 URL 查询字符串。你可以使用以下方法来操作 URLSearchParams：

// 创建一个新的 URLSearchParams 对象
const params = new URLSearchParams();

// 向对象添加键值对
params.append("key", "value");

// 从对象删除键值对
params.delete("key");

// 获取键的值
params.get("key");

// 获取所有键的值
params.getAll("key");

// 检查对象中是否包含键
params.has("key");

// 获取所有键的迭代器
params.keys();

// 获取所有值的迭代器
params.values();

代码示例：

<html>
<head>
  <script>
    // 获取完整的 URL
    const fullUrl = window.location.href;
    console.log("Full URL:", fullUrl);

    // 获取文档的 URL
    const documentUrl = document.URL;
    console.log("Document URL:", documentUrl);

    // 获取查询字符串参数
    const urlParams = new URLSearchParams(window.location.search);
    const searchTerm = urlParams.get("q");
    console.log("Search term:", searchTerm);
  </script>
</head>
<body>
  <h1>URL 获取方法</h1>
</body>
</html>