- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript Regex Methods
JavaScript Regular Expressions
JavaScript Regex Methods
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
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.
Which Method to Use
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
Syntax
javascript
pattern.test(text);
text.match(pattern);test is on the pattern; the rest are on the string.
match With and Without g
Without g you get the groups of the first match.
With g you get every matched string but no groups.
Example
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.
matchAll Keeps the Groups
This is the way to get every match and its groups.
Example
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.
replace with a Function
A function receives each match and returns its replacement.
Example
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.
split with a Pattern
Splitting on a pattern handles messy separators.
Example
Example
javascript
const text = "a1b22c333d";
console.log(text.split(/\d+/).join(","));Any run of digits acted as the separator.
The Stateful g Flag
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
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
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>Try It Yourself
Run the above example in the Try It Editor.
Try matchAll:
Use [...text.matchAll(/([a-z])(\d)/g)] and inspect the groups.
Important Points
testgives true or false.searchgives the position of the first match.matchwithgloses the groups.matchAllkeeps every match and its groups.- A
gpattern is stateful acrosstestcalls.
Conclusion
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.
