JS RegExp Metachars

Metacharacters are symbols within a regex pattern that carry special meaning rather than matching themselves literally -- . matches any character, ^ anchors to the start, $ anchors to the end, and | means or. Knowing these building blocks is essential to reading or writing any non-trivial pattern.

In this page:

The Dot: Matching Any Character
Anchors: ^ and $
Alternation with |
Escaping Special Characters
Word Boundaries with \b

The Dot: Matching Any Character

. matches any single character except a newline by default -- c.t matches "cat", "cot", "c8t", or literally any three-character sequence starting with c and ending with t, which is powerful but can be overly broad if you actually meant a specific character.

Note: Escape the dot as \. whenever you specifically want to match a literal period character, like in a file extension or decimal point.

Warning: An un-escaped . in a pattern meant to match a literal period (like matching a file extension) will actually match any character in that position, not just a period.

Example: The Dot: Matching Any Character

javascript

console.log(/c.t/.test("cat")); // true
console.log(/c.t/.test("c8t")); // true, . matches any character

Anchors: ^ and $

^ anchors a match to the very start of the string (or line, with m), and $ anchors to the very end -- combining both, ^pattern$ requires the entire string to match the pattern exactly, not just contain it somewhere within.

Note: Use ^pattern$ together whenever you need to validate that an entire input matches a pattern exactly, rather than just containing a matching substring anywhere.

Warning: Forgetting one of the two anchors when you meant "the whole string must match" lets a pattern succeed on a string that only partially matches somewhere within it.

Example: Anchors: ^ and $

javascript

console.log(/^cat$/.test("cat"));      // true, exact match
console.log(/^cat$/.test("concatenate")); // false, must match entire string

Alternation with |

| means "or" within a pattern -- cat|dog matches either "cat" or "dog", and combined with grouping parentheses, gr(a|e)y matches both "gray" and "grey" by allowing either character in that one position.

Note: Wrap alternation in parentheses when it should apply only to part of a larger pattern, rather than the entire pattern on either side of the |.

Warning: Un-grouped alternation applies to everything on either side of the | across the whole pattern, which is a common source of an alternation matching much more broadly than intended.

Example: Alternation with |

javascript

console.log(/cat|dog/.test("I have a dog"));
console.log(/gr(a|e)y/.test("grey"));
console.log(/gr(a|e)y/.test("gray"));

Escaping Special Characters

Any metacharacter (. ^ $ | ? * + ( ) [ ] { } \) needs a backslash before it to be treated as a literal character rather than its special regex meaning -- essential whenever your pattern needs to match one of these symbols as actual text.

Note: When building a regex pattern from a user-supplied string, escape every special character in it first, or the user's input could unintentionally alter the pattern's structure.

Warning: Forgetting to escape a special character that appears literally in the text you want to match (like a $ in a price, or a . in a domain name) causes the pattern to behave unexpectedly.

Example: Escaping Special Characters

javascript

console.log(/3\.14/.test("3.14"));  // true, literal dot
console.log(/3\.14/.test("3x14"));  // false

Word Boundaries with \b

\b matches a position between a word character and a non-word character (or the start/end of the string), without matching any character itself -- \bcat\b matches the standalone word cat but not cat as part of category or scatter.

Note: Use \b around a word you specifically want to match as a whole word, avoiding accidental matches inside longer words that merely contain that substring.

Warning: Forgetting \b when matching a short word is a common cause of an unintended match inside a longer word that happens to contain that same substring.

Example: Word Boundaries with \b

javascript

console.log(/\bcat\b/.test("I have a cat"));   // true, whole word
console.log(/\bcat\b/.test("category"));       // false, part of a longer word

Common Mistakes

Forgetting that a metacharacter needs to be escaped with a backslash (like \. for a literal period) when you actually want to match that exact character, not its special meaning.
Using . expecting it to match a literal period, when it actually matches any single character at all unless escaped.
Placing | (alternation) without parentheses to group it correctly, causing it to apply to the whole pattern rather than just the intended part.

Chapter Summary

. matches any single character (except a newline, by default).
^ and $ anchor a match to the start and end of the string (or line, with the m flag) respectively.
| means "or", matching either the pattern before or after it.

Browser Support

All standard regex metacharacters are supported in every modern browser and have been part of JavaScript regex since its earliest implementation.

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS RegExp Classes Next Lesson → JS RegExp Assertions

JS RegExp Metachars

The Dot: Matching Any Character

Anchors: ^ and $

Alternation with |

Escaping Special Characters

Word Boundaries with \b

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code