- Published at
- Updated at
- Reading time
It's regular expression time again. 🎉 I don't remember where I saw the following discovery, but I'm astonished that I didn't know about non-capturing groups after years of using regular expressions.
If you already know what non-capturing groups in regular expressions are, here's the syntax: it's
(?:) as in
To understand how non-capturing groups work, let's look at an example highlighting the well-known capturing groups.
// a regular expression including three capture groups const regex = /(Jane|John|Alison)\s(.*?)\s(Smith|Smuth)/;
The regular expression above defines that I'm looking for a very particular name combination. The name should begin with
Alison, end with
Smuth but include a middle name between the first and last name.
const result = regex.exec('Jane Isabell Smith'); console.log(result); // 'Jane Isabell Smith' console.log(result); // 'Jane' console.log(result); // 'Isabell' console.log(result); // 'Smith'
Run the regular expression's
exec method to test if a string is matching the expression. If the string matches the expression, the return value is an array holding all the specific information, otherwise
The array includes the full matching string at index
0 followed by the defined groups (
2, etc.). In this example, the array holds the character sequences matching the three defined capturing groups. Even though you're only interested in the middle name represented by the entry at index
2 you have to deal with the data for all groups.
There's nothing particularly wrong with this approach, but to extract the desired middle name, you have to remember and go back to the original regular expression because the result includes several irrelevant values (
It turns out that you can define non-capturing groups that are not included in the result!
// a regular expression with two non-capturing groups // and one capturing group const regex = /(?:Jane|John|Alison)\s(.*?)\s(?:Smith|Smuth)/; const result = regex.exec('Jane Isabell Smith'); console.log(result); // 'Jane Isabell Smith' console.log(result); // 'Isabell' const notMatchingResult = regex.exec('nope'); console.log(notMatchingResult); // null
(?:) syntax to match non-capturing groups in your strings. Non-capturing groups are excluded from the result.
When dealing with complex regular expressions, this feature is beneficial because it simplifies the result handling! 🎉
Edited: As Dave Newson pointed out, there are also named capture groups on their way! The "group future" looks bright!
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 3 days ago.