Skip to main content

JavaScript Regular Expressions

JavaScript Regular Expressions

Written by Published

A regular expression describes a pattern of text rather than exact text.

String methods search for exact text; a regular expression searches for a shape.

That is what lets you find any digit, any word, or anything ending in .pdf.

Example

Example

javascript

const pattern = /cat/;

console.log(pattern.test("a cat sat"));
console.log(pattern.test("a dog sat"));

The output is true then false.

Writing a Pattern

A pattern is written between two slashes.

test returns true or false.

new RegExp(text) builds one from a string.

Syntax

Syntax

javascript

const pattern = /text/;
pattern.test(value);

No quotes around the pattern.

test and match

test answers yes or no.

match returns what was found, or null.

Example

Example

javascript

const text = "the cat sat";

console.log(/cat/.test(text));
console.log(text.match(/cat/)[0]);
console.log(text.match(/dog/));

A failed match gives null, so guard it.

Case Insensitive Matching

The i flag goes after the closing slash.

Example

Example

javascript

console.log(/cat/.test("A Cat"));
console.log(/cat/i.test("A Cat"));

The output is false then true.

Finding Every Match

The g flag finds all of them rather than just the first.

Example

Example

javascript

const text = "cat bat cat";

console.log(text.match(/cat/g).length);
console.log(text.match(/cat/g).join(","));

Without g, only the first match comes back.

Building from a String

new RegExp is needed when the pattern comes from a variable.

Remember that backslashes must be doubled in a string.

Example

Example

javascript

const word = "cat";
const pattern = new RegExp(word, "i");

console.log(pattern.test("A Cat"));

This is how you build a search from user input.

Replacing with a Pattern

replace accepts a regular expression as well as text.

Example

Example

javascript

const text = "cat bat cat";

console.log(text.replace(/cat/, "dog"));
console.log(text.replace(/cat/g, "dog"));

The g flag is what makes it replace them all.

Complete Example

Complete Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Regular Expressions</title>
</head>
<body>

  <h1>Regular Expressions</h1>

  <p id="out"></p>

  <script>
    const text = "The cat sat on the mat";

    document.getElementById("out").innerHTML =
      "Contains cat: " + /cat/.test(text) +
      "<br>Contains CAT (case insensitive): " + /CAT/i.test(text) +
      "<br>Words ending in at: " + text.match(/\wat/g).join(", ");
  </script>

</body>
</html>

Try It Yourself

Run the above example in the Try It Editor.

Try your own word:

Change the pattern to /mat/ and see the result change.

Important Points

  • A pattern is written between slashes.
  • test returns true or false.
  • match returns the matches or null.
  • The i flag ignores case; g finds every match.
  • new RegExp builds a pattern from a string.

Conclusion

Regular expressions describe the shape of text rather than exact text.

They are dense to read but replace a great deal of manual checking.

The next lessons cover the pattern characters themselves.