[Javascript] Regular Expressions

Regular expressions are patterns that provide a powerful way to search and replace in text.

Syntax

• const = regexp = /pattern/ Short
• const regexp = new RegExp("pattern", "flags") Long
  /...pattern.../ tell JavaScript that we are creating a regular expression.

Flags

A regular expression consists of a pattern and optional flags: g, i, m, u, s, y.

• i is case-insensitive: no difference between A and a.
• g With this flag the search looks for all matches, without it – only the first match is returned.
• m Multiline mode.
• s dotall mode (allows a dot . to match newline character \n)
• u full unicode support. The flag enables correct processing of surrogate pairs.
  y Sticky mode. Searching at the exact position in the text.

m : Multiline mode
In the multiline mode they match not only at the beginning and the end of the string, but also at start/end of line.

Example

// "/^\d/gm" takes a digit from the beginning of each line

let str = `1st place: Winnie
2nd place: Piglet
3rd place: Eeyore`;

alert( str.match(/^\d/gm) ); // 1, 2, 3
alert( str.match(/^\d/g) ); // 1

// "\d$" finds the last digit in every line
let str = `Winnie: 1
Piglet: 2
Eeyore: 3`;

alert( str.match(/\d$/gm) ); // 1,2,3

/n : Search for New line
Every match includes a newline character \n. Unlike the anchors ^ $, that only test the condition (start/end of a line), \n is a character, so it becomes a part of the result.

let str = `Winnie: 1
Piglet: 2
Eeyore: 3`;

alert( str.match(/\d\n/gm) ); // 1\n,2\n

Searching

// (1) str.match(regexp)
let str = "We will, we will rock you";
alert( str.match(/we/gi) ); // We,we
alert( str.match(/we/i) ); // We

// (2) str.replace(regexp, replacement)
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will

Character Classes

A character class is a special notation that matches any symbol from a certain set.

• \d A digit: a character from 0 to 9.
• \s A space symbol: includes spaces, tabs \t, newlines \n.
• \w “wordly” character: either a letter of Latin alphabet or a digit or an underscore _.

Example

// (1) Get only digits
let str = "+7(903)-123-45-67";
let regexp = /\d/g;
alert( str.match(regexp) ); // 7,9,0,3,1,2,3,4,5,6,7
alert( str.match(regexp).join('') ); // 79031234567

// (2) Regular symbor and character classes.
let str = "Is there CSS4?";
let regexp = /CSS\d/
alert( str.match(regexp) ); // CSS4

Inverse classes

For every character class there exists an “inverse class”, denoted with the same letter, but uppercased.

• \D Non-digit: any character except \d.
• \S Non-space: any character except \s.
• \W Non-wordly character: anything but \w.

Example

let str = "+7(903)-123-45-67";
alert( str.replace(/\D/g, "") ); // 79031234567

A dot is “any character”

A dot . is a special character class that matches “any character except a newline”.

Example

alert( "Z".match(/./) ); // Z
alert( "A\nB".match(/A.B/) ); // null (/n)
alert( "A\nB".match(/A.B/s) ); // A\nB

Not supported in Firefox, IE, Edge (alternative)

• alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (match!)
• The pattern [\s\S] literally says: “a space character OR not a space character”. In other words, “anything”.

Anchors

Anchors are used to find something at the beginning/end of a line.

• ^ matches at the beginning of the text.
• $ matches at the end of the text.
• ^...$ full match

Example

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

// $
let str1 = "it's fleece was white as snow";
alert( /snow$/.test(str1) ); // true

// ^...$
let goodInput = "12:34";
let badInput = "12:345";

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

Special Characters

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

Example

// Find a dot(not any character)
alert( "Chapter 5.1".match(/\d\.\d/) ); // 5.1 (match!)

// Parentheses "\("
//  looks for a string "g()":
alert( "function g()".match(/g\(\)/) ); // "g()"

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