如何在 JavaScript 正则表达式中访问匹配的组？

javascript regex

2022-08-29 22:00:23

我想使用正则表达式匹配字符串的一部分，然后访问括号中的子字符串：

    var myString = "something format_abc"; // I want "abc"

    var arr = /(?:^|\s)format_(.*?)(?:\s|$)/.exec(myString);

    console.log(arr);     // Prints: [" format_abc", "abc"] .. so far so good.
    console.log(arr[1]);  // Prints: undefined  (???)
    console.log(arr[0]);  // Prints: format_undefined (!!!)

我做错了什么？

我发现上面的正则表达式代码没有任何问题：我正在测试的实际字符串是这样的：

"date format_%A"

报告“%A”未定义似乎是一个非常奇怪的行为，但它与这个问题没有直接关系，所以我打开了一个新的，为什么匹配的子字符串在JavaScript中返回“未定义”？。

问题是像语句一样获取其参数，并且由于我记录的字符串（）具有特殊值，因此它试图查找下一个参数的值。console.logprintf"%A"

答案 1

您可以像这样访问捕获组：

var myString = "something format_abc";
var myRegexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
var myRegexp = new RegExp("(?:^|\s)format_(.*?)(?:\s|$)", "g");
var match = myRegexp.exec(myString);
console.log(match[1]); // abc

如果有多个匹配项，则可以迭代它们：

var myString = "something format_abc";
var myRegexp = new RegExp("(?:^|\s)format_(.*?)(?:\s|$)", "g");
match = myRegexp.exec(myString);
while (match != null) {
  // matched text: match[0]
  // match start: match.index
  // capturing group n: match[n]
  console.log(match[0])
  match = myRegexp.exec(myString);
}

编辑： 2019-09-10

如您所见，迭代多个匹配项的方法不是很直观。这导致了String.prototype.matchAll方法的提出。这种新方法预计将在 ECMAScript 2020 规范中提供。它为我们提供了一个干净的API并解决了多个问题。它已经开始登陆主要的浏览器和JS引擎，如Chrome 73 + / Node 12 +和Firefox 67 +。

该方法返回一个迭代器，并按如下方式使用：

const string = "something format_abc";
const regexp = /(?:^|\s)format_(.*?)(?:\s|$)/g;
const matches = string.matchAll(regexp);
    
for (const match of matches) {
  console.log(match);
  console.log(match.index)
}

当它返回迭代器时，我们可以说它是懒惰的，这在处理特别大量的捕获组或非常大的字符串时很有用。但是，如果需要，可以使用扩展语法或方法轻松地将结果转换为数组：Array.from

function getFirstGroup(regexp, str) {
  const array = [...str.matchAll(regexp)];
  return array.map(m => m[1]);
}

// or:
function getFirstGroup(regexp, str) {
  return Array.from(str.matchAll(regexp), m => m[1]);
}

同时，虽然此建议得到了更广泛的支持，但您可以使用官方的填充码包。

此外，该方法的内部工作原理很简单。使用生成器函数的等效实现如下所示：

function* matchAll(str, regexp) {
  const flags = regexp.global ? regexp.flags : regexp.flags + "g";
  const re = new RegExp(regexp, flags);
  let match;
  while (match = re.exec(str)) {
    yield match;
  }
}

创建原始正则表达式的副本;这是为了避免在通过多重匹配时由于属性突变而产生的副作用。lastIndex

此外，我们需要确保正则表达式具有全局标志，以避免无限循环。

我也很高兴看到，在提案的讨论中，甚至这个StackOverflow问题也被引用了。

答案 2

下面是一个可用于获取每场比赛的第 n个捕获组的方法：

function getMatches(string, regex, index) {
  index || (index = 1); // default to the first capturing group
  var matches = [];
  var match;
  while (match = regex.exec(string)) {
    matches.push(match[index]);
  }
  return matches;
}


// Example :
var myString = 'something format_abc something format_def something format_ghi';
var myRegEx = /(?:^|\s)format_(.*?)(?:\s|$)/g;

// Get an array containing the first capturing group for every match
var matches = getMatches(myString, myRegEx, 1);

// Log results
document.write(matches.length + ' matches found: ' + JSON.stringify(matches))
console.log(matches);