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.
Regex in JavaScript is technically a “object”. 〔➤ What's Object in JavaScript?〕 To create a regex object, there are 2 ways:
/pattern/flags → the literal syntax.new RegExp("pattern", "flags") → Useful when you want to generate regex dynamically. ⁖ from user input.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
| Method | Meaning |
|---|---|
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?
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 has these properties. The most importat one is lastIndex.
| Property | Meaning |
|---|---|
source | the regex (read only) |
global | boolean. whether there's the global flag g in regex. (read only) |
ignoreCase | boolean. whether there's the ignore case flag i in regex. (read only) |
multiline | boolean. whether there's the multi-line flag m in regex. (read only) |
lastIndex | When 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' ]
| Property | Meaning |
|---|---|
index | the beginning position of first occurance. |
input | the 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