Platform under construction

Regular Expressions

Advanced

Classes & Assertions

Character classes describe allowed characters. Assertions describe positions without consuming characters.

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

console.log(pattern.test("#ffcc00"));

Regular Expressions

Classes match characters; assertions match positions.

Character classes such as [a-z], \d and \s match categories of characters. Negated classes such as [^0-9] match anything except that set.

Assertions such as ^, $, \b and lookarounds do not consume characters. They assert where a match may happen.

Classes and assertions are the building blocks of useful validation patterns, but they should remain readable and well-scoped.

[abc]

Matches one character from the set.

\d / \w / \s

Common shorthand classes for digits, word characters and whitespace.

^ and $

Start and end anchors.

\b

Word boundary assertion.

Examples

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

Full-string validation with anchors

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

hexPattern.test("#ffcc00");

Partial validation

const hexPattern = /#[0-9a-f]{6}/i;

hexPattern.test("bad #ffcc00 extra"); // true

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.

Hex color

Class ranges with anchors and a quantifier.

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

Digits only

Use \d with full-string anchors.

const numberPattern = /^\d+$/;

Word boundary

Match whole words, not substrings.

const pattern = /\bcss\b/i;

Negative class

Disallow a set of characters.

const noSpaces = /^[^\s]+$/;

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 classes for allowed characters

[a-z] and \d are character rules.

Use anchors for validation

Otherwise a valid fragment can pass inside invalid text.

Use boundaries for words

\b avoids matching inside longer words.

Be careful with \w

It is not the same as every letter in every language.

Keep lookarounds readable

They are powerful but can obscure intent.

Test negative cases

Validation regexes need invalid examples too.

Production thinking

A regex without tests is a guess with punctuation.

Why does this matter?

Classes and assertions decide whether a regex is precise or accidentally permissive.

Accessibility

Validation should explain which characters are allowed instead of only saying invalid.

Production note

Production regex validation should include tests for valid and invalid examples.

SEO note

Slug and color-style validation can protect clean URLs and structured front-end data.

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 3-character hex colors.
Remove the anchors and test extra text.
Replace the class with \w and explain why that is wrong.

Practice assignment

Do this before moving to the next topic.

Write one character class.
Write one anchored validation pattern.
Use one word boundary assertion.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Classes & Assertions.