Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Named capture groups JavaScript Regular Expressions
Named capture groups in JavaScript regular expressions allow you to assign names to captured groups, making your code more readable and maintainable. Instead of accessing groups by index, you can reference them by meaningful names.
Syntax
// Named capture group syntax /(?<name>pattern)/ // Accessing named groups match.groups.name
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>Named Capture Groups</title>
</head>
<body>
<p id="result"></p>
<script>
const text = "The year I graduated was 2012.";
const yearRegex = /(?<year>\d{4})/;
const match = text.match(yearRegex);
if (match) {
document.getElementById("result").innerHTML =
"Extracted year: " + match.groups.year;
}
</script>
</body>
</html>
Extracted year: 2012
Complex Pattern Example
<!DOCTYPE html>
<html>
<head>
<title>Date Parsing with Named Groups</title>
</head>
<body>
<div id="output"></div>
<script>
const dateString = "Today is 2024-03-15";
const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateString.match(dateRegex);
if (match) {
const { year, month, day } = match.groups;
document.getElementById("output").innerHTML =
`Year: ${year}<br>Month: ${month}<br>Day: ${day}`;
}
</script>
</body>
</html>
Year: 2024 Month: 03 Day: 15
Comparison: Regular vs Named Groups
| Feature | Regular Groups | Named Groups |
|---|---|---|
| Access Method | match[1], match[2] |
match.groups.name |
| Readability | Low - index-based | High - descriptive names |
| Maintenance | Fragile - order dependent | Robust - name-based |
Email Parsing Example
<!DOCTYPE html>
<html>
<head>
<title>Email Parser</title>
</head>
<body>
<div id="email-result"></div>
<script>
const email = "Contact us at support@company.com";
const emailRegex = /(?<username>[a-zA-Z0-9]+)@(?<domain>[a-zA-Z0-9]+)\.(?<tld>[a-zA-Z]+)/;
const match = email.match(emailRegex);
if (match) {
const { username, domain, tld } = match.groups;
document.getElementById("email-result").innerHTML =
`Username: ${username}<br>Domain: ${domain}<br>TLD: ${tld}`;
}
</script>
</body>
</html>
Username: support Domain: company TLD: com
Key Benefits
Self-documenting code: Named groups make regular expressions easier to understand.
Maintainable: Adding new groups doesn't break existing code that references groups by name.
Destructuring support: Works seamlessly with ES6 destructuring assignment.
Conclusion
Named capture groups provide a cleaner, more maintainable way to work with regular expression matches in JavaScript. They improve code readability and reduce errors when working with complex patterns.
Updated on: 2026-03-15T23:18:59+05:30
227 Views
Advertisements