---
title: "Regular expression in JavaScript"
description:
  "Regular expression in JavaScript could be confusing. This blog discusses a
  few basic techniqutes."
canonical_url: "https://www.bigbinary.com/blog/regular-expressions-in-JavaScript"
markdown_url: "https://www.bigbinary.com/blog/regular-expressions-in-JavaScript.md"
---

# Regular expression in JavaScript

Regular expression in JavaScript could be confusing. This blog discusses a few
basic techniqutes.

- Author: Neeraj Singh
- Published: March 31, 2010
- Categories: 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.

```javascript
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](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp#Properties_2)
then I need to add escape character in certain cases.

```javascript
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](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp/test)
is to check if a match is found or not. This method returns true or false.

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

## exec method

[exec method](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/RegExp/exec)
finds if a match is found or not. It returns an array if a match is found.
Otherwise it returns null.

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

## match method

[match method](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/match)
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)` .

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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

```javascript
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](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/replace)
takes both regexp and string as argument.

```javascript
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.

```javascript
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.

```javascript
// 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.

```plaintext
$& -	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.
```

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

```javascript
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;

```javascript
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.

```javascript
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](https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String/split)
can take both string or a regular expression.

An example of split using a string.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

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

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

## Links

- [Human page](https://www.bigbinary.com/blog/regular-expressions-in-JavaScript)