如何用正则表达式提取URL路径中斜杠间的字符串（遇问号截断）

需求说明 #

需要提取URL路径中斜杠分隔的所有非空字符串，若存在问号则仅处理问号之前的部分，示例如下：

• /abc/def/ghi?foo=bar → ['abc','def','ghi']
• /abc/xyz → ['abc','xyz']
• abc/xyz → ['abc','xyz']
• abc/xyz/ → ['abc','xyz']

问题分析 #

你之前使用的/\w+/正则只会匹配第一个连续的字母数字串，所以只能得到abc，无法获取所有符合要求的部分。

解决方案 #

方法一：字符串分割+过滤（直观易读）

先截取问号前的路径部分，再按斜杠分割后过滤空字符串：

const extractPathParts = (url) => {
  // 截取到第一个问号之前的内容，没有问号则取整个字符串
  const pathWithoutQuery = url.split('?')[0];
  // 按斜杠分割，过滤掉空字符串（处理开头/结尾的斜杠）
  return pathWithoutQuery.split('/').filter(part => part.length > 0);
};

// 测试示例
console.log(extractPathParts('/abc/def/ghi?foo=bar')); // ['abc','def','ghi']
console.log(extractPathParts('/abc/xyz')); // ['abc','xyz']
console.log(extractPathParts('abc/xyz')); // ['abc','xyz']
console.log(extractPathParts('abc/xyz/')); // ['abc','xyz']

方法二：正则全局匹配（简洁高效）

使用带全局标志的正则，直接匹配所有符合要求的片段：

const extractPathParts = (url) => {
  // 正则解释：
  // (?<=\/|^)  匹配前面是斜杠或字符串开头的位置
  // [^\/?]+    匹配一个或多个非斜杠、非问号的字符
  // (?=\/|$|\?) 匹配后面是斜杠、字符串结尾或问号的位置
  const regex = /(?<=\/|^)[^\/?]+(?=\/|$|\?)/g;
  // 匹配结果可能为null，所以用|| []兜底
  return url.match(regex) || [];
};

// 测试示例
console.log(extractPathParts('/abc/def/ghi?foo=bar')); // ['abc','def','ghi']
console.log(extractPathParts('/abc/xyz')); // ['abc','xyz']
console.log(extractPathParts('abc/xyz')); // ['abc','xyz']
console.log(extractPathParts('abc/xyz/')); // ['abc','xyz']

两种方法对比 #

• 分割+过滤的方法逻辑直观，无需复杂正则知识，适合快速实现和维护
• 正则匹配的方法代码更简洁，一步完成提取，适合对正则熟悉的开发者

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