JavaScript Notes
Master JavaScript regex quantifiers: *, +, ?, {n}, {n,m}, greedy vs lazy matching, possessive, and real-world examples for form validation patterns. Interview Q&A included.
Quantifiers specify how many times a character, group, or character class must appear for the pattern to match. They are the key to matching variable-length text like phone numbers, passwords, and usernames.
📊 Quantifiers Visual Reference
💻 Example 1 — Basic Quantifiers
// * — zero or more
console.log(/ab*/.test("a")); // true — 'b' appears 0 times
console.log(/ab*/.test("ab")); // true — 'b' appears 1 time
console.log(/ab*/.test("abbb")); // true — 'b' appears 3 times
console.log(/ab*/.test("cd")); // false — no 'a' at all
// + — one or more
console.log(/ab+/.test("a")); // false — 'b' must appear at least once
console.log(/ab+/.test("ab")); // true
console.log(/ab+/.test("abbb")); // true
// ? — zero or one (optional)
console.log(/colou?r/.test("color")); // true — 'u' is optional
console.log(/colou?r/.test("colour")); // true — 'u' is present
console.log(/colou?r/.test("colouur")); // false — 'uu' is not {0,1}true true true false false true true true true false
💻 Example 2 — Exact and Range Quantifiers {n}, {n,m}
true false false true true false true false false true
💻 Example 3 — Greedy vs Lazy Matching
Greedy: <b>bold</b> and <i>italic</i> Lazy: [ '<b>', '</b>', '<i>', '</i>' ] Greedy quotes: "first" and "second" and "third" Lazy quotes: [ '"first"', '"second"', '"third"' ]
💻 Example 4 — Practical Validation Patterns
true false false true false true false true false true
📋 Quantifier Quick Reference
| Quantifier | Meaning | Example | Matches |
|---|---|---|---|
* | 0 or more | /go*/ | "g", "go", "goo" |
+ | 1 or more | /go+/ | "go", "goo" (not "g") |
? | 0 or 1 | /go?/ | "g", "go" (not "goo") |
{3} | Exactly 3 | /\d{3}/ | "123" |
{3,} | 3 or more | /\d{3,}/ | "123", "1234" |
{3,5} | 3 to 5 | /\d{3,5}/ | "123", "12345" |
*? | Lazy 0 or more | /<.*?>/ | shortest match |
+? | Lazy 1 or more | /<.+?>/ | shortest match |
⚠️ Common Mistakes
❌ Mistake 1 — Greedy Quantifier Eating Too Much
<div>Hello</div><div>World</div> <div>Hello</div>
❌ Mistake 2 — Forgetting ^ and $ with Quantifiers
// Without anchors — partial match passes!
console.log(/\d{4}/.test("abc2026xyz")); // true — finds 2026 inside
console.log(/^\d{4}$/.test("abc2026xyz")); // false — requires FULL string to be 4 digitstrue false
❌ Mistake 3 — {0,1} and ? Are Equivalent
// These are the same:
console.log(/colou?r/.test("color")); // true
console.log(/colou{0,1}r/.test("color")); // true — same thingtrue true
🎯 Key Takeaways
- Quantifiers control how many times the preceding element must occur
*= 0 or more,+= 1 or more,?= 0 or 1 (optional){n}= exactly n,{n,}= at least n,{n,m}= between n and m- By default quantifiers are greedy — they match as much as possible
- Add
?after a quantifier (*?,+?,{n,m}?) to make it lazy (match as little as possible) - Always use
^and$anchors with quantifiers for full-string validation
❓ Interview Questions
Q1. What is a regex quantifier? > A quantifier specifies how many times the preceding element must appear. + means one or more, * means zero or more, ? means zero or one (optional), {n,m} means between n and m times.
Q2. What is greedy matching? > By default, quantifiers are greedy — they match as many characters as possible while still allowing the overall pattern to succeed. /<.+>/ on <b>text</b> matches the entire string, not just <b>.
Q3. What is lazy (non-greedy) matching? > Adding ? after a quantifier makes it lazy — it matches as few characters as possible. /<.+?>/ matches <b> (the shortest possible match), not the entire string.
**Q4. What is the difference between + and *?** > + requires at least one occurrence (one or more). * allows zero occurrences (zero or more). /\d+/ fails on non-digit strings; /\d*/ succeeds even on an empty string.
Q5. How do you match exactly 10 digits? > Use {10}: /^\d{10}$/ — the ^ and $ anchors ensure the entire string is exactly 10 digits.
Q6. What does ? after a quantifier do? > It converts the quantifier from greedy to lazy. .*? matches as few characters as possible. Without ?, .* matches as many as possible.
Q7. What is the difference between ? as a quantifier and ? in a group (?:...)? > As a quantifier after a character/group, ? means "optional" (0 or 1). Inside (?:...), the ?: is a non-capturing group modifier — different purpose entirely.
Q8. How would you validate a PIN code of exactly 4-6 digits? > /^\d{4,6}$/ — anchored with ^ and $ for full-string match, \d for digits, {4,6} for 4 to 6 repetitions.
Exam Focus
Revise definitions, diagrams, examples, and short-answer points for JavaScript Regex Quantifiers – *, +, ?, {n,m}, Greedy vs Lazy Matching.
Interview Use
Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.
Search Terms
javascript-complete-guide, javascript master course, javascript, complete, guide, regex, quantifiers, javascript regex quantifiers – *, +, ?, {n,m}, greedy vs lazy matching
Related JavaScript Master Course Topics