Regular expressions are the most compact way to search and transform text — and the easiest thing to get subtly wrong. The fix is live testing: type a pattern, watch which text matches, and adjust until it's right. This guide covers the patterns you'll actually use, the classic mistakes, and how to test regex in your browser.
The Core Patterns You'll Actually Use
| Pattern | Meaning | Example |
|---|---|---|
\d | Any digit | \d{4} = 4 digits |
\w | Word character | \w+ = a word |
^ $ | Start / end of string | ^admin = starts with admin |
[...] | Character class | [a-z0-9] = lowercase or digit |
(...) | Capture group | (\d{2})-(\d{2}) |
* + ? | Quantifiers | ab+c = a, one+ b, c |
Classic Mistakes
- Forgetting to escape:
.means "any character" — use\.for a literal dot. - Greedy matching:
.*matches as much as possible; add?(.*?) for lazy matching. - Anchoring confusion:
^/$without themflag only match the whole string, not each line. - Overly broad classes:
\walso matches underscore —[A-Za-z0-9]may be what you meant.
Flags in 30 Seconds
g— global: find all matches, not just the first.i— case-insensitive.m— multiline:^/$match line boundaries.s— dot matches newlines too.u— Unicode mode (needed for emoji-aware classes).
How to Test Regex Online
- Open the tool: go to the regex tester.
- Type your pattern: matches highlight live in the test text as you type.
- Toggle flags: switch
g/i/m/s/uand watch matches change instantly. - Inspect capture groups: each match shows its groups for extraction debugging.
- Preview replacement: type a replacement to see the transformed text before applying it in code.
Tip: start from real input, not an imagined one. Paste actual sample data and test edge cases — empty strings, punctuation, uppercase — before shipping the pattern.
Frequently Asked Questions
Capture Groups and Replacements
Parentheses do double duty: they group parts of a pattern, and they capture whatever matched inside them. Captures are what turn a regex from a filter into a transformation tool — the replacement preview in the tester lets you reference each group by number ($1 is the first group, $2 the second), so you can restructure text without writing a script. Named groups, written (?<year>\d{4}), do the same job with labels you can read six months later.
A useful habit is to build patterns in layers: match the smallest interesting unit first, wrap it in a group, then extend outward. The tester shows each match with its groups listed underneath, so a pattern that captures the wrong slice is obvious immediately instead of after it ships.
A Practical Debugging Loop
When a pattern refuses to match, resist the urge to edit blindly. Test each piece against a minimal sample: does the anchor hold, does the character class accept the literal character you think it does, is the quantifier eating more than expected (greedy .* swallows to the last possible match, while lazy .*? stops at the first). Splitting an unruly pattern into two simple ones is usually faster than debugging one clever monster — and the split version is easier for the next person to read.
Why doesn't my regex match anything?
Check escaping (e.g. \. for dots), anchors, and whether the m flag is needed for line-based input. Testing live shows exactly where the pattern stops matching.
What does the g flag do?
Without g, a regex stops after the first match; with g, it finds every match in the text. The tester highlights all matches only when g is on.
Can a regex be too slow?
Yes — patterns with nested quantifiers like (a+)+ can cause catastrophic backtracking. Keep patterns simple and test against large inputs.
Is my text uploaded when I test regex?
No. The regex tester runs entirely locally in your browser.
How do capture groups work?
Parentheses remember what matched inside them. The replacement preview references them as $1, $2 and so on (or by name with named groups), which is how you rewrite text — swapping date order, stripping prefixes, reformatting fields — without writing any code.
What is the difference between greedy and lazy matching?
A greedy quantifier takes as much as it can; a lazy one (with a trailing ?) takes as little as will still match. On the string abc123def, the pattern <.*> swallows everything between the first and last tag, while <.*?> stops at the first closing bracket.
How do I match text that spans multiple lines?
Add the s flag so the dot also matches newlines, or use a character class like [\s\S] which matches any character including line breaks — the reliable idiom when the s flag is unavailable.
References
- Regular expressions — MDN Web Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions
- Catastrophic backtracking — regular-expressions.info: https://www.regular-expressions.info/catastrophic.html