javascript中解析url主要有三种方法：1. 使用url构造函数，推荐方式，支持现代浏览器，能处理绝对/相对url、自动编码解码，通过属性访问协议、域名、路径、查询参数等；2. 使用<a>标签的href属性，通过创建临时a标签解析url，无需额外库但需操作dom，效率较低且可能存在兼容性问题；3. 使用字符串操作，适用于简单场景或老旧浏览器，通过split、indexof等方法手动提取信息，灵活性高但代码繁琐易出错且需自行处理编码。优先推荐url构造函数，因其简单、强大、性能好且符合标准。
解析URL，简单来说，就是把一个网址拆解成各个组成部分，例如协议、域名、路径、查询参数等等，方便我们提取和使用这些信息。JavaScript提供了多种方法来完成这个任务，各有优劣，选择哪个取决于你的具体需求。
JavaScript中解析URL主要有三种方法：使用
URL构造函数、使用
<a>标签的
href属性、以及使用字符串操作。
URL构造函数
URL构造函数是现代浏览器提供的原生API，也是我个人最推荐的方式。它简单、强大，并且处理各种复杂的URL情况都非常可靠。
const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1¶m2=value2#hash';
const url = new URL(urlString);
console.log(url.protocol); // "https:"
console.log(url.hostname); // "www.example.com"
console.log(url.port); // "8080"
console.log(url.pathname); // "/path/to/resource"
console.log(url.search); // "?param1=value1¶m2=value2"
console.log(url.hash); // "#hash"
console.log(url.searchParams.get('param1')); // "value1"URL构造函数会将URL字符串解析成一个对象，这个对象包含了URL的各个部分，你可以通过访问对象的属性来获取这些信息。
searchParams属性尤其有用，它允许你方便地获取和操作URL中的查询参数。
使用 <a>
标签的 href
属性
这种方法比较古老，但仍然有效。创建一个临时的
<a>标签，将URL赋值给它的
href属性，然后就可以通过访问标签的属性来获取URL的各个部分。
function parseURL(url) {
const a = document.createElement('a');
a.href = url;
return {
protocol: a.protocol,
hostname: a.hostname,
port: a.port,
pathname: a.pathname,
search: a.search,
hash: a.hash,
origin: a.origin,
};
}
const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1¶m2=value2#hash';
const parsedURL = parseURL(urlString);
console.log(parsedURL.protocol); // "https:"
console.log(parsedURL.hostname); // "www.example.com"
console.log(parsedURL.port); // "8080"
console.log(parsedURL.pathname); // "/path/to/resource"
console.log(parsedURL.search); // "?param1=value1¶m2=value2"
console.log(parsedURL.hash); // "#hash"这种方法的优点是不需要额外的库，但缺点是需要操作DOM，效率相对较低。而且，对于一些特殊的URL，可能存在解析不正确的情况。
使用字符串操作
如果你只需要提取URL中的某一部分信息，或者需要兼容一些老旧的浏览器，那么可以使用字符串操作。例如，可以使用
split()、
substring()、
indexOf()等方法来提取URL中的协议、域名、路径、查询参数等等。
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[[]]/g, '\$&');
const regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/+/g, ' '));
}
const urlString = 'https://www.example.com:8080/path/to/resource?param1=value1¶m2=value2#hash';
const param1Value = getParameterByName('param1', urlString);
console.log(param1Value); // "value1"这种方法的优点是灵活，可以根据自己的需求来提取URL中的信息。缺点是代码比较繁琐，容易出错，并且需要自己处理URL编码等问题。
如何处理相对URL
URL构造函数可以很好地处理相对URL，只需要提供一个base URL即可。
const relativeURL = '/path/to/resource?param1=value1'; const baseURL = 'https://www.example.com'; const url = new URL(relativeURL, baseURL); console.log(url.href); // "https://www.example.com/path/to/resource?param1=value1"
如果没有提供base URL，URL构造函数会尝试将相对URL解析为绝对URL，如果解析失败，则会抛出错误。
如何处理URL编码
URL中的一些字符需要进行编码，例如空格、特殊字符等等。URL构造函数会自动处理URL编码，你不需要手动进行编码和解码。
const urlString = 'https://www.example.com?param=value with spaces';
const url = new URL(urlString);
console.log(url.searchParams.get('param')); // "value with spaces"如果你使用字符串操作来解析URL，那么需要自己处理URL编码。可以使用
encodeURIComponent()和
decodeURIComponent()方法来进行编码和解码。
为什么选择URL构造函数
虽然其他方法也能解析URL，但我仍然推荐使用URL构造函数，原因如下：
- 简单易用： API简洁明了，容易上手。
- 功能强大： 可以处理各种复杂的URL情况，包括相对URL、URL编码等等。
- 性能良好： 原生API，性能比字符串操作更好。
- 标准API： 现代浏览器都支持，兼容性好。
当然，具体选择哪种方法取决于你的实际需求。如果只需要提取URL中的某一部分信息，或者需要兼容一些老旧的浏览器，那么可以使用字符串操作。但如果需要处理复杂的URL情况，或者需要更好的性能，那么URL构造函数是更好的选择。
