JavaScript Regex Tutorial ＆ Reference

Regex stand for “regular expression”. It's used for matching text patterns.

There are 2 ways to use regex in JavaScript:

• String's regex methods.
• Regex object's methods. 〔☛ JavaScript Regex Object Methods〕

Normally, you should use string's regex methods.

Use regex object methods when:

• you need to construct regex pattern dynamically. ⁖ from user input.
• you want to use a regex to repeatedly test thousands of different text. (this way, you don't have to construct the regex object everytime.)

〔☛ JavaScript Regex Syntax〕

String Methods for Regex Match

Here's JavaScript string's regex methods.

The syntax for regex is /pattern/flags (using slash as delimiter, not quotation symbol). It is a literal expression for regex object.

If a string "pattern" is given as argument:

• the “replace” method will treat it as literal string and do literal find/replace
• “search” ＆ “match” methods will just automatically convert it into a regex object.

The following are examples and detail of each method.

String Regex Method Examples

Regex Search Method Example

Basic example:

var xx = "jane@example.com";
console.log(xx.search(/@.+com/)); // 4

console.log(xx.search(/z/)); // -1  not found

Here's typical use of “search” method in a “if” statement. Note that you should check against -1.

var xlink = "http://google.com/";

var search_result = xlink.search(/oo/);

if ( search_result !== -1) {
    console.log("found match");
    console.log(search_result); // 8
} else {
    console.log("not found");
}

Regex Replace Method Example

Basic example:

// example of regex replace
var xx = "jane@example.com";

console.log(xx.replace(/@.+\.com/, "")); // jane

If first arg is string, literal string replace is done (if there's a substring match). Example:

// example of regex replace
// if first arg is string, literal string replace is done (if there's a substring match)

var xx = "aaa-bbb";

console.log( xx.replace(/b.+/, "3")); // prints aaa-3

console.log( xx.replace("b.+", "3")); // prints aaa-bbb No replacement done

Example of “replace” method with captured group:

// example of regex replace
// add a alt attribute to a HTML image tag.

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

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

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

Example using “replace” method with a function as second argument.

// example of regex replace, using function as replacement
// add a alt attribute to a HTML image tag, but convert any underscore to space
// for example, we want
// <img src="my_cat.jpg">
// to become
// <img src="my_cat.jpg" alt="my cat">

function underscore_to_space(whole, capture1) {
 return '<img src="' + capture1 + '.jpg"' + ' alt="' + capture1.replace("_", " ") + '">';
}

var x1 = '<img src="my_cat.jpg">';

var x2 = x1.replace(/<img src="([-_\w]+)\.jpg">/, underscore_to_space);

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

Regex Match Method Example

Example of match with global flag. Get all occurances.

// example of regex “match” method
var xx = "google or yahoo for doodle";

console.log(
    xx.match(/.o+/g)    // [ 'goo', ' o', 'hoo', 'fo', 'doo' ]
);

console.log(
    xx.match(/x+/g)    // null
);

Example of match without global flag. Get all captured patterns.

// example of regex “match” method, capture groups
// capture the attribute values in a image tag
var xx = '<img class="pict" src="cat.jpg" alt="my cat" width="600" height="400">';

var result = xx.match(/<img class="([^"]+)" src="([^"]+)" alt="([^"]+)" width="([^"]+)" height="([^"]+)">/);

console.log(result[0]); // <img class="i" src="cat.jpg" alt="my cat" width="600" height="400">
console.log(result[1]); // pict
console.log(result[2]); // cat.jpg
console.log(result[3]); // my cat
console.log(result[4]); // 600
console.log(result[5]); // 400

Regex Object Methods

See: JavaScript Regex Object Tutorial

Regex Syntax

JavaScript Regex Syntax