JS: RegExp Tutorial

Regular Expression (or regex in short) is a character sequence that represent a textual pattern. For example, you can use it to find all numbers a file.

Regex is used by many functions to check if a string contains certain pattern, or extract it, or replace it with other string.

Basic Example

Check if a string contains repeated t

const txt = "something in tthe water";
const result = txt.search(/tt+/);
console.log(result); // 13
// return the start position of match
// if not found, returns -1

/tt+/ means, 1 t, followed by 1 or more t.

The syntax /…/ is a literal expression for regex. It return a instance of RegExp Object. In between the slashes, is the RegExp Syntax for a text pattern.

The string.search(regex) means search the regex in string string.

search is a string method. It returns the first character's index where the pattern matches. If the pattern is not found, it returns -1. [see String.prototype.search]

Example: Regex with If

It's common to use regex with if.

If a pattern is found, do something, else, do something else.

const text = "my cat";

// search for cat or cot or cut
const result = text.search(/c[aou]t/);

if (result !== -1) {
  console.log("yes");
} else {
  console.log("no");
}

// prints yes

Example: Regexp Replace

Regexp can also be used to replace parts of a string that matches a pattern.

// add a alt attribute to a HTML image tag.

const x1 = '<img src="cat.jpg">';

const x2 = x1.replace(
  /<img src="([-\w]+)\.jpg">/,
  '<img src="$1.jpg" alt="$1">',
);

console.log(x2); // <img src="cat.jpg" alt="cat">

[see String.prototype.replace]

Example: Capture Email Address

Let's say you want to get all email addresses in a document.

const txt = "Dear xyz@example.com, abc@example.org";

const regex = /[\w]+@[\w]+\.[a-z]{3}/gi;

console.log(
  txt.match(regex)
);
// [ "xyz@example.com", "abc@example.org" ]

• \w means any char from a to z and lowline _.
• \d means any digit 0 to 9.
• […] means any char inside [].
• + means 1 or more previous pattern. So, [\w]+ means a sequence of letters or digits.
• [a-z] means any letter.
• {3} means 3 repetition of previous pattern.
• gi the g is global flag, meaning find all occurrences, not just first. The i is a case sensitivity flag, means insensitive. [see RegExp Flag]

Note: if you never worked with regexp before, don't worry. Regexp is not something you understand fully the first day. It takes many months of use to be comfortable.

Example: Capture Patterns

// capture the attribute values in a image tag
const str = '<img class="i" src="cat.jpg" alt="my cat">';
const result = str.match(/<img class="([^"]+)" src="([^"]+)" alt="([^"]+)">/);
console.log(result);
// [ '<img class="i" src="cat.jpg" alt="my cat">', "i", "cat.jpg", "my cat" ]

[see String.prototype.match]

To learn more, see:

• Regex Functions
• RegExp Syntax