JavaScript Regular Expressions
Several string and regex methods work together to search and replace.
Some belong to the pattern and some to the string.
Which one to use depends on what you need back.
Example
javascript
const text = "cat bat cat";
console.log(/cat/.test(text));
console.log(text.search(/bat/));
console.log(text.match(/cat/g).length);The output is true, 4, 2.
test for a yes or no answer.
search for the position of the first match.
match for the matched text, and matchAll for details of every match.
Syntax
javascript
pattern.test(text);
text.match(pattern);test is on the pattern; the rest are on the string.
Without g you get the groups of the first match.
With g you get every matched string but no groups.
Example
javascript
const text = "a1 b2";
console.log(text.match(/([a-z])(\d)/)[1]);
console.log(text.match(/([a-z])(\d)/g).join(","));The g version loses the group information.
This is the way to get every match and its groups.
Example
javascript
const text = "a1 b2";
const matches = [...text.matchAll(/([a-z])(\d)/g)];
console.log(matches.length);
console.log(matches[1][1]);matchAll requires the g flag.
A function receives each match and returns its replacement.
Example
javascript
const text = "a1 b2";
const result = text.replace(/\d/g, function (digit) {
return String(Number(digit) * 2);
});
console.log(result);The output is a2 b4.
Splitting on a pattern handles messy separators.
Example
javascript
const text = "a1b22c333d";
console.log(text.split(/\d+/).join(","));Any run of digits acted as the separator.
A pattern with g remembers where it got to between test calls.
This is a genuine trap; make a fresh pattern or avoid g with test.
Example
javascript
const pattern = /a/g;
console.log(pattern.test("aa"));
console.log(pattern.test("aa"));
console.log(pattern.test("aa"));The third call is false, because it ran off the end.
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Regex Methods</title>
</head>
<body>
<h1>Regex Methods</h1>
<p id="out"></p>
<script>
const text = "Order a1 and b2";
document.getElementById("out").innerHTML =
"Has a digit: " + /\d/.test(text) +
"<br>First digit at: " + text.search(/\d/) +
"<br>All codes: " + text.match(/[a-z]\d/g).join(", ") +
"<br>Doubled: " + text.replace(/\d/g, function (d) { return Number(d) * 2; });
</script>
</body>
</html>Run the above example in the Try It Editor.
Try matchAll:
Use [...text.matchAll(/([a-z])(\d)/g)] and inspect the groups.
test gives true or false.search gives the position of the first match.match with g loses the groups.matchAll keeps every match and its groups.g pattern is stateful across test calls.Choosing the method is really about choosing what you want back.
matchAll is the modern answer for repeated matches with groups.
The stateful g flag is a real trap worth remembering.