如何分离字符串的正则匹配与非匹配部分并保留原顺序？

我正在模拟测试框架中expect(s).not.toMatch(/regex/)断言失败时的行为。目前生成的错误信息会提示已找到匹配项、告知正则表达式内容并打印被搜索的「目标字符串（haystack）」。

我希望优化该错误信息，为目标字符串中的**所有匹配部分（而非仅第一个）**添加颜色标记，方便用户快速定位。我已有用于给文本上色的库，缺少满足以下要求的算法：

• 将目标字符串的匹配部分与非匹配部分拆分
• 区分哪些部分是匹配项、哪些是非匹配项
• 返回可重构为原字符串形式的结果（带或不带颜色标记均可，以实现难度为准）
• 适配大多数正则表达式

最后一点是独特需求：我找到的其他方案都用字面量正则，但我的正则是动态未知的，可能包含捕获组，比如expect(s).not.toMatch(/(foo|bar)/)、expect(s).not.toMatch(/baz/)或expect(s).not.toMatch(/(?:foo|bar)/)，希望方案在这些场景下都能生效。

我试过string.match()、string.split()和regex.match()，但多数方案无法满足所有要求，尤其是第三点。感觉可能用错了工具，想知道合适的解决方法。

我尝试过的示例代码 #

function withSplit(actualValue, re) {
  const matches = [...(actualValue + '').split(new RegExp(`(${re.source})`, `g`))];
  console.log(`matches`, matches, `actualValue`, actualValue, `re`, re, `\nissue: which ones are matches?`);
}

withSplit(`foo bar baz`, /foo/);

function withMatchAllWrapInGroup(actualValue, re) {
  const matches = [...(actualValue + '').matchAll(new RegExp(`(${re.source})`, `g`))];
  console.log(`matches`, matches, `actualValue`, actualValue, `re`, re, `\nissue: doesn't print non-matches`);
}

withMatchAllWrapInGroup(`foo bar baz`, /foo/);

function withMatchAll(actualValue, re) {
  const matches = [...(actualValue + '').matchAll(new RegExp(re.source, `g`))];
  console.log(`matches`, matches, `actualValue`, actualValue, `re`, re, `\nissue: doesn't print non-matches`);
}

withMatchAll(`foo bar baz`, /foo/);

核心思路是遍历所有匹配位置，拆分出匹配和非匹配片段并标记类型，同时处理正则的全局匹配要求和捕获组干扰问题。

实现代码 #

function splitStringWithMatches(actualValue, re) {
  const str = String(actualValue);
  // 强制添加全局匹配标志，确保能找到所有匹配项
  const globalRe = new RegExp(
    re.source,
    re.flags.includes('g') ? re.flags : `${re.flags}g`
  );

  const segments = [];
  let lastIndex = 0;

  // 遍历所有匹配结果，按位置拆分字符串
  for (const match of str.matchAll(globalRe)) {
    const matchStr = match[0]; // 取整个匹配内容，忽略捕获组
    const matchStart = match.index;

    // 添加匹配前的非匹配片段
    if (matchStart > lastIndex) {
      segments.push({
        type: 'non-match',
        value: str.slice(lastIndex, matchStart)
      });
    }

    // 添加匹配片段
    segments.push({
      type: 'match',
      value: matchStr
    });

    lastIndex = matchStart + matchStr.length;
  }

  // 添加末尾剩余的非匹配内容
  if (lastIndex < str.length) {
    segments.push({
      type: 'non-match',
      value: str.slice(lastIndex)
    });
  }

  return segments;
}

// 示例：给匹配项添加颜色（假设用ANSI转义码，或替换为你的上色库）
function highlightMatches(str, re) {
  const segments = splitStringWithMatches(str, re);
  return segments.map(seg => 
    seg.type === 'match' ? `\x1b[31m${seg.value}\x1b[0m` : seg.value
  ).join('');
}

// 测试不同正则场景
console.log(highlightMatches('foo bar baz foo', /foo/));
console.log(highlightMatches('foo bar baz', /(foo|bar)/));
console.log(highlightMatches('foo bar baz', /(?:foo|bar)/));

方案说明 #

1. 强制全局匹配：不管传入的正则是否带g标志，都自动添加该标志，确保能遍历所有匹配项。
2. 按位置精准拆分：通过match.index获取匹配起始位置，对比上一个片段的结束位置，拆分出中间的非匹配内容，不会遗漏任何部分。
3. 屏蔽捕获组干扰：直接取match[0]（整个匹配的字符串），忽略原正则的捕获组，确保带捕获组的正则也能正确识别完整匹配项。
4. 支持原字符串重构：将所有片段的value拼接即可还原原字符串，满足重构要求。
5. 明确类型标记：每个片段都有type字段，清晰区分匹配/非匹配，方便后续添加颜色或其他格式处理。

解决你之前的问题 #

• 解决了split方法无法区分匹配/非匹配的问题：每个片段都有明确类型标记。
• 解决了matchAll方法缺失非匹配部分的问题：通过位置对比补全了所有非匹配片段。
• 适配带捕获组的正则：通过取match[0]避免了捕获组导致的拆分混乱。

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