JavaScript Regular Expressions
A regular expression is a pattern you run against text. /tea/ asks whether tea appears. replace builds a new string with mint in that spot. On this page the note is Order: tea, and the line reads true / Order: mint.
Not the map page
The map page ended on lida / mint / 2. That was storage. This page does not store a guest. It searches a string. A failed search returns false or null. It does not throw.
test answers yes or no
/tea/.test("mint tea") is true, because the pattern sits inside the text. /tea/.test("lemon") is false. The i flag ignores case, so /tea/i matches Tea.
console.log(/tea/.test("mint tea"));
console.log(/tea/.test("lemon"));
The logs are true, then false. A dot matches any one character except a line break, so /t.a/ also matches tea. A real period has to be written \..
The whole string, or just a piece
^ means the start. $ means the end. /^tea$/ matches tea and rejects mint tea. Without those marks, /tea/ succeeds inside a longer note.
console.log(/^tea$/.test("tea"));
console.log(/^tea$/.test("mint tea"));
The logs are true, then false. mint tea contains the letters, but it is not only tea.
Every copy, then a new string
match with the g flag returns each copy. replace with g swaps every copy and returns a new string. The original note stays as it was until you assign the result.
const note = "tea and tea";
console.log(note.match(/tea/g));
console.log(note.replace(/tea/g, "mint"));
console.log(note);
The match log is an array of two tea strings. The replace log is mint and mint. The third log is still tea and tea, because replace did not edit note. Drop the g and only the first tea changes. If nothing matches, match returns null, not an empty array.
What you get back
Pick the method by the shape of the answer you need.
📊 Regex methods
| Method | Gives you | On this note |
|---|---|---|
/tea/.test(note) |
true or false |
true for Order: tea |
note.match(/tea/) |
one match array, or null |
the word tea, plus where it sat |
note.match(/tea/g) |
every copy, or null |
two teas in tea and tea |
note.replace(/tea/, "mint") |
a new string | Order: mint |
test is the yes-or-no check. match hands you the pieces. replace hands you the rewritten text. Assign that text if you want to keep it.
The line
The page tests Order: tea, swaps the drink, and writes both results.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const note = "Order: tea";
const found = /tea/.test(note);
const next = note.replace(/tea/, "mint");
document.querySelector("#line").textContent = found + " / " + next;
</script>
</body>
</html>
The line reads true / Order: mint. note itself is still Order: tea. lida / mint / 2 was the map page.
At the counter
- Test mint tea with /tea/. The result is true.
- Test lemon with /tea/. The result is false.
- Test mint tea with /^tea$/. The result is false.
- Match tea and tea with /tea/g. The array length is 2.
- Read the page. The line is true / Order: mint.
Misses
A pattern without ^ and $ matches a piece, not the whole note. replace does not edit the original.
- Reading
null.lengthwhenmatchfound nothing - Expecting
replaceto changenotein place - Putting
gon a regex you reuse withtest, which remembers where it stopped - Forgetting
\.when you meant a period - Reading the line as lida / mint / 2
Keep this
/tea/.testanswers true or false/^tea$/accepts only the whole string teamatchwithglists every copy, or returns nullreplacereturns a new string- The page line is true / Order: mint
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top