如何在URL正则中排除查询参数？mPulse页面分组正则问题

问题背景 #

调整mPulse页面分组规则时，现有正则无法正确忽略URL查询参数（及哈希），导致分组结果不符合预期：

• 带查询参数的1级路径URL被错误匹配到二级分组规则，出现undefined后缀
• 查询参数中包含的URL会被正则误匹配，导致分组名称错误
• 多级路径的URL在带复杂查询参数时匹配逻辑混乱

现有实现代码 #

分组规则（原代码存在语法错误，已修正为数组） #

const pageGroupDefs = [
  {
    r: 6,
    regex: /(https:\/\/[a-z.-].*)\/(en)\/([^\/^\?^\#]+)?\/?$/,
    viewGroup: "en - $3"
  },
  {
    r: 7,
    regex: /(https:\/\/[a-z.-].*)\/(en)\/([^\/^\?^\#]+)?\/?([^\/^\?^\#]+)?\/?([^\/^\?^\#]+)?(\?\S*)?/,
    viewGroup: "en - $3 - $4"
  }
];

分组提取函数 #

function getPageGroup(url, pGD) {
  for (const def of pGD) {
    const match = def.regex.exec(url);
    if (match) {
      return {
        matched: def.r,
        pageGroup: def.viewGroup.replace(/\$(\d+)/g, (_, group) => match[group]),
        url: url
      }
    }
  }
  return {matched: null, pageGroup: null, url: url};
}

测试URL列表 #

const urlExamples = [
  'https://example.com/en/path',
  'https://example.com/en/path/',
  'https://example.com/en/path?param=example',
  'https://example.com/en/path/?param=example',
  'https://example.com/en/path/subpath',
  'https://example.com/en/path/subpath/',
  'https://example.com/en/path/subpath/subpath2',
  'https://example.com/en/path/subpath/subpath3/subpath3',
  'https://example.com/en/path/subpath?param=example',
  'https://example.com/en/path/subpath/?param=example',
  'https://example.com/en/path?param=https://example2.com/en/path2/subpath2',
  'https://example.com/en/path/?param=https://example2.com/en/path2/subpath2',
  'https://example.com/en/path/subpath?param=https://example2.com/en/path2/subpath2',
  'https://example.com/en/path/subpath/?param=https://example2.com/en/path2/subpath2',
  'https://www.sub-domain.domain.co.uk/en/path/sub-path?param1=val1&param2=https://www.sub-domain.domain.co.uk/en/path&param3=val3&param4=val4',
];

错误测试结果 #

执行测试后得到不符合预期的结果，核心问题包括：

• https://example.com/en/path?param=example被匹配到规则7，返回en - path - undefined
• 查询参数中包含的URL被误匹配，如https://example.com/en/path?param=https://example2.com/en/path2/subpath2返回en - path2 - subpath2
• 复杂子域名的多级路径URL匹配错误，返回en - path&param3=val3&param4=val4

修复方案 #

核心思路：先剥离URL中的查询参数和哈希部分，仅对纯路径进行正则匹配，彻底避免查询参数干扰。

修复后的代码 #

// 剥离查询参数和哈希，获取纯路径部分
function getCleanPath(url) {
  return url.split(/[?#]/)[0];
}

const pageGroupDefs = [
  {
    r: 6,
    // 匹配/en/后跟随1级路径的场景，允许末尾带/
    regex: /https:\/\/[a-z.-]+\/en\/([^\/]+)\/?$/,
    viewGroup: "en - $1"
  },
  {
    r: 7,
    // 匹配/en/后跟随2级及以上路径的场景，仅取前两级路径
    regex: /https:\/\/[a-z.-]+\/en\/([^\/]+)\/([^\/]+)\/?.*/,
    viewGroup: "en - $1 - $2"
  }
];

function getPageGroup(url, pGD) {
  const cleanPath = getCleanPath(url);
  for (const def of pGD) {
    const match = def.regex.exec(cleanPath);
    if (match) {
      return {
        matched: def.r,
        pageGroup: def.viewGroup.replace(/\$(\d+)/g, (_, group) => match[group] || ''),
        url: url
      }
    }
  }
  return {matched: null, pageGroup: null, url: url};
}

验证测试结果 #

执行以下测试代码：

const regexResults = urlExamples.map(url => getPageGroup(url, pageGroupDefs));
console.log(regexResults);

将得到完全符合预期的结果：

[
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path' },
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path/' },
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path?param=example' },
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path/?param=example' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath/' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath/subpath2' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath/subpath3/subpath3' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath?param=example' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath/?param=example' },
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path?param=https://example2.com/en/path2/subpath2' },
  { matched: 6, pageGroup: 'en - path', url: 'https://example.com/en/path/?param=https://example2.com/en/path2/subpath2' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath?param=https://example2.com/en/path2/subpath2' },
  { matched: 7, pageGroup: 'en - path - subpath', url: 'https://example.com/en/path/subpath/?param=https://example2.com/en/path2/subpath2' },
  { matched: 7, pageGroup: 'en - path - sub-path', url: 'https://www.sub-domain.domain.co.uk/en/path/sub-path?param1=val1&param2=https://www.sub-domain.domain.co.uk/en/path&param3=val3&param4=val4' }
]

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