正则表达式不捕获 JavaScript 中的组

Question

我写了正则表达式

/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g

对于给定的字符串

translateX(381px) translateY(-94px)

捕获translateX 和translateY 值。通过 regex101.com 服务对其进行了测试，它在那里运行良好。但是，当我在 JavaScript 中尝试它时，它会捕获 translateX 值，即 381，但不会捕获 translateY，即 -94。你知道为什么会这样吗？

regex101

https://i.stack.imgur.com/Nuj5X.png

JavaScript 执行

console.log(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g.exec("translateX(381px) translateY(-94px)"));

使用matchAll 会得到相同的结果。

JavaScript 匹配所有

console.log("translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g).next().value.groups);

Answer 1

您只调用了一次.next()，因此您只能获得第一个匹配项。 你需要遍历.matchAll()的所有结果。

for (m of "translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g)) {
  console.log(m.groups);
}

您还可以将迭代器转换为数组。

console.log([..."translateX(381px) translateY(-94px)".matchAll(/translateX\((?<X>-{0,1}\d+)px\)|translateY\((?<Y>-{0,1}\d+)px\)/g)]
    .map(m => m.groups)) 

Answer 2

您可以使用它一次性找到这两个值：

/translateX\((?<X>-?\d+)px\).*translateY\((?<Y>-?\d+)px\)/g

console.log(/translateX\((?<X>-?\d+)px\).*translateY\((?<Y>-?\d+)px\)/g.exec("translateX(381px) translateY(-94px)"));