Question

我正在尝试在字符串中查找所有出现的颜色。如果我有一个'red #fff green＃000000'字符串，它只会匹配第二个结果，所以在这种情况下为绿色和＃000000。

// csscolor is just json of all color names

const types = {
  hsl: new RegExp(/(hsla?\(\s*(\d{1,3})\s*,\s*(\d{1,3}\%)\s*,\s*(\d{1,3}\%)\s*(?:\s*,\s*(\d+(?:\.\d+)?)\s*)?\))/gi),
  rgb: new RegExp(/(rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}))\)/gi),
  hex: new RegExp(/(#[0-9a-f]{6}|#[0-9a-f]{3})/gi),
  keyword: new RegExp('\\b(' + Object.keys(csscolors).join('|') + ')\\b', 'gi')
};

const execRegex = (re, str) => {
  var match;
  while ((match = re.exec(str)) !== null) {
    console.log('regexp.lastIndex:', re.lastIndex, 
                'index:', match.index,
                'match[0]:', match[0]);
  }
}

const getMatches = (str) => ({
  hsl: types.hsl.test(str) ? execRegex(types.hsl, str) : null,
  rgb: types.rgb.test(str) ? execRegex(types.rgb, str) : null,
  hex: types.hex.test(str) ? execRegex(types.hex, str) : null,
  keyword: types.keyword.test(str) ? execRegex(types.keyword, str) : null
});

getMatches('red #fff green #000000');

输出，缺少红色和#fff：

regexp.lastIndex: 22 
index: 15 
match[0]: #000000

regexp.lastIndex: 14 
index: 9 
match[0]: green

我已经使用match（）测试了正则表达式，并且它们似乎正常工作，但匹配不会为多次出现提供索引。

免责声明：RegExp noob

Answer 1

RegExp test和exec方法都使用RegExp lastIndex属性，因此当您调用test时，您将超过第一个匹配项，然后使用exec查找第二个匹配项。

请参阅此相关的Stack Overflow帖子：Why RegExp with global flag in Javascript give wrong results?

Regex exec（）不会在string中返回第一个匹配项，而是返回后续匹配项

1 个答案: