javascript - exec 未返回 arr[1] - n 中的匹配项

Question

我有一个正则表达式，用于尝试从 getCompulatedStyle 对象获取一些值。我希望当我在从索引 1 开始的每次迭代中针对 exec 运行它时，我的匹配项将被定位，但在每次迭代时，两个新元素都会添加到 myArray 和 elements 中之前设置的现在未定义。

var styleAsDashedStr = window.getComputedStyle(document.getElementById("container")).cssText;
var styleRe = /(?:;\s?(background.*?)\:\s?(.*?);)|(?:;\s?(font.*?)\:\s?(.*?);)|(?:;\s?(border.*?)\:\s?(.*?);)|(?:;\s?(margin.*?)\:\s?(.*?);)|(?:;\s?(padding.*?)\:\s?(.*?);)/g;
//var individuallySetStyles = styleAsDashedStr.match(styleRe);

var myArray;
while ((myArray = styleRe.exec(styleAsDashedStr)) !== null) {
    console.log(myArray);
}

第一次迭代

0: "; background-blend-mode: normal;"
1: "background-blend-mode"
2: "normal"
3: undefined
4: undefined
5: undefined
6: undefined
7: undefined
8: undefined
9: undefined
10: undefined

随后的迭代定义了两个元素，但其他 8 个元素没有定义。有没有办法获取一个数组，其中元素一和元素二是当前捕获的？

Answer 1

对所有样式名称使用​​单个捕获组，而不是单独的组。

var styleRe = /\b((?:background|font|border|margin|padding).*?)\:\s?([^;]*?)/g;

请注意，您不应在开头和结尾匹配 ;，因为这会导致它跳过第一个样式(因为它之前没有 ;)并且然后是所有其他样式(因为匹配一个样式末尾的 ; 将阻止匹配下一个样式开头的 ;)。我通过在末尾使用 [^;]* 而不是 .*? 完全避免了这种情况。