JavaScript Regex Tutorial: String Methods for Regex

, , …,

Regex is 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:

This page is a tutorial of using string's regex methods.

For others, see:

String Methods for Regex

JavaScript Regex String Methods
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. Use {$1, $2, …} to refer to captured group. ES5 §15#sec-
s.replace("…",replace)Literal string replacement. (no regex)…/)Return the index of first char of matched string. If no match, returns -1. ES5 §15#sec-
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. ES5 §15#sec-
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:

String Regex Method Examples

Regex Search Method Example

Basic example:

var xx = "";
console.log(; // 4

console.log(; // -1  not found

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

var xlink = "";

var search_result =;

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 = "";

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

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

    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

Like what you read? Please tell friends, share link, or Buy JavaScript in Depth. Thanks.
blog comments powered by Disqus