JavaScript Regex ^ and $ Anchors
Anchors are special characters in regular expressions that allow you to match positions within a string rather than actual characters. The two primary anchors
Introduction to Anchors in JavaScript
Anchors are special characters in regular expressions that allow you to match positions within a string rather than actual characters. The two primary anchors in JavaScript are ^ (caret) and $ (dollar sign). The ^ anchor asserts that the match must start at the beginning of the string, while the $ anchor asserts that the match must occur at the end of the string.
A key idea to grasp first: anchors are zero-width. They match a position between characters, not a character itself, so they never consume any text. That is why /^abc$/ matches the three-character string "abc" and not a four- or five-character one — the ^ and $ add no length to the match. The same property lets you use an anchor in replace to insert text at the very start or end of a string without removing anything:
This page covers matching the start and end of a string, combining both anchors for exact full-string matching, how the m (multiline) flag changes their behavior, and how anchors work with test() and match().
The ^ Anchor: Matching the Start of a String
The ^ anchor is used to check if a string starts with a specific pattern.
Using the ^ Anchor
In this example, ^Hello ensures that the string starts with "Hello". The string 'Hello, world!' matches the pattern, but 'Say Hello, world!' does not because "Hello" is not at the beginning.
Practical Example: Validating an Email Address Start
This regex checks if an email address starts with a valid username. The string '[email protected]' matches, and '[email protected]' also matches because both start with a valid username pattern before the @ symbol.
The $ Anchor: Matching the End of a String
The $ anchor is used to check if a string ends with a specific pattern.
Using the $ Anchor
In this example, world!$ ensures that the string ends with "world!". The string 'Hello, world!' matches the pattern, but 'Hello, world' does not because it lacks the exclamation mark at the end.
Practical Example: Validating a File Extension
This regex checks if a filename ends with ".txt". The string 'document.txt' matches, while 'document.pdf' does not.
Anchors (^ and $) in JavaScript regular expressions allow you to precisely match the start or end of a string, ensuring accurate text validation and manipulation.
Combining ^ and $ for Exact Matches
By combining ^ and $, you can create a regex that matches a string exactly, from start to finish.
Using Both Anchors
In this example, ^Hello, world!$ ensures that the entire string matches "Hello, world!". Only the string 'Hello, world!' matches exactly.
Practical Example: Validating an Exact Pattern
This regex ensures the email address is in a valid format from start to end. It checks for a valid username, an "@" symbol, a domain name, and a top-level domain.
Using Anchors for Precise Validation
Anchors are particularly useful for validating input where you need to ensure that the entire string conforms to a pattern. For example, use ^ and $ to validate phone numbers, zip codes, or any fixed format input.
Example: Validating a U.S. Phone Number
This regex ensures that the phone number is in the format (123) 456-7890. It uses ^ to assert the start and $ to assert the end, ensuring that the entire string matches the specified pattern.
Anchors and the Multiline Flag (m)
By default, ^ and $ match only the very start and very end of the entire string, even when that string contains line breaks. Add the m (multiline) flag and the meaning changes: ^ and $ then also match at the start and end of each line.
Without m, /^.+$/g returns null because . does not match the newline characters, so no single line spans the whole string from its start to its end. With m, each line is matched independently. If you are working with multi-line input, the m flag is almost always what you want — see Multiline mode of anchors, flag "m" for a deeper look.
Anchors with test() and match()
Anchors behave the same whichever method you call; the difference is what each method returns.
regexp.test(str)returns a boolean — ideal for validation ("does this string start/end the right way?").str.match(regexp)returns the matched text (or an array with thegflag), ornullwhen there is no match — useful when you also need the captured value.
Because \d+$ is anchored to the end, it grabs the trailing number 42 and nothing else. When you only need a yes/no answer, prefer test(); reach for match() when you need the value back.
If you want to match a specific character at a boundary between a word and non-word character rather than the string edge, use the \b word boundary instead of ^ or $.
Conclusion
Anchors are powerful tools in JavaScript regular expressions that allow you to match positions within a string. By mastering the ^ and $ anchors, you can create precise and effective patterns for validating and manipulating strings. Whether you're ensuring a string starts or ends with a specific pattern, or matching an entire string exactly, anchors are essential for robust regex operations.