JavaScript Regex Groups – Capturing, Non-Capturing & Named Groups

Groups allow you to treat multiple characters as a single unit, capture substrings, and apply quantifiers to patterns. They are the key to extracting specific parts of a matched string.

There are three main types:

1. Capturing group (...) — captures the matched text for later use
2. Non-capturing group (?:...) — groups without capturing
3. Named capturing group (?<name>...) — captures with a descriptive name

📊 Groups Visual Reference

💻 Example 1 — Capturing Groups

Full match: 2026-06-12
Year: 2026
Month: 06
Day: 12
Username: riya
Domain: wohotech.in

💻 Example 2 — Named Capturing Groups

2026
06
12
12/06/2026
12/06/2026

💻 Example 3 — Non-Capturing Groups (?:...)

true
true
[ '2026-06', '2026', '06', index: 0, ... ]
[ '2026-06', index: 0, ... ]
true
true
false

💻 Example 4 — Groups in replace() with References

Riya Sharma
****-****-****-3456
<strong>JavaScript</strong> <strong>is</strong> <strong>awesome</strong>

💻 Example 5 — Alternation with Groups: (a|b)

https://wohotech.in: true
ftp://files.com: true
file:///local: true
ws://socket.io: false
+91 9876543210: true
+1 1234567890: true
+99 1234567890: false

📋 Group Types Quick Reference

⚠️ Common Mistakes

❌ Mistake 1 — Group Index Off by One

hello world
hello
world

❌ Mistake 2 — Using Capturing Groups When You Don't Need Captures

❌ Mistake 3 — Forgetting g Flag with match() Loses Group Info

[ '2026-01-15', '2026-06-12' ]
2026 01 15
2026 06 12

🎯 Key Takeaways

• (...) captures the matched text — accessible via match[1], match[2], etc.
• (?:...) groups without capturing — use for alternation or quantifiers without storing
• (?<name>...) named groups — accessible via match.groups.name (clearer than numbered)
• In replace(), reference captures with $1, $2 or $<name> for named groups
• With the g flag, match() returns all full matches but drops group captures — use matchAll() instead
• Group indexes start at 1 — index 0 is always the full match

❓ Interview Questions

Q1. What is a capturing group in regex? > A capturing group (...) matches the enclosed pattern and stores the matched text. You access it via result[1], result[2], etc. in the match array. Index 0 is always the full match.

Q2. What is a non-capturing group (?:...)? > A non-capturing group groups the pattern for alternation or quantifiers without storing the matched text. It reduces memory overhead and avoids polluting the match array when you don't need the captured value.

Q3. What is a named capturing group? > (?<name>pattern) captures and labels the match with a name. Access it via result.groups.name. More readable than numbered groups, especially in complex patterns. Referenced in replace() as $<name>.

Q4. How do you use capture group values in replace()? > Use $1, $2, etc. for numbered groups or $<name> for named groups in the replacement string. Example: "Sharma, Riya".replace(/^(\w+),\s*(\w+)$/, "$2 $1") → "Riya Sharma".

Q5. Why does match() with the g flag lose group information? > With g, match() returns an array of all full match strings. Capturing group data is only available in non-global matches or when using exec() in a loop or matchAll(), which yields each match object with full group information.

Q6. How is matchAll() different from match()? > matchAll() returns an iterator of all match objects (each with full group info) — like running exec() in a loop. match() with g returns only the array of full matches, losing group captures.

Q7. What is alternation in groups — (a|b)? > The | inside a group means "or" — match either the left or right alternative. (cat|dog) matches "cat" or "dog". Without grouping, cat|dog has lower precedence — use groups to scope alternation correctly.

Q8. How many capturing groups can a regex have? > Practically unlimited. Each () increments the group counter. Named groups must have unique names within the same pattern. Excessive groups slow down the regex engine — use non-capturing (?:...) when capture is not needed.