如何用单个JavaScript正则提取指定单词并校验句子格式

问题根因 #

你原有写法拿不到所有颜色的核心原因是：被量词修饰的捕获组，在JavaScript中只会保留最后一次的捕获结果，你写的( and (green|purple|yellow|red))*用了*量词修饰，中间多次匹配的结果会被后续匹配覆盖，自然只能拿到最后一个颜色值。

方案1：两步实现（兼容性最好，逻辑最易读） #

先校验整句格式完全合法，再提取所有目标颜色，实现逻辑：

1. 把原有正则的捕获组改成非捕获组，用来做整句格式校验，只要句子里出现非指定颜色的单词，校验直接不通过
2. 校验通过后，全局匹配所有指定颜色即可

代码示例：

// 整句格式校验正则
const validateRegex = /^On the (?:green|purple|yellow|red)(?: and (?:green|purple|yellow|red))* grass$/
// 颜色提取正则
const colorExtractRegex = /green|purple|yellow|red/g

// 测试用例1：合法句子
const str1 = 'On the green and green and green and purple and purple and yellow grass'
if (validateRegex.test(str1)) {
  const colors = str1.match(colorExtractRegex)
  console.log(colors) // 输出：['green', 'green', 'green', 'purple', 'purple', 'yellow']
}

// 测试用例2：带非法单词的句子
const str2 = 'On the green and red and black grass'
if (validateRegex.test(str2)) {
  // 校验不通过，不会执行
  const colors = str2.match(colorExtractRegex)
}

方案2：单个正则实现（需要ES2018+支持\G锚点和matchAll方法） #

如果需要单个正则一次完成校验+提取，可以用零宽断言+\G锚点实现，\G锚点会定位到上一次匹配结束的位置，确保所有颜色都是从合法格式中提取的：

const regex = /(?:^(?=On the (?:green|purple|yellow|red)(?: and (?:green|purple|yellow|red))* grass$)|(?!^)\G)(?: and )?\b(green|purple|yellow|red)\b/g

// 测试合法句子
const str1 = 'On the green and green and green grass'
const colors1 = Array.from(str1.matchAll(regex), m => m[1])
console.log(colors1) // 输出：['green', 'green', 'green']

// 测试非法句子
const str2 = 'On the green and red and black grass'
const colors2 = Array.from(str2.matchAll(regex), m => m[1])
console.log(colors2) // 输出：[]

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