JavaScript正则匹配translateX和translateY值时仅捕获前者是什么原因？

问题原因 #

• 带全局修饰符g的正则表达式内置lastIndex属性，用于记录上一次匹配结束的下标位置：
  1. 单次调用exec方法只会返回当前lastIndex位置之后的第一个匹配结果，你仅调用了一次exec，自然只能拿到translateX对应的匹配值。
  2. matchAll方法返回的是迭代器对象，你仅调用一次next()仅拿到了第一个迭代结果，没有遍历完整的迭代器，因此无法获取第二个translateY的匹配项。
• 你的正则使用了分支结构|，每次匹配只会命中其中一个分支，因此单次匹配的groups对象只会存在X或Y其中一个属性，需要合并多次匹配的分组结果才能同时拿到两个数值。

解决方案 #

方案1：循环调用exec获取所有匹配结果 #

const reg = /translateX\((?<X>-?\d+)px\)|translateY\((?<Y>-?\d+)px\)/g;
const targetStr = "translateX(381px) translateY(-94px)";
const transformVal = {};
let matchResult;
while ((matchResult = reg.exec(targetStr)) !== null) {
  Object.assign(transformVal, matchResult.groups);
}
console.log(transformVal); // 输出 { X: '381', Y: '-94' }

注：-{0,1}可以简化为更常用的-?写法，含义一致。

方案2：遍历matchAll返回的迭代器 #

const reg = /translateX\((?<X>-?\d+)px\)|translateY\((?<Y>-?\d+)px\)/g;
const targetStr = "translateX(381px) translateY(-94px)";
const transformVal = {};
for (const match of targetStr.matchAll(reg)) {
  Object.assign(transformVal, match.groups);
}
console.log(transformVal); // 输出 { X: '381', Y: '-94' }

方案3：优化正则结构，单次匹配直接获取两个值 #

如果你的目标字符串中translateX和translateY总是同时出现、且顺序固定，可以直接修改正则为非全局匹配，一次捕获两个分组：

const reg = /translateX\((?<X>-?\d+)px\) translateY\((?<Y>-?\d+)px\)/;
const targetStr = "translateX(381px) translateY(-94px)";
const transformVal = targetStr.match(reg).groups;
console.log(transformVal); // 输出 { X: '381', Y: '-94' }

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