Lesson guide

Learning objectives

  • Explain the main purpose of Anchors: string start ^ and end $ in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in Regular expressions.

Real-world context

This lesson matters when you need to recognize where Anchors: string start ^ and end $ fits into real JavaScript programs. The caret and dollar characters have special meaning in a regexp.

Key ideas

  • Anchors: string start ^ and end $ is part of the Regular expressions chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Anchors: string start ^ and end $
  • Anchors
  • string
  • start
  • end

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 $ – at the end.

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

javascript
let str1 = "Mary had a little lamb";
alert( /^Mary/.test(str1) );

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

Similar to this, we can test if the string ends with snow using snow$:

javascript
let str1 = "its fleece was white as snow";
alert( /snow$/.test(str1) ); // true

In these particular cases we could use string methods startsWith/endsWith instead. Regular expressions should be used for more complex tests.

Testing for a full match

Both anchors together ^...$ are often used to test whether or not a string fully matches the pattern. For instance, to check if the user input is in the right format.

Let’s check whether or not a string is a time in 12:34 format. That is: two digits, then a colon, and then another two digits.

In regular expressions language that’s \d\d:\d\d:

javascript
let goodInput = "12:34";
let badInput = "12:345";

let regexp = /^\d\d:\d\d$/;
alert( regexp.test(goodInput) ); // true
alert( regexp.test(badInput) ); // false

Here the match for \d\d:\d\d must start exactly after the beginning of the text ^, and the end $ must immediately follow.

The whole string must be exactly in this format. If there’s any deviation or an extra character, the result is false.

Anchors behave differently if flag m is present. We’ll see that in the next article.

Anchors have “zero width”

Anchors ^ and $ 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).

Common mistakes

  • Skipping the small examples and then missing the exact rule that Anchors: string start ^ and end $ depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • Anchors: string start ^ and end $ gives you one more piece of the JavaScript mental model.
  • The examples in this lesson are the quickest way to check whether the rule is clear.
  • Revisit the key terms when you meet the same idea in later chapters.

Predict

Before running this anchors block, predict the six output lines. It shows start ^, end $, full-string validation with both anchors, and the fact that anchors are zero-width checks rather than characters.

javascript
Reveal explanation

^Mary checks the beginning of the string, and snow$ checks the end. ^\d\d:\d\d$ requires the entire string to be exactly 12:34 style, so 12:345 fails even though it contains a matching substring. The unanchored pattern can still find that substring. ^ matches a position, not a character, so the matched string has length 0.

Try it

Remove $ from the time regexp, then predict full-bad. Then change "Mary had a little lamb" to "Hi Mary" and predict starts.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Anchors: string start ^ and end $ in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Multiline mode of anchors ^ $, flag "m" when you are ready for the next lesson.