Learn Regex Methods in 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);

1HTML HTML CSS CSS

String searching

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

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

18

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.

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

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.

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

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.

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}

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.