js 解析 url

// 解析 URL 的示例代码

// 使用 URL 构造函数解析 URL
const url = new URL('https://example.com:8080/path?name=JohnDoe#section');

// 输出解析后的各个部分
console.log('Protocol:', url.protocol);   // 输出协议 (例如: https:)
console.log('Hostname:', url.hostname);   // 输出主机名 (例如: example.com)
console.log('Port:', url.port);           // 输出端口号 (例如: 8080)
console.log('Pathname:', url.pathname);   // 输出路径 (例如: /path)
console.log('Search:', url.search);       // 输出查询字符串 (例如: ?name=JohnDoe)
console.log('Hash:', url.hash);           // 输出哈希部分 (例如: #section)

// 如果需要获取查询参数的具体值，可以使用 URLSearchParams 对象
const params = new URLSearchParams(url.search);
console.log('Query Parameter name:', params.get('name'));  // 输出查询参数 name 的值 (例如: JohnDoe)

解释说明：

1. URL 构造函数：new URL() 可以用来解析一个完整的 URL 字符串，并将其分解为各个组成部分。
2. 属性：
   • protocol: 获取 URL 的协议部分（如 https:）。
   • hostname: 获取 URL 的主机名部分（如 example.com）。
   • port: 获取 URL 的端口号（如 8080）。
   • pathname: 获取 URL 的路径部分（如 /path）。
   • search: 获取 URL 的查询字符串部分（如 ?name=JohnDoe）。
   • hash: 获取 URL 的哈希部分（如 #section）。
3. URLSearchParams：用于处理查询字符串中的参数，可以通过 get() 方法获取指定参数的值。

通过这些方法，你可以轻松地解析和操作 URL。