Skip to main content

JavaScript Regular Expressions

JavaScript Regex Methods

Written by Published

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

  • 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.
  • A g pattern is stateful across test calls.

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.