在本文中，我们将展示如何在 JavaScript 中解析 URL。我们将使用基于对象的旧的和新的两种方法。
1. 使用 document.createElement() 方法
在 JavaScript 中解析 URL 并获取其参数的一种方法是创建 a 元素并将 URL 分配为 href 属性。从该对象中，您可以获取所有重要的 URL 参数，如协议、端口、主机名、锚点等。
const parser = document.createElement('a');
parser.href = "https://itmob.cn:8080/path_name1/path_name2/?search1=test&search2=test#hash";
console.log(parser.protocol); // => "https:"
console.log(parser.hostname); // => "itmob.cn"
console.log(parser.port); // => "8080"
console.log(parser.pathname); // => "/path_name1/path_name2/"
console.log(parser.search); // => "?search1=test&search2=test"
console.log(parser.hash); // => "#hash"
console.log(parser.host); // => "itmob.cn:8080"
2. 使用 URL 对象
JavaScript内置的 URL 类提供了用于创建和解析 URL 的便捷接口。
该对象包含以下属性：
| |
|---|
| hash | 包含“#”的字符串，后跟 URL 的片段标识符 |
| host | 包含主机名的字符串，后跟一个“：”和 URL 的端口 |
| hostname | 包含 URL 主机名的字符串 |
| href | 一个包含整个 URL 的字符串 |
| origin | 一个包含 URL 来源的字符串，即它的协议、主机名和端口 |
| pathname | 包含初始“/”的字符串，后跟 URL 的路径 |
| port | 端口号 |
| protocol | URL 的协议方案，包括最后的 ':’ |
| search | 表示 URL 的参数字符串 |
| searchParams | URLSearchParams 对象，可用于访问在搜索中找到的各个查询参数 |
URL 对象的参数与window.location对象中的参数很相似。
const url = new URL("https://itmob.cn:8080/path_name1/path_name2/?search1=test&search2=test#hash");
console.log(url.protocol); // => "https:"
console.log(url.hostname); // => "itmob.cn"
console.log(url.port); // => "8080"
console.log(url.pathname); // => "/path_name1/path_name2/"
console.log(url.search); // => "?search1=test&search2=test"
console.log(url.hash); // => "#hash"
console.log(url.host); // => "itmob.cn:8080"
url.searchParams.forEach((value, key) => console.log(value, key)); // "test", "search1" "test","search2"
URL 的浏览器兼容性
