Platform under construction

Regular Expressions

Advanced

Groups & Quantifiers

Groups capture parts of a match. Quantifiers control how many times a pattern may repeat.

const pattern = /^(?<year>\d{4})-(?<month>\d{2})$/;
const match = "2026-06".match(pattern);

console.log(match?.groups?.year);

Regular Expressions

Groups structure a match; quantifiers control repetition.

Parentheses create groups. Capturing groups save parts of the match so code can read them later.

Named groups make extraction much clearer than relying only on numeric positions. Non-capturing groups use (?:...) when you need grouping but not extraction.

Quantifiers such as *, +, ?, {2} and {2,4} control repetition. Use them carefully to avoid matching too much.

(...)

Capturing group.

(?<name>...)

Named capturing group.

(?:...)

Non-capturing group.

*, +, ?, {n}

Quantifiers that control repetition.

Examples

Regex should be named, scoped and tested against edge cases.

Named extraction

const pattern = /^(?<name>[a-z]+):(?<value>\d+)$/i;
const match = "score:42".match(pattern);

console.log(match?.groups?.value);

Hard-to-read numeric groups

const match = "score:42".match(/^([a-z]+):(\d+)$/i);

console.log(match[2]);

// Which group is match[2] again?

Code patterns

Reusable examples for quick reference.

These examples are intentionally small. Regex becomes useful when each pattern has one clear job and a readable method around it.

Named groups

Extract data by name.

const pattern = /^(?<year>\d{4})-(?<month>\d{2})$/;
const match = "2026-06".match(pattern);
console.log(match.groups.year);

Non-capturing group

Group choices without storing them.

const pattern = /^(?:draft|ready|archived)$/;

One or more

+ requires at least one match.

const pattern = /^\d+$/;

Optional part

? makes a section optional.

const pattern = /^color-#[0-9a-f]{6}$/i;

Rules that matter

Make the pattern purpose visible outside the pattern.

Regular expressions are compact by design. Good JavaScript around the pattern is what makes them safe to maintain.

Use named groups for extraction

Names make matches self-documenting.

Use non-capturing groups for structure

Do not capture values you will not use.

Choose quantifiers precisely

* allows zero, + requires at least one.

Beware greedy matching

Greedy quantifiers can consume more than expected.

Validate optional parts carefully

? can make invalid input look valid.

Keep extracted data validated

A matched string is not always a safe value.

Production thinking

A regex without tests is a guess with punctuation.

Why does this matter?

Groups turn regex from yes/no matching into structured extraction.

Accessibility

Extracted labels or values should be checked before they are shown to users.

Production note

Production extraction patterns should use named groups and cover invalid input in tests.

SEO note

Regex extraction can help normalize slugs or metadata, but output should remain predictable.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Allow hyphens in the name group.
Make the value group optional and inspect the result.
Change the capturing group into a non-capturing group.

Practice assignment

Do this before moving to the next topic.

Write one capturing group.
Write one named group.
Use one quantifier with an exact count.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Groups & Quantifiers.