Patterns and flags

A regular expression (also “regexp”, or just “reg”) consists of a pattern and optional flags.

There are two syntaxes to create a regular expression object.

The long syntax:

regexp = new RegExp("pattern", "flags");

…And the short one, using slashes "/":

regexp = /pattern/; // no flags
regexp = /pattern/gmi; // with flags g,m and i (to be covered soon)

Slashes "/" tell JavaScript that we are creating a regular expression. They play the same role as quotes for strings.

Usage

To search inside a string, we can use method search.

Here’s an example:

let str = "I love JavaScript!"; // will search here

let regexp = /love/;
alert( str.search(regexp) ); // 2

The str.search method looks for the pattern /love/ and returns the position inside the string. As we might guess, /love/ is the simplest possible pattern. What it does is a simple substring search.

The code above is the same as:

let str = "I love JavaScript!"; // will search here

let substr = 'love';
alert( str.search(substr) ); // 2

So searching for /love/ is the same as searching for "love".

But that’s only for now. Soon we’ll create more complex regular expressions with much more searching power.

Colors

From here on the color scheme is:

  • regexp – red
  • string (where we search) – blue
  • result – green
When to use new RegExp?

Normally we use the short syntax /.../. But it does not support variable insertions ${...}.

On the other hand, new RegExp allows to construct a pattern dynamically from a string, so it’s more flexible.

Here’s an example of a dynamically generated regexp:

let tag = prompt("Which tag you want to search?", "h2");
let regexp = new RegExp(`<${tag}>`);

// finds <h2> by default
alert( "<h1> <h2> <h3>".search(regexp));

Flags

Regular expressions may have flags that affect the search.

There are only 6 of them in JavaScript:

i
With this flag the search is case-insensitive: no difference between A and a (see the example below).
g
With this flag the search looks for all matches, without it – only the first one (we’ll see uses in the next chapter).
m
Multiline mode (covered in the chapter Multiline mode, flag "m").
s
“Dotall” mode, allows . to match newlines (covered in the chapter Character classes).
u
Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter Unicode: flag "u".
y
Sticky mode (covered in the chapter Sticky flag "y", searching at position)

We’ll cover all these flags further in the tutorial.

For now, the simplest flag is i, here’s an example:

let str = "I love JavaScript!";

alert( str.search(/LOVE/i) ); // 2 (found lowercased)

alert( str.search(/LOVE/) ); // -1 (nothing found without 'i' flag)

So the i flag already makes regular expressions more powerful than a simple substring search. But there’s so much more. We’ll cover other flags and features in the next chapters.

Summary

  • A regular expression consists of a pattern and optional flags: g, i, m, u, s, y.
  • Without flags and special symbols that we’ll study later, the search by a regexp is the same as a substring search.
  • The method str.search(regexp) returns the index where the match is found or -1 if there’s no match. In the next chapter we’ll see other methods.
Tutorial map

Comments

read this before commenting…
  • If you have suggestions what to improve - please submit a GitHub issue or a pull request instead of commenting.
  • If you can't understand something in the article – please elaborate.
  • 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…)