js中如何解析url

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&param2=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&param2=value2"
console.log(url.hash);       // "#hash"
console.log(url.searchParams.get('param1')); // "value1"

URL构造函数会将URL字符串解析成一个对象，这个对象包含了URL的各个部分，你可以通过访问对象的属性来获取这些信息。

searchParams

使用

<a>

标签的

href

属性

这种方法比较古老，但仍然有效。创建一个临时的

<a>

href

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&param2=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&param2=value2"
console.log(parsedURL.hash);       // "#hash"

这种方法的优点是不需要额外的库，但缺点是需要操作DOM，效率相对较低。而且，对于一些特殊的URL，可能存在解析不正确的情况。

使用字符串操作

如果你只需要提取URL中的某一部分信息，或者需要兼容一些老旧的浏览器，那么可以使用字符串操作。例如，可以使用

split()

substring()

indexOf()

MusicAI

AI音乐生成工具

下载

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&param2=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构造函数是更好的选择。