Understanding Regex Capture Groups and Backreferences
What Are Capture Groups?
Capture groups let you extract specific parts of a match. They're created using parentheses ().
Basic Capture Groups
`` Pattern: (\d{3})-(\d{4}) Text: Call 555-1234 Group 0 (full match): 555-1234 Group 1: 555 Group 2: 1234
`
Using Groups in JavaScript
`javascript
const text = "John Smith (john@email.com)";
const pattern = /(\w+) (\w+) \((.+)\)/;
const match = text.match(pattern);
console.log(match[1]); // "John"
console.log(match[2]); // "Smith"
console.log(match[3]); // "john@email.com"
`
Named Capture Groups
Use (? for more readable code:
`javascript
const pattern = /(?
const match = "John Smith".match(pattern);
console.log(match.groups.first); // "John"
console.log(match.groups.last); // "Smith"
`
Non-Capturing Groups
Use (?:...) when you need grouping but don't need to capture:
` Pattern: (?:https?://)?www\.example\.com
`
This groups the protocol but doesn't capture it.
Backreferences
Reference captured groups within the same pattern:
Finding Repeated Words
` Pattern: \b(\w+)\s+\1\b Text: the the quick brown fox Matches: "the the"
`
The \1 refers back to what group 1 captured.
Matching Quoted Strings
` Pattern: (["']).*?\1 Matches: 'single' and "double" quoted strings
`
Practical Examples
Swap First and Last Name
`javascript
const text = "Smith, John";
const result = text.replace(/(\w+), (\w+)/, "$2 $1");
// Result: "John Smith"
`
Format Phone Numbers
`javascript
const phone = "5551234567";
const formatted = phone.replace(/(\d{3})(\d{3})(\d{4})/, "($1) $2-$3");
// Result: "(555) 123-4567"
`
Extract Date Components
`javascript
const date = "2025-01-15";
const pattern = /(?
const { year, month, day } = date.match(pattern).groups;
``
Tips for Using Groups