Regular expression in JavaScript

Regular expressions is a powerful tool in any language. Here I am discussing how to use regular expression in JavaScript.

Defining regular expressions

In JavaScript regular expression can be defined two ways.

var regex = /hello/gi; // i is for ignore case. g is for global.
var regex = new RegExp("hello", "ig");

If I am defining regular expression using RegExp then I need to add escape character in certain cases.

var regex = /hello_\w*/gi;
var regex = new RegExp("hello_\\w*", "ig"); //notice the extra backslash before \w

When I am defining regular expression using RegExp then \w needs to be escaped otherwise it would be taken literally.

test method

test method is to check if a match is found or not. This method returns true or false.

var regex = /hello/gi;
var text = "hello_you";
var bool = regex.test(text);

exec method

exec method finds if a match is found or not. It returns an array if a match is found. Otherwise it returns null.

var regex = /hello_\w*/gi;
var text = "hello_you";
var matches = regex.exec(text);
console.log(matches); //=> hello_you

match method

match method acts exactly like exec method if no g parameter is passed. When global flag is turned on the match returns an Array containing all the matches.

Note that in exec the syntax was regex.exec(text) while in match method the syntax is text.match(regex) .

var regex = /hello_\w*/i;
var text = "hello_you and hello_me";
var matches = text.match(regex);
console.log(matches); //=> ['hello_you']

Now with global flag turned on.

var regex = /hello_\w*/gi;
var text = "hello_you and hello_me";
var matches = text.match(regex);
console.log(matches); //=> ['hello_you', 'hello_me']

Getting multiple matches

Once again both exec and match method without g option do not get all the matching values from a string. If you want all the matching values then you need to iterate through the text. Here is an example.

Get both the bug numbers in the following case.

var matches = [];
var regex = /#(\d+)/gi;
var text = "I fixed bugs #1234 and #5678";
while ((match = regex.exec(text))) {
  matches.push(match[1]);
}
console.log(matches); // ['1234', '5678']

Note that in the above case global flag g. Without that above code will run forever.

var matches = [];
var regex = /#(\d+)/gi;
var text = "I fixed bugs #1234 and #5678";
matches = text.match(regex);
console.log(matches);

In the above case match is used instead of regex . However since match with global flag option brings all the matches there was no need to iterate in a loop.

match attributes

When a match is made then an array is returned. That array has two methods.

• index: This tells where in the string match was done
• input: the original string

var regex = /#(\d+)/i;
var text = "I fixed bugs #1234 and #5678";
var match = text.match(regex);
console.log(match.index); //13
console.log(match.input); //I fixed bugs #1234 and #5678

replace

replace method takes both regexp and string as argument.

var text = "I fixed bugs #1234 and #5678";
var output = text.replace("bugs", "defects");
console.log(output); //I fixed defects #1234 and #5678

Example of using a function to replace text.

var text = "I fixed bugs #1234 and #5678";
var output = text.replace(/\d+/g, function (match) {
  return match * 2;
});
console.log(output); //I fixed bugs #2468 and #11356

Another case.

// requirement is to change all like within <b> </b> to love.
var text = " I like JavaScript. <b> I like JavaScript</b> ";
var output = text.replace(/<b>.*?<\/b>/g, function (match) {
  return match.replace(/like/g, "love");
});
console.log(output); //I like JavaScript. <b> I love JavaScript</b>

Example of using special variables.

$& -	the matched substring.
$` -  the portion of the string that precedes the matched substring.
$' -  the portion of the string that follows the matched substring.
$n -  $0, $1, $2 etc where number means the captured group.

var regex = /(\w+)\s(\w+)/;
var text = "John Smith";
var output = text.replace(regex, "$2, $1");
console.log(output); //Smith, John

var regex = /JavaScript/;
var text = "I think JavaScript is awesome";
var output = text.replace(regex, "before:$` after:$' full:$&");
console.log(output); //I think before:I think after: is awesome full:JavaScript is awesome

Replace method also accepts captured groups as parameters in the function. Here is an example;

var regex = /#(\d*)(.*)@(\w*)/;
var text = "I fixed bug #1234 and twitted to @javascript";
text.replace(regex, function (_, a, b, c) {
  log(_); //#1234 and twitted to @javascript
  log(a); //1234
  log(b); //  and twitted to
  log(c); // javascript
});

As you can see the very first argument to function is the fully matched text. Other captured groups are subsequent arguments. This strategy can be applied recursively.

var bugs = [];
var regex = /#(\d+)/g;
var text = "I fixed bugs #1234 and #5678";
text.replace(regex, function (_, f) {
  bugs.push(f);
});
log(bugs); //["1234", "5678"]

Split method

split method can take both string or a regular expression.

An example of split using a string.

var text = "Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec";
var output = text.split(",");
log(output); // ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

An example of split using regular expression.

var text = "Harry Trump ;Fred Barney; Helen Rigby ; Bill Abel ;Chris Hand ";
var regex = /\s*;\s*/;
var output = text.split(regex);
log(output); // ["Harry Trump", "Fred Barney", "Helen Rigby", "Bill Abel", "Chris Hand "]

Non capturing Group

The requirement given to me states that I should strictly look for word java, ruby or rails within word boundary. This can be done like this.

var text = "java";
var regex = /\bjava\b|\bruby\b|\brails\b/;
text.match(regex);

Above code works. However notice the code duplication. This can be refactored to the one given below.

var text = "rails";
var regex = /\b(java|ruby|rails)\b/;
text.match(regex);

Above code works and there is no code duplication. However in this case I am asking regular expression engine to create a captured group which I'll not be using. Regex engines need to do extra work to keep track of captured groups. It would be nice if I could say to regex engine do not capture this into a group because I will not be using it.

?: is a special symbol that tells regex engine to create non capturing group. Above code can be refactored into the one given below.

var text = "rails";
var regex = /\b(?:java|ruby|rails)\b/;
text.match(regex);

text = "#container a.filter(.top).filter(.bottom).filter(.middle)";
matches = text.match(/^[^.]*|\.[^.]*(?=\))/g);
log(matches);