JavaScript Regular Expressions
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
javascript
const pattern = /cat/;
console.log(pattern.test("a cat sat"));
console.log(pattern.test("a dog sat"));The output is true then false.
A pattern is written between two slashes.
test returns true or false.
new RegExp(text) builds one from a string.
Syntax
javascript
const pattern = /text/;
pattern.test(value);No quotes around the pattern.
test answers yes or no.
match returns what was found, or null.
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.
The i flag goes after the closing slash.
Example
javascript
console.log(/cat/.test("A Cat"));
console.log(/cat/i.test("A Cat"));The output is false then true.
The g flag finds all of them rather than just the first.
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.
new RegExp is needed when the pattern comes from a variable.
Remember that backslashes must be doubled in a string.
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.
replace accepts a regular expression as well as text.
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
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>Run the above example in the Try It Editor.
Try your own word:
Change the pattern to /mat/ and see the result change.
test returns true or false.match returns the matches or null.i flag ignores case; g finds every match.new RegExp builds a pattern from a string.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.