JavaScript Regex Object Methods

, , …,
Want to master JavaScript in a month? Commit. Buy Xah JavaScript Tutorial. You also get Xah HTML Tutorial and Xah CSS Tutorial.

There are 2 ways to use regex for string pattern matching. One is using string's methods. 〔☛ JavaScript String Regex Methods〕 The other way is creating a regex object, and use the regex object's methods.

Creating a Regex Object

Regex in JavaScript is technically a “object”. 〔☛ What's Object in JavaScript?〕 To create a regex object, there are 2 ways:

Note: when using new RegExp("pattern"), you need to 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

MethodMeaning
regex.test(string)Return true if there's a match, else false.
regex.exec(string)Return a array. Index 0 is the whole matched string, index 1 is first captured pattern, …. Or, return null if no match.

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?

  1. Their arguments are reversed.
  2. regex.exec(string) returns exactly the same thing as string.match(regex) when the global flag g is not used. If global flag is used, the “match” method returns a array of occurances of matched string.

Regex Object Properties

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

PropertyMeaning
sourcethe regex (read only)
globalboolean. whether there's the global flag g in regex. (read only)
ignoreCaseboolean. whether there's the ignore case flag i in regex. (read only)
multilineboolean. whether there's the multi-line flag m in regex. (read only)
lastIndexWhen global flag g is used, the value is the position of end of last match. Next invocation of the method with the same regex object will start from here. (you may want to reset this to 0 in a loop.) When global flag is not used, this value is always 0.

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

PropertyMeaning
indexthe beginning position of first occurance.
inputthe input string.

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

Reference

ECMAScript §15#sec-15.10

blog comments powered by Disqus