当前位置：首页 > JavaScript

js 实现urlparse

2026-02-01 06:59:21JavaScript

URL解析的基本方法

在JavaScript中，可以使用内置的URL对象来解析URL。URL对象提供了一种简单的方式来解析和操作URL的各个部分。

const url = new URL('https://www.example.com/path?name=value#fragment');
console.log(url.href);       // 完整URL
console.log(url.protocol);   // 协议部分
console.log(url.hostname);   // 主机名
console.log(url.pathname);   // 路径部分
console.log(url.search);     // 查询字符串
console.log(url.hash);       // 片段标识符

解析查询参数

如果需要解析URL中的查询参数，可以使用URLSearchParams对象。这个对象提供了一系列方法来操作查询字符串。

const params = new URLSearchParams(url.search);
console.log(params.get('name')); // 获取特定参数值
params.forEach((value, key) => {
  console.log(key, value);      // 遍历所有参数
});

手动解析URL

如果不使用内置的URL对象，可以通过正则表达式手动解析URL。这种方法适用于需要更灵活处理的情况。

function parseUrl(url) {
  const pattern = /^(https?:\/\/)?([^\/\?:]+)(:(\d+))?([^?#]*)(\?([^#]*))?(#(.*))?/;
  const matches = url.match(pattern);
  return {
    protocol: matches[1],
    host: matches[2],
    port: matches[4],
    path: matches[5],
    query: matches[7],
    hash: matches[9]
  };
}
const parsed = parseUrl('https://www.example.com:8080/path?name=value#fragment');
console.log(parsed);

处理相对URL

当需要解析相对URL时，可以结合基础URL使用URL对象。这种方法确保相对路径被正确解析为绝对路径。

js 实现urlparse

const baseUrl = 'https://www.example.com/base/';
const relativeUrl = '../path?query=value';
const absoluteUrl = new URL(relativeUrl, baseUrl);
console.log(absoluteUrl.href);