JS: RegExp Tutorial

By Xah Lee. Date: . Last updated: .

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" ]

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:

JavaScript, Regular Expression