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

Question

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

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 myArray, rules = {};
while ((myArray = styleRe.exec(styleAsDashedStr)) !== null) {
    console.log(myArray);
    if (myArray[1] && myArray[2])
      rules[myArray[1]] = myArray[2];
}

这样你最终会得到一个包含所有匹配属性的对象。

你也可以简化你的正则表达式（就像我编辑时 Barmar 刚刚给出的答案 :)。

edit — 你的模式的一个问题是你的 "stanzas" 都以 和结束 开头 ;.当你匹配某些东西时，匹配将同时涉及起始分号 和它后面的分号 。下一场比赛将在之后匹配的分号开始，因此模式中需要前导分号的部分将失败。

Answer 2

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

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

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

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

exec not returning matches in arr[1] - n

javascript

regex

exec