Regex Fundamentals
Regular Expressions (Regex) are state machines designed for ultra-fast text processing. Master the syntax of character classes, anchors, and quantifiers to build production-grade validation and search systems.
The Two Notations
In JavaScript, you can define regex using **Literal Notation** or the **RegExp Constructor**. Literal notation is more concise and benefits from compilation at load time. Use the Constructor when you need to build a pattern dynamically based on variables or user input, but remember to escape backslashes (e.g., `\\d` becomes `\\\\d`).
// 1. Literal Notation (Compiles during script load)
const literalRegex = /\d{3}-\d{3}/gi;
// 2. Constructor Notation (Compiles at runtime)
// Useful for dynamic patterns from user input
const dynamicPart = "error";
const constructorRegex = new RegExp(`\\b${dynamicPart}\\b`, "i");
// Testing the patterns
const log = "Error at 123-456";
console.log(literalRegex.test(log)); // true
console.log(constructorRegex.test(log)); // trueCharacter Classes & Word Boundaries
Character classes like `\d` (digits), `\w` (word characters), and `\s` (whitespace) are shorthand for common ranges. Combining these with custom sets `[...]` and anchors like `\b` (word boundary) or `^` (start of string) allows you to define rigid schemas for raw text data.
// Character Classes & Boundaries
const pattern = /\b[A-Z]{2,}\d+\b/g;
/*
Matches:
- \b : Word boundary
- [A-Z]{2,} : 2 or more uppercase letters
- \d+ : 1 or more digits
- \b : Word boundary
*/
const text = "ID: XY123, order code: ABC999, invalid: A1";
console.log(text.match(pattern)); // ["XY123", "ABC999"]Technical Insight: The Regex Engine
Most modern engines, including V8, use a **Nondeterministic Finite Automaton (NFA)** approach. This allows for powerful features like backtracking and lookaheads. However, poorly structured patterns (like nested quantifiers) can lead to "Catastrophic Backtracking," which can freeze a browser thread. Professional regex engineering requires balancing power with performance.
Regex Foundational Checklist:
- ✅ **Literal vs Constructor:** Use literals for static patterns, constructors for dynamic ones.
- ✅ **Anchors:** Always use `^` and `$` for full-string validation to prevent partial match security holes.
- ✅ **Boundaries:** Use `\b` to avoid matching substrings inside larger words.
- ✅ **Case Sensitivity:** Use the `i` flag for case-insensitive searches where appropriate.
- ✅ **Escaping:** Remember to escape reserved characters like `.` `*` `+` `?` `(` `)` if you want to match them literally.