关于regex：如何访问javascript正则表达式中匹配的组？

How do you access the matched groups in a JavaScript regular expression?

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

1
2
3
4
5
6
7

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 (!!!)

我做错什么了？

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

1	"date format_%A"

报告"%a"未定义似乎是一个非常奇怪的行为，但它与此问题没有直接关系，因此我打开了一个新的行为，为什么匹配的子字符串在javascript中返回"未定义"？.

问题是，console.log采用了像printf语句一样的参数，由于我记录的字符串("%A"有一个特殊值，所以它试图找到下一个参数的值。

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

1
2
3
4

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

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

1
2
3
4
5
6
7
8
9
10

var myString ="something format_abc";
var myRegexp = /(?:^|\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);
}

相关讨论

这里有一个方法可以用来得到n？每个匹配的捕获组：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);

相关讨论

这对其他人来说是一个高得多的答案，因为它正确地显示了所有匹配的迭代，而不是只显示一个。
MNN是正确的。如果"g"标志不存在，这将产生一个无限循环。要非常小心这个功能。
我对此进行了改进，使其类似于python的re.findall()。它将所有匹配项组合成一个数组。它还修复了全局修饰符的无限循环问题。jfiddle.net/ravishi/mbwpv
有一个很好的方法可以避免无休止的while循环：不要使用它们：)这里有一个很好的例子，我们将匹配限制为最大10000：ou out_uu:for(i=0；i<10000；i++)list=regex.exec(string)；if(list==null)break_out match_list.push(list[index])；
@Michaelmikowski现在你已经隐藏了你的无限循环，但是你的代码会运行缓慢。我认为最好以一种不好的方式进行代码中断，这样您就可以在开发中捕获它。加入一些BS最大迭代是草率的。隐藏问题而不是解决问题的根本原因不是答案。
@华莱士：我在上一篇文章的最后一点上错过了这个：5。如果循环没有中断就退出，代码可以也应该发出警告。这突出显示了不破坏代码的问题。它一点也不"马虎"。
@迈克尔米科夫斯基，当你没有达到执行极限的时候，速度并不是很慢。当你在的时候，它显然慢得多。我不是说你的代码不起作用，我是说在实践中我认为它会造成更多的伤害而不是好处。在开发环境中工作的人会看到代码在没有负载的情况下正常工作，尽管执行了10000个不必要的代码块。然后他们将把它推出到生产环境中，并想知道为什么他们的应用程序会在负载下停机。在我的经验中，如果事情以一种明显的方式中断，并且在开发周期的早期发生，那就更好了。
@Wallacer确信当您达到执行限制时代码会变慢，但这就是为什么在开发过程中出现这种情况时会发出警告(甚至是异常)的原因。但当您进入生产环境时，代码更耐用。这类似于使用setinterval和setimout。我的建议是永远不要使用setinterval，因为它是一个固有的危险构造。相反，如果需要的话，使用setTimeout并让例程自己调用。
@这里的Wallacer是另一个例子：我修补了UglifyJS以供内部使用。这个管理器以前有一个while循环来选择唯一的键，但是如果找不到唯一的键，它就会变成一个无止境的循环。在对其进行重构以将搜索限制为1000个循环时，如果它仍然找不到唯一键，则它具有以下代码：throw"1000次迭代后找不到唯一键"；。现在它显然失败了，而不是永远默默地循环。
@迈克尔米科夫斯基只是翻了翻我以前的评论，发现我从来没有在这里回复过。当然，在最坏的情况下，使用max迭代中断来防止循环，以明显的方式失败总比什么都没有好。首先，看看实际的算法，找出它为什么没有完成，以及它是否可以更改为始终完成。无限循环是糟糕算法设计的一个症状，在几乎所有情况下，都有比"如果我们尝试了太多次就中断"更好的修复方法。这是一个懒惰的黑客解决方案。有没有地方确定，但一般不是推荐的解决方案
@迈克尔米科夫斯基和你最初的评论的主要问题是在负载下性能的缺乏，事实上，它是沉默的。抛出一个异常而不是破坏是好的，所以你抓住了这个问题。修补uglify的一个例子完全忽略了主要问题，即加载。如果代码永远不会在负载下运行，谁在乎呢。如果它运行在重负载系统上的nodejs中，那么它很重要。很多人都会这样盲目地复制他们找到的代码，所以我觉得这值得一提。
@Wallecer我认为我们同意所有的最佳实践。我只是认为，如果你能在一开始就避免无休止的循环条件。例如，不要使用"setInterval"，而是使用"setTimeout"。或者使用for循环而不是while循环。是的，丑陋的改变是一个丑陋的-非常廉价的-解决方案。我没有时间让代码更正确，这不值得花这么多钱。现在，如果我在代码中提供数十亿个请求，那么这当然会改变：)

1
2
3

var myString ="something format_abc";
var arr = myString.match(/\bformat_(.*?)\b/);
console.log(arr[0] +"" + arr[1]);

\b不是完全一样的东西。(它适用于--format_foo/，但不适用于format_a_b，但我想展示一种替代你的表达方式，这很好。当然，match呼叫是很重要的。

相关讨论

关于上面的多匹配括号示例，我在没有得到我想要的答案之后，正在这里寻找答案：

1	var matches = mystring.match(/(?:neededToMatchButNotWantedInResult)(matchWanted)/igm);

在看了上面while和.push()中稍微复杂的函数调用之后，我突然意识到，用mystring.replace()可以非常优雅地解决这个问题(替换不是重点，甚至还没有完成，第二个参数的干净的内置递归函数调用选项是！)：

1
2
3
4

var yourstring = 'something format_abc something format_def something format_ghi';

var matches = [];
yourstring.replace(/format_([^\s]+)/igm, function(m, p1){ matches.push(p1); } );

在这之后，我想我再也不会用.match()来处理任何事情了。

最后但同样重要的是，我发现有一行代码对我来说很好(JSES6)：

1
2
3
4
5
6

let reg = /#([\S]+)/igm; // Get hashtags.
let string = 'mi alegría es total! ???
#fiestasdefindea?o #PadreHijo #buenosmomentos #france #paris';

let matches = (string.match(reg) || []).map(e => e.replace(reg, '$1'));
console.log(matches);

这将返回：

1	['fiestasdefindea?o', 'PadreHijo', 'buenosmomentos', 'france', 'paris']

你的语法可能不是最好的。ff/gecko将regexp定义为函数的扩展。(ff2一直到typeof(/pattern/) == 'function')

这似乎是特定于FF——即，Opera和Chrome的，都有例外。

相反，使用前面提到的任何一种方法：RegExp#exec或String#match。它们提供相同的结果：

1
2
3
4
5
6

var regex = /(?:^|\s)format_(.*?)(?:\s|$)/;
var input ="something format_abc";

regex(input); //=> [" format_abc","abc"]
regex.exec(input); //=> [" format_abc","abc"]
input.match(regex); //=> [" format_abc","abc"]

本答案中使用的术语：

match表示像这样对字符串运行regex模式的结果：someString.match(regexPattern)。
匹配的模式表示输入字符串的所有匹配部分，这些匹配部分都位于匹配数组中。这些都是输入字符串中模式的实例。
匹配的组表示要捕获的所有组，在regex模式中定义。(括号内的模式，如：/format_(.*?)/g，其中(.*?)是一个匹配的组。)这些模式位于匹配的模式中。

描述

要访问匹配的组，在每个匹配的模式中，您需要一个函数或类似的东西来迭代匹配。有许多方法可以做到这一点，正如许多其他答案所示。大多数其他答案都使用while循环迭代所有匹配的模式，但我认为我们都知道这种方法的潜在危险。有必要与new RegExp()进行匹配，而不仅仅是模式本身，后者只在注释中提到。这是因为.exec()方法的行为类似于一个生成器函数——它每次匹配时都会停止，但在下次.exec()调用时，会使其.lastIndex从那里继续。

代码示例

下面是一个函数searchString的示例，它返回所有匹配模式的Array，其中每个match是一个Array，具有所有包含匹配组。我没有使用while循环，而是提供了使用Array.prototype.map()函数和更高性能的方法(使用普通的for循环)的示例。

简洁的版本(更少的代码，更多的句法糖分)

由于它们基本上实现了forEach循环，而不是更快的for循环，因此性能较差。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Concise ES6/ES2015 syntax
const searchString =
(string, pattern) =>
string
.match(new RegExp(pattern.source, pattern.flags))
.map(match =>
new RegExp(pattern.source, pattern.flags)
.exec(match));

// Or if you will, with ES5 syntax
function searchString(string, pattern) {
return string
.match(new RegExp(pattern.source, pattern.flags))
.map(match =>
new RegExp(pattern.source, pattern.flags)
.exec(match));
}

let string ="something format_abc",
pattern = /(?:^|\s)format_(.*?)(?:\s|$)/;

let result = searchString(string, pattern);
// [[" format_abc","abc"], null]
// The trailing `null` disappears if you add the `global` flag

性能版本(更多的代码，更少的语法成分)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

// Performant ES6/ES2015 syntax
const searchString = (string, pattern) => {
let result = [];

const matches = string.match(new RegExp(pattern.source, pattern.flags));

for (let i = 0; i < matches.length; i++) {
result.push(new RegExp(pattern.source, pattern.flags).exec(matches[i]));
}

return result;
};

// Same thing, but with ES5 syntax
function searchString(string, pattern) {
var result = [];

var matches = string.match(new RegExp(pattern.source, pattern.flags));

for (var i = 0; i < matches.length; i++) {
result.push(new RegExp(pattern.source, pattern.flags).exec(matches[i]));
}

return result;
}

let string ="something format_abc",
pattern = /(?:^|\s)format_(.*?)(?:\s|$)/;

let result = searchString(string, pattern);
// [[" format_abc","abc"], null]
// The trailing `null` disappears if you add the `global` flag

我还没有将这些备选方案与前面在其他答案中提到的方案进行比较，但我怀疑这种方法的性能和故障安全性不如其他方法。

不需要调用exec方法！您可以直接在字符串上使用"match"方法。只是不要忘记括号。

1
2
3

var str ="This is cool";
var matches = str.match(/(This is)( cool)$/);
console.log( JSON.stringify(matches) ); // will print ["This is cool","This is"," cool"] or something like that...

位置0有一个包含所有结果的字符串。位置1有括号表示的第一个匹配项，位置2有括号中隔离的第二个匹配项。嵌套的圆括号很棘手，所以要小心！

相关讨论

只有当您有一对括号时才实用的一行代码：

1	while ( ( match = myRegex.exec( myStr ) ) && matches.push( match[1] ) ) {};

相关讨论

使用您的代码：

1 2	console.log(arr[1]); // prints: abc console.log(arr[0]); // prints: format_abc

编辑：Safari 3，如果重要的话。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

String#matchAll(见阶段3草案/2018年12月7日提案)，简化了对匹配对象中所有组的访问(请注意，组0是整个匹配，而更多组对应于模式中的捕获组)：

With matchAll available, you can avoid the while loop and exec with /g... Instead, by using matchAll, you get back an iterator which you can use with the more convenient for...of, array spread, or Array.from() constructs

此方法生成类似于c_中的Regex.Matches，python中的re.finditer，php中的preg_match_all。

请参阅JS演示(在Google Chrome 73.0.3683.67(官方版本)、beta(64位)中测试)：

1
2
3

var myString ="key1:value1, key2-value2!!@key3=value3";
var matches = myString.matchAll(/(\w+)[:=-](\w+)/g);
console.log([...matches]); // All match with capturing group values

console.log([...matches])显示

enter image description here

您还可以使用

1
2
3
4
5
6
7

let matchData ="key1:value1, key2-value2!!@key3=value3".matchAll(/(\w+)[:=-](\w+)/g)
var matches = [...matchData]; // Note matchAll result is not re-iterable

console.log(Array.from(matches, m => m[0])); // All match (Group 0) values
// => ["key1:value1","key2-value2","key3=value3" ]
console.log(Array.from(matches, m => m[1])); // All match (Group 1) values
// => ["key1","key2","key3" ]

注意：请参见浏览器兼容性详细信息。

相关讨论

即使我同意Philo的建议，您的代码也适用于我(Mac上的ff3)，regex可能是：

1	/\bformat_(.*?)\b/

(当然，我不确定，因为我不知道regex的上下文。)

相关讨论

您不需要显式循环来解析多个匹配项-将替换函数作为第二个参数传递，如：String.prototype.replace(regex, func)中所述：

1
2
3
4
5
6
7

m0参数表示完全匹配的子串{0}和{1}等，m1表示第一个匹配组，即在regex中括在括号内的部分，第一个匹配是0。position是字符串中找到匹配组的起始索引——在本例中未使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*Regex function for extracting object from"window.location.search" string.
*/

var search ="?a=3&b=4&c=7"; // Example search string

var getSearchObj = function (searchString) {

var match, key, value, obj = {};
var pattern = /(\w+)=(\w+)/g;
var search = searchString.substr(1); // Remove '?'

while (match = pattern.exec(search)) {
obj[match[0].split('=')[0]] = match[0].split('=')[1];
}

return obj;

};

console.log(getSearchObj(search));

有了ES2018，您现在可以使用命名组来String.match()，使您的regex更加明确它试图做什么。

1
2
3
4
5

const url =
'https://stackoverflow.com/questions/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular-expression?some=parameter';
const regex = /(?<protocol>https?):\/\/(?<hostname>[\w-\.]*)\/(?<pathname>[\w-\./]+)\??(?<querystring>.*?)?$/;
const { groups: segments } = url.match(regex);
console.log(segments);

你会得到

{protocol:"https", hostname:"stackoverflow.com", pathname:"questions/432493/how-do-you-access-the-matched-groups-in-a-javascript-regular-expression", querystring:"some=parameter"}

< /块引用>< /块引用>