如何在JavaScript中提取URL的指定路径分段

针对你给出的URL http://localhost:3000/prospects/talk-to-your-sphere，想要得到 ["/prospects", "/talk-to-your-sphere"] 的结果，这里有两种实用的JavaScript实现方法：

方法一：使用原生URL API（推荐） #

原生URL API是处理URL最可靠的方式，它能自动解析URL的各个组成部分，避免手动字符串处理的漏洞。

// 初始化URL对象
const url = new URL("http://localhost:3000/prospects/talk-to-your-sphere");
// 获取路径名并按斜杠分割，过滤掉空字符串（路径开头的斜杠会生成空元素）
const pathSegments = url.pathname.split('/').filter(segment => segment !== '');
// 给每个路径段添加前缀斜杠，组装成目标数组
const result = pathSegments.map(segment => `/${segment}`);

console.log(result); // 输出: ["/prospects", "/talk-to-your-sphere"]

为什么推荐这个方法？ #

• 自动处理各种URL边缘情况：比如URL带查询参数（?foo=bar）、哈希（#section）时，依然能正确提取路径部分
• 代码简洁易读，维护成本低
• 符合现代JavaScript规范

方法二：使用正则表达式（适配旧环境） #

如果你需要兼容不支持URL API的旧环境，可以用正则表达式匹配主机后的路径段：

const urlStr = "http://localhost:3000/prospects/talk-to-your-sphere";
// 正则规则：匹配://后的主机部分，然后捕获每个/开头的路径段
const pathRegex = /:\/\/[^\/]+(\/[^\/]+)/g;
const result = [];
let match;

// 循环捕获所有匹配的路径段
while ((match = pathRegex.exec(urlStr)) !== null) {
  result.push(match[1]);
}

console.log(result); // 输出: ["/prospects", "/talk-to-your-sphere"]

注意事项 #

• 这个正则假设URL的主机部分是://后到第一个/之前的内容，若URL有特殊格式（比如IPV6地址）可能需要调整正则
• 相比URL API，正则的容错性更差，建议优先使用方法一

内容的提问来源于stack exchange，提问作者Zubair Moosani