Lesson guide

Learning objectives

  • Explain the main purpose of Escaping, special characters 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 Escaping, special characters fits into real JavaScript programs. As we’ve seen, a backslash is used to denote character classes, e.g.

Key ideas

  • Escaping, special characters 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

  • Escaping, special characters
  • Escaping
  • special
  • characters
  • Regular expressions

As we’ve seen, a backslash \ is used to denote character classes, e.g. \d. So it’s a special character in regexps (just like in regular strings).

There are other special characters as well, that have special meaning in a regexp, such as [ ] { } ( ) \ ^ $ . | ? * +. They are used to do more powerful searches.

Don’t try to remember the list – soon we’ll deal with each of them, and you’ll know them by heart automatically.

Escaping

Let’s say we want to find literally a dot. Not “any character”, but just a dot.

To use a special character as a regular one, prepend it with a backslash: \..

That’s also called “escaping a character”.

For example:

javascript
alert( "Chapter 5.1".match(/\d\.\d/) );
alert( "Chapter 511".match(/\d\.\d/) );

Parentheses are also special characters, so if we want them, we should use \(. The example below looks for a string "g()":

javascript
alert( "function g()".match(/g\(\)/) ); // "g()"

If we’re looking for a backslash \, it’s a special character in both regular strings and regexps, so we should double it.

javascript
alert( "1\\2".match(/\\/) ); // '\'

A slash

A slash symbol '/' is not a special character, but in JavaScript it is used to open and close the regexp: /...pattern.../, so we should escape it too.

Here’s what a search for a slash '/' looks like:

javascript
alert( "/".match(/\//) ); // '/'

On the other hand, if we’re not using /.../, but create a regexp using new RegExp, then we don’t need to escape it:

javascript
alert( "/".match(new RegExp("/")) ); // finds /

new RegExp

If we are creating a regular expression with new RegExp, then we don’t have to escape /, but need to do some other escaping.

For instance, consider this:

javascript
let regexp = new RegExp("\d\.\d");

alert( "Chapter 5.1".match(regexp) ); // null

The similar search in one of previous examples worked with /\d\.\d/, but new RegExp("\d\.\d") doesn’t work, why?

The reason is that backslashes are “consumed” by a string. As we may recall, regular strings have their own special characters, such as \n, and a backslash is used for escaping.

Here’s how “\d.\d” is perceived:

javascript
alert("\d\.\d"); // d.d

String quotes “consume” backslashes and interpret them on their own, for instance:

  • \n – becomes a newline character,
  • \u1234 – becomes the Unicode character with such code,
  • …And when there’s no special meaning: like \d or \z, then the backslash is simply removed.

So new RegExp gets a string without backslashes. That’s why the search doesn’t work!

To fix it, we need to double backslashes, because string quotes turn \\ into \:

javascript
let regStr = "\\d\\.\\d";
alert(regStr); // \d\.\d (correct now)

let regexp = new RegExp(regStr);

alert( "Chapter 5.1".match(regexp) ); // 5.1

Common mistakes

  • Skipping the small examples and then missing the exact rule that Escaping, special characters 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

  • To search for special characters [ \ ^ $ . | ? * + ( ) literally, we need to prepend them with a backslash \ (“escape them”).\
  • We also need to escape / if we’re inside /.../ (but not inside new RegExp).\
  • When passing a string to new RegExp, we need to double backslashes \\, cause string quotes consume one of them.

Predict

Before running this escaping block, predict the six output lines. It checks literal dots, literal parentheses, a literal slash, a literal backslash, and the extra escaping needed when the pattern is passed as a string to new RegExp.

javascript
Reveal explanation

\. means a real dot, while plain . would mean any non-newline character. Parentheses and backslash also need escaping when searched literally. / must be escaped inside a regexp literal because slash ends the literal. In new RegExp, the JavaScript string consumes backslashes first, so "\\d\\.\\d" is needed to deliver \d\.\d to the regexp engine.

Try it

Change badPattern to new RegExp("\\d.\\d"), then predict the first part of the new-regexp line. Then replace /g\(\)/ with /g()/ and explain why it stops looking for literal parentheses.

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 Escaping, special characters in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Sets and ranges [...] when you are ready for the next lesson.