JavaScript中提取URL路径指定片段的更优实现方法

以下是几种比原有写法鲁棒性、可维护性更好的实现方式，可根据实际场景选型：

• 方案1：URL API分段提取（最推荐，鲁棒性最高）
  该方案通过浏览器原生URL API解析路径，避免路径中随机出现test/new字符导致的误切割，同时加了边界校验避免报错：

  const url = new URL(window.location.href);
  // 拆分路径并过滤空片段
  const pathSegs = url.pathname.split('/').filter(Boolean);
  const testIdx = pathSegs.indexOf('test');
  const newIdx = pathSegs.indexOf('new');
  let targetPath = '';
  // 校验边界合法才截取
  if (testIdx > -1 && newIdx > testIdx) {
    targetPath = `/${pathSegs.slice(testIdx + 1, newIdx).join('/')}/`;
  }
  

  优点：逻辑清晰易维护，不会误匹配路径外的test/new字符，兼容性覆盖所有现代浏览器

• 方案2：正则匹配（适合规则固定的场景，写法简洁）
  如果确定路径结构永远符合/test/[目标内容]/new/的规则，可直接用正则提取：

  const matchResult = window.location.href.match(/\/test(\/.*?)\/new\//);
  const targetPath = matchResult ? matchResult[1] : '';
  

  优点：代码量少，一行即可完成提取
  缺点：规则变更时需要修改正则，正则写法不严谨可能出现匹配漏洞。

• 方案3：原有split逻辑优化（改动最小，仅加报错兜底）
  如果不想改动原有逻辑，只需要给原有写法加边界兜底，避免split不到对应字符串时报undefined错误：

  const targetPath = (window.location.href.split('test')[1] || '').split('/new')[0] || '';
  

  优点：改动最小，沿用原有逻辑
  缺点：依然存在路径其他位置出现test/new字符时误切割的问题。

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