JavaScript Regex Tutorial & Reference

, , …,
Want to master JavaScript in a week? Buy Xah JavaScript Tutorial.

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

There are 2 ways to use regex in JavaScript:

Normally, you should use string's regex methods.

Use regex object methods when:

〔➤ JavaScript Regex Syntax

String Methods for Regex Match

Here's JavaScript string's regex methods.

syntaxdescription
s.search(/…/)Return the index of first char of matched string. If no match, returns -1. ECMAScript §15#sec-15.5.4.12
s.replace(/…/,replace)Return a new string. The replace can be a string or function. If function, it'll receive args: matched string, match group 1, match group 2, …. If no match, the original string is returned. ECMAScript §15#sec-15.5.4.11
s.replace("…",replace)Literal string replacement. (no regex)
s.match(/…/)Return array of captured patterns. Index 0 is the whole matched string, index 1 is first captured pattern, …. Or, return null if no match. ECMAScript §15#sec-15.5.4.10
s.match(/…/g)Return a array of all occurrences of matched string (note the g flag for global), or null if no match.

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

blog comments powered by Disqus