SESSION 039 — Regular Expressions

CONCEPTS.UNLOCKED

/./

Regular Expressions

Patterns for matching text. A regex describes a set of strings. /hello/ matches "hello" anywhere. They're terse, powerful, and used in every programming language.

[a-z]

Character Classes

[0-9] any digit. [a-f] hex letters. [A-Za-z] any letter. \d digit shorthand. \w word char. \s whitespace. Building blocks of patterns.

+*?

Quantifiers

+ one or more. * zero or more. ? optional (zero or one). {3,6} between 3 and 6 times. Control how many times a pattern repeats.

(|)

Groups & Alternation

(abc|def) matches "abc" or "def". Parentheses group patterns and create capturing groups — extracting matched parts for use in your code.

🎯

Practical Patterns

Hex colors: /^#[0-9A-Fa-f]{6}$/. RGB: /^rgb$\d{1,3},\d{1,3},\d{1,3}$$/. Filenames, emails, URLs — all validatable with regex.

⚡

Regex Methods

.test() returns true/false. .match() returns captured groups. .replace() substitutes matches. Three methods that cover 95% of regex use cases.

HANDS-ON.TASKS

Validate Hex Colors

▶

const hexPattern =
  /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/;

hexPattern.test('#FF0000');  // true
hexPattern.test('#f00');     // true (shorthand)
hexPattern.test('banana');   // false
hexPattern.test('#GGGGGG'); // false

^ anchors to start, $ anchors to end — the entire string must match. {3} means exactly 3 characters. The | allows either 3 or 6 hex digits.

Validate RGB Strings

▶

const rgbPattern =
  /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;

$ and $ escape the literal parentheses. \s* allows optional spaces. (\d{1,3}) captures 1-3 digit numbers (the R, G, B values). Three capturing groups extract the actual numbers.

Sanitize Filenames

▶

function sanitizeFilename(name) {
  return name
    .replace(/[<>:"/\\|?*\x00-\x1F]/g, '')
    .replace(/\s+/g, '_')
    .replace(/_{2,}/g, '_')
    .trim();
}

// "My Photo!!.png"  → "My_Photo!!.png"
// "file<>:name.jpg" → "filename.jpg"

The g flag means global — replace ALL matches, not just the first. \x00-\x1F matches control characters. Three .replace() calls chained for a complete sanitizer.

Search Filter Names

▶

function searchFilters(filters, query) {
  const pattern = new RegExp(query, 'i');
  return filters.filter(f => pattern.test(f.name));
}

// searchFilters(allFilters, 'bright')
// → [BrightnessFilter]

new RegExp(query, 'i') creates a regex from a string at runtime. The 'i' flag makes it case-insensitive. Useful when the pattern comes from user input.

Apply to PixelCraft

▶

Wire it all together: validate the color picker input, sanitize export filenames (from Session 25), and add regex-powered search to the filter tools panel.

Close the Ticket

▶

git switch -c feature/PIXELCRAFT-027-regex-validation
git add src/scripts/
git commit -m "Add regex validation for colors and filenames (PIXELCRAFT-027)"
git push origin feature/PIXELCRAFT-027-regex-validation
# PR → Review → Merge → Close ticket ✅

CS.DEEP-DIVE

Regular expressions are formally equivalent to finite automata.

One of the foundational concepts in CS theory.

// The regex /ab*c/ is a state machine:

start → match 'a'
      → match zero or more 'b's
      → match 'c'
      → accept ✅

// This same theory underlies:

Compilers        → lexical analysis
                   (tokenizing source code)
Network filters  → packet matching
Search engines   → pattern matching
Text processing  → every language has it

// Terse but incredibly powerful.

REF.MATERIAL

ARTICLE

Regular Expressions — MDN

Mozilla Developer Network

Complete regex guide: syntax, character classes, quantifiers, groups, assertions, flags, and all regex methods.

REGEXMDNREFERENCE

TOOL

regex101 — Interactive Regex Tester

regex101.com

The best regex tool: live testing, visual explanation of each part, match highlighting, and support for multiple regex flavors.

REGEXINTERACTIVEESSENTIAL

VIDEO

Regular Expressions in 100 Seconds — Fireship

Fireship

Ultra-fast regex overview: syntax, character classes, quantifiers, and the most common practical patterns.

REGEXQUICK

VIDEO

Learn Regular Expressions in 20 Minutes

Web Dev Simplified

Practical regex tutorial: building patterns step by step, testing with .test() and .match(), and common real-world patterns.

REGEXPRACTICAL

ARTICLE

Regular Expressions — javascript.info

javascript.info

Multi-chapter interactive regex tutorial: from basics through lookahead/lookbehind, catastrophic backtracking, and named groups.

REGEXINTERACTIVEDEEP

REGULAR EXPRESSIONS