Learn Regex Methods in JavaScript

So far, we've only been working with the match() method, but in fact, several other methods are available in JavaScript that allow you to manipulate strings using regular expressions.

String replacing

Besides matching for a pattern, JavaScript also allows you to replace the matched patterns with another string using the replace() method. The method takes two parameters, a regular expression, and a replacement string.

javascript

1let regex = /xyz/;
2let str = "abc xyz abc xyz";
3
4let replacedStr = str.replace(regex, "abc");
5
6console.log(replacedStr);

text

1abc abc abc xyz

Notice that the replace() method returns the processed string, instead of working on the original string directly.

And also, only the first match is replaced by the new string. To find and replace all matches, add a global flag.

javascript

1let regex = /xyz/g;
2let str = "abc xyz abc xyz";
3
4let replacedStr = str.replace(regex, "abc");
5
6console.log(replacedStr);

text

1abc abc abc abc

The second parameter can also be a callback function if you need a more flexible replacement rule. For example, if you want to find all /html/ and /css/ patterns in a text, and then replace them with uppercase letters, this is what you can do:

javascript

1let regex = /(html)|(css)/gi;
2let str = "html Html css Css";
3
4let replacedStr = str.replace(regex, (str) => {
5  return str.toUpperCase();
6});
7
8console.log(replacedStr);

text

1HTML HTML CSS CSS

String searching

The search() method accepts a regular expression, and returns the position of the first matched pattern.

javascript

1let regex = /xyz/g;
2let str = "abc abc xyz xyz";
3
4console.log(str.search(regex));

text

The global flag is ineffective for this method. It will always return the first match regardless of the g flag.

If no matches are found, the method returns -1.

javascript

1let regex = /aaa/;
2let str = "abc abc xyz xyz";
3
4console.log(str.search(regex));

text

1-1

Regex testing

Under the Regex class, there is also a test() method that tests a string against the regular expression. If a match is found, the method returns true, otherwise it returns false.

javascript

1let regex = /abc/;
2let str1 = "abc";
3let str2 = "xyz";
4
5console.log(regex.test(str1));
6console.log(regex.test(str2));

text

1true
2false

Regex execute

Lastly, there is an exec() method. With a global flag, it can access all matched patterns instead of just the first one. However, unlike matchAll(), you will need a loop to do that.

javascript

1let str = "javascript JavaScript Javascript javaScript";
2let regex = /javascript/gi;
3
4let matches;
5
6while ((matches = regex.exec(str))) {
7  console.log(`Found ${matches[0]} at position ${matches.index}`);
8}

text

1Found javascript at position 0
2Found JavaScript at position 11
3Found Javascript at position 22
4Found javaScript at position 33

Here is how it works:

The first call to exec() returns the first match, and saves the position of its last character in the property lastIndex.
The next call to exec() will automatically start from the lastIndex. It will return the next match, and save the position of its last character in the property lastIndex.
This process will be repeated until no matches are found, in which case null will be returned, and lastIndex will be reset to 0.