JavaScript Regex Tutorial

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.

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 hundreds of different text. (this way, you don't have to construct the regex object everytime.)

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

Regex in JavaScript is technically a “object”. To create a regex, there are 2 ways:

• /pattern/flags → the literal syntax.
• new RegExp("pattern", "flags") → Useful when you want to construct regex dynamically. ⁖ from user input.

Note: when using a constructor new RegExp("…"), you should use double backslash in your string argument for any single backslash in your regex. Because, single backslash is used in string to escape the next character. So, when you use double backslash, the regex will just get a single backslash. Example:

// remember to double backslash when using regex constructor

var myRegex1 = new RegExp("\\d+"); // one or more digit
console.log(myRegex1.test("333")); // true. match found

var myRegex2 = new RegExp("\d+"); // WRONG
console.log(myRegex2.test("333")); // false

Regex Object Methods

Example of regex “test” method.

// example of regex “test” method
var myRegex = new RegExp("3+");
console.log(myRegex.test("333")); // true
console.log(myRegex.test("999")); // false

// example of regex “test” method.
// Using literal expression for regex object

console.log(/3+/.test("333")); // true
console.log(/3+/.test("999")); // false

Example of regex “exec” method.

// example of regex object “exec” method
// capture the attribute values in a image tag

var myText = '<img class="pict" src="cat.jpg" alt="my cat" width="600" height="400">';

var myRegex = new RegExp('<img class="([^"]+)" src="([^"]+)" alt="([^"]+)" width="([^"]+)" height="([^"]+)">');

var myResult = myRegex.exec(myText);

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

what's the difference between string.match(regex) method and regex.exec(string) method?

Regex Object Properties

Regex object has these properties. The most importat one is lastIndex.

Example:

// example of regex object properties

var myText = 'a x1 X2 c';

var myRegex = new RegExp('\\w\\d+', "ig");

var myResult = myRegex.exec(myText);

// print regex properties

console.log(myRegex.source);    // \w\d+

console.log(myRegex.global);     // true
console.log(myRegex.ignoreCase); // true
console.log(myRegex.multiline);  // false

console.log(myRegex.lastIndex); // 4

// print result

console.log(myResult); // [ 'x1', index: 2, input: 'a x1 X2 c' ]

Regex Result Object Properties

Example:

// example of regex result properties

var myText = 'a x1 X2 c';

var myRegex = new RegExp('\\w\\d+', "ig");

var myResult = myRegex.exec(myText);

// print result properties

console.log(myResult.index); // 2
console.log(myResult.input); // a x1 X2 c

Regex Syntax

JavaScript regex is a subset of Perl's regex.

References

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
• JavaScript Book by David Flanagan, and the Man-made Complexity in Computer Language