Mastering JavaScript Regex Match: Test, Match, and Replace

JavaScript provides robust support for regular expressions natively, but its API can sometimes feel confusing for beginners. Understanding the subtle differences between the various regex methods is essential for effective string manipulation.

In this tutorial, we will explore the core methods available for handling regex in JS and how you can use a javascript regex tester to speed up your workflow.

Creating a JavaScript Regex

In JavaScript, there are two ways to create a regular expression:

1. Regex Literal: Slashes surrounding the pattern.

   const regex = /[a-z]+/gi;
   

2. RegExp Constructor: Useful if your pattern is dynamic.

   const regex = new RegExp('[a-z]+', 'gi');
   

The JavaScript Regex Match Method

The String.prototype.match() method is one of the most commonly used methods. It searches a string for a match against a regular expression and returns the matches as an array.

Without the Global Flag (g)

If the global flag is missing, match() returns an array containing the first complete match and any related capturing groups.

const str = "RegexRef is awesome.";
const result = str.match(/([A-Z])\w+/);
// result[0] is "RegexRef"
// result[1] is "R" (the first capture group)

With the Global Flag (g)

If you include the g flag, match() returns an array of all matches but ignores capture groups.

const str = "Test 1, Test 2";
const result = str.match(/\w+/g);
// ["Test", "1", "Test", "2"]

Advanced Extraction: matchAll()

If you need both all matches and their capture groups, matchAll() is your best friend. It returns an iterator of all results.

const str = "test1@email.com, test2@email.com";
const regex = /([a-z0-9]+)@([a-z]+)\.com/g;

for (const match of str.matchAll(regex)) {
  console.log(`User: ${match[1]}, Domain: ${match[2]}`);
}

Interactive JavaScript Regex Tester

Reading code is great, but playing with it is better! Use our interactive tester below to validate your JavaScript regular expressions.

Conclusion

Mastering a javascript regex match pattern involves understanding your flags (g, i, m) and picking the right string or RegExp method.

If you prefer Python, you might want to check out our Python Regex Cheat Sheet. Otherwise, jump into the RegexRef Visualizer, the definitive regex tester brought to you by one4.dev!