Patterns and flags

Regular expressions is a powerful way of searching and replacing inside a string.

In JavaScript regular expressions are implemented using objects of a built-in RegExp class and integrated with strings.

Please note that regular expressions vary between programming languages. In this tutorial we concentrate on JavaScript. Of course there’s a lot in common, but they are a somewhat different in Perl, Ruby, PHP etc.

Regular expressions

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 searching more 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 allow any variables insertions, so we must know the exact regexp at the time of writing the code.

From the other hand, new RegExp allows to construct a pattern dynamically from a string.

So we can figure out what we need to search and create new RegExp from it:

let search = prompt("What you want to search?", "love");
let regexp = new RegExp(search);

// find whatever the user wants
alert( "I love JavaScript".search(regexp));

Flags

Regular expressions may have flags that affect the search.

There are only 5 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 Article "regexp-multiline" not found).
u
Enables full unicode support. The flag enables correct processing of surrogate pairs. More about that in the chapter The unicode flag.
y
Sticky mode (covered in the next chapter)

The “i” flag

The simplest flag is i.

An example with it:

let str = "I love JavaScript!";

alert( str.search(/LOVE/) ); // -1 (not found)
alert( str.search(/LOVE/i) ); // 2
  1. The first search returns -1 (not found), because the search is case-sensitive by default.
  2. With the flag /LOVE/i the search found love at position 2.

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, 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.
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.