String start ^ and finish $

The caret '^' and dollar '$' characters have special meaning in a regexp. They are called “anchors”.

The caret ^ matches at the beginning of the text, and the dollar $ – in the end.

For instance, let’s test if the text starts with Mary:

let str1 = 'Mary had a little lamb, it's fleece was white as snow';
let str2 = 'Everywhere Mary went, the lamp was sure to go';

alert( /^Mary/.test(str1) ); // true
alert( /^Mary/.test(str2) ); // false

The pattern ^Mary means: “the string start and then Mary”.

Now let’s test whether the text ends with an email.

To match an email, we can use a regexp [-.\w][email protected]([\w-]+\.)+[\w-]{2,20}. It’s not perfect, but mostly works.

To test whether the string ends with the email, let’s add $ to the pattern:

let reg = /[-.\w][email protected]([\w-]+\.)+[\w-]{2,20}$/g;

let str1 = 'My email is [email protected]';
let str2 = 'Everywhere Mary went, the lamp was sure to go';

alert( reg.test(str1) ); // true
alert( reg.test(str2) ); // false

We can use both anchors together to check whether the string exactly follows the pattern. That’s often used for validation.

For instance we want to check that str is exactly a color in the form # plus 6 hex digits. The pattern for the color is #[0-9a-f]{6}.

To check that the whole string exactly matches it, we add ^...$:

let str = "#abcdef";

alert( /^#[0-9a-f]{6}$/i.test(str) ); // true

The regexp engine looks for the text start, then the color, and then immediately the text end. Just what we need.

Anchors have zero length

Anchors just like \b are tests. They have zero-width.

In other words, they do not match a character, but rather force the regexp engine to check the condition (text start/end).

The behavior of anchors changes if there’s a flag m (multiline mode). We’ll explore it in the next chapter.

Tasks

Which string matches the pattern ^$?

The empty string is the only match: it starts and immediately finishes.

The task once again demonstrates that anchors are not characters, but tests.

The string is empty "". The engine first matches the ^ (input start), yes it’s there, and then immediately the end $, it’s here too. So there’s a match.

MAC-address of a network interface consists of 6 two-digit hex numbers separated by a colon.

For instance: '01:32:54:67:89:AB'.

Write a regexp that checks whether a string is MAC-address.

Usage:

let reg = /your regexp/;

alert( reg.test('01:32:54:67:89:AB') ); // true

alert( reg.test('0132546789AB') ); // false (no colons)

alert( reg.test('01:32:54:67:89') ); // false (5 numbers, must be 6)

alert( reg.test('01:32:54:67:89:ZZ') ) // false (ZZ ad the end)

A two-digit hex number is [0-9a-f]{2} (assuming the i flag is enabled).

We need that number NN, and then :NN repeated 5 times (more numbers);

The regexp is: [0-9a-f]{2}(:[0-9a-f]{2}){5}

Now let’s show that the match should capture all the text: start at the beginning and end at the end. That’s done by wrapping the pattern in ^...$.

Finally:

let reg = /^[0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}$/i;

alert( reg.test('01:32:54:67:89:AB') ); // true

alert( reg.test('0132546789AB') ); // false (no colons)

alert( reg.test('01:32:54:67:89') ); // false (5 numbers, need 6)

alert( reg.test('01:32:54:67:89:ZZ') ) // false (ZZ in the end)
Tutorial map

Comments

read this before commenting…
  • You're welcome to post additions, questions to the articles and answers to them.
  • To insert a few words of code, use the <code> tag, for several lines – use <pre>, for more than 10 lines – use a sandbox (plnkr, JSBin, codepen…)
  • If you can't understand something in the article – please elaborate.