JavaScript RegExp Methods

Regexes are used through a handful of methods, some on the regex and some on strings. This lesson is the complete set, including the two most powerful: matchAll and replace with a function.

// The Complete Set

// match() Changes With the g Flag

const s = "x=1, y=22";

s.match(/(\w)=(\d+)/);    // ["x=1", "x", "1"]   first match WITH groups
s.match(/(\w)=(\d+)/g);   // ["x=1", "y=22"]     all matches, NO groups
s.match(/z/);             // null

// matchAll(): Every Match, Every Group

const prices = "Pens $2.50, Paper $4.25, Tape $1.99";
const re = /(?<item>\w+) \$(?<price>\d+\.\d{2})/g;

const items = [...prices.matchAll(re)].map(m => ({
  item: m.groups.item,
  price: Number(m.groups.price)
}));

console.log(items);

matchAll requires the g flag and throws a TypeError without it.

// exec() vs matchAll()

Both give you every match with its groups, but they work very differently. (W3Schools' reference mixes them up: exec() does not return an iterator.)

The lastIndex difference is the dangerous one. A g regex that exec() or test() has used remembers where it stopped, even when you give it a different string:

const re = /\d/g;
re.exec("a1b2c3");            // finds "1"; lastIndex is now 2
console.log(re.exec("9"));      // starts at position 2 of "9": nothing there

matchAll() leaves the regex alone, but its iterator can only be read once, like every iterator (JS Iterators):

const re2 = /\d/g;
const found = "a1b2".matchAll(re2);

console.log([...found].map(m => m[0]));
console.log([...found].length);   // already used up
console.log(re2.lastIndex);       // untouched

Because matchAll() returns an iterator, the iterator helpers from JS Iterators work on it directly:

console.log("ava=92, ben=85".matchAll(/(\w+)=(\d+)/g).map(m => m[1]).toArray());

// replace() With a Function

Instead of a replacement string, pass a function. It is called for every match, and whatever it returns is used as the replacement. It receives the full match first, then each group:

// Double every number
"3 apples and 12 pears".replace(/\d+/g, n => n * 2);
// "6 apples and 24 pears"

// Convert temperatures, using a group
"Mon 20C, Tue 25C".replace(/(\d+)C/g, (match, c) => `${Math.round(c * 9 / 5 + 32)}F`);
// "Mon 68F, Tue 77F"

// camelCase to kebab-case
"backgroundColor".replace(/[A-Z]/g, c => "-" + c.toLowerCase());
// "background-color"

// Special Replacement Strings

"price: 20".replace(/\d+/, "$$$&");   // "price: $20"

// replaceAll() Needs g

"a-b-c".replaceAll(/-/g, "+");   // "a+b+c"
"a-b-c".replaceAll(/-/, "+");    // TypeError: String.prototype.replaceAll called with a non-global RegExp argument

// split() With Groups

If the split pattern has a capturing group, the separators are kept in the result:

"3+4-2".split(/[+-]/);     // ["3", "4", "2"]
"3+4-2".split(/([+-])/);   // ["3", "+", "4", "-", "2"]  handy for calculators

// Complete RegExp Reference

Every property and method a regex has. Most were covered in RegExp Flags and RegExp Objects:

const re = /ab+c/gi;

console.log(re.toString());
console.log(re.constructor === RegExp, re.constructor.name);
console.log(/a.b/s.dotAll, /x/d.hasIndices, /x/v.unicodeSets);
console.log(new RegExp("a", "ygmid").flags);   // always listed in alphabetical order

// Choosing a Method

1. Just need yes or no? test (without the g flag)
2. Need the parts of one match? match without g
3. Need every match? match with g; need their groups too? matchAll
4. Changing text? replace with a string, or with a function for logic

// Quick Check

console.log("Tom 3, Ann 5".replace(/\d+/g, n => n * 10));

// Try It

▶ Open Playground

1. Click Open Playground and run it: match returns null when nothing matches. Fix it with ?? []
2. Use matchAll with named groups to turn "ava:16, ben:17" into an array of objects
3. Use replace with a function to convert every "Xkm" in a sentence to miles
4. Split a math expression like "12*3+4" into numbers and operators, keeping the operators