Regular Expression: Anchors

Summary: in this tutorial, you’ll learn how to use regular expression anchors to match a position before or after characters.

Anchors have special meaning in regular expressions. They do not match any character. Instead, they match a position before or after characters:

•  ^ – The caret anchor matches the beginning of the text.
•  $ – The dollar anchor matches the end of the text.

See the following example:

let str = 'JavaScript';
console.log(/^J/.test(str));Code language: JavaScript (javascript)

Output:

trueCode language: JavaScript (javascript)

The /^J/ match any text that starts with the letter J. It returns true.

The following example returns false because the string JavaScript doesn’t start with the letter S:

let str = 'JavaScript';
console.log(/^S/.test(str));Code language: JavaScript (javascript)

Output:

falseCode language: JavaScript (javascript)

Similarly, the following example returns true because the string JavaScript ends with the letter t:

let str = 'JavaScript';
console.log(/t$/.test(str));Code language: JavaScript (javascript)

Output:

trueCode language: JavaScript (javascript)

You will often need to use anchors ^ and $ to check if a string fully matches a pattern. The following example checks if an input string matches a time format hh:mm like 12:05:

let isValid = /^\d\d:\d\d$/.test('12:05');
console.log(isValid);Code language: JavaScript (javascript)

Output:

trueCode language: JavaScript (javascript)

The following example returns false:

let valid = /^\d\d:\d\d$/.test('12:105');
console.log(valid);Code language: JavaScript (javascript)

Output:

falseCode language: JavaScript (javascript)

Multiline mode of anchors ^ and $: the m flag

The default of the anchor ^ or $ is the single-line mode. In the single-line mode, the anchor ^ and $ matches the beginning and the end of a string.

To enable the multiline mode, you use m flag. In the multiline mode, the ^ or $ anchor matches the beginning or end of the string, or the beginning or end of lines.

The following example returns only the first digit of the multiline string:

let str = `1st line
2nd line
3rd line`;

let re = /^\d/g;
let matches = str.match(re);

console.log(matches);Code language: JavaScript (javascript)

Output:

['1']Code language: JSON / JSON with Comments (json)

If you add the flag m, the anchor ^ will also match the digit at the beginning of the line, like this:

let str = `1st line
2nd line
3rd line`;

let re = /^\d/gm;
let matches = str.match(re);

console.log(matches);Code language: JavaScript (javascript)

Output:

['1', '2', '3']Code language: JSON / JSON with Comments (json)

Summary

• Use the ^ anchor to match the beginning of the text.
• Use the $ anchor to match the end of the text.
• Use the m flag to enable the multiline mode that instructs the ^ and $ anchors to match the beginning and end of the text as well as the beginning and end of the line.