👨‍🎓A Quick Start Guide to RegEx in JavaScript

Are you struggling to understand Regular Expressions (Regex) in JavaScript? 🤔 Don't worry! This guide will simplify everything for you.

🤨 What is Regex?

Regex (Regular Expressions) is a search pattern used to match text. It helps in finding, extracting and replacing patterns in strings.

╰┈➤ Example:

let text = "Hello, World!";
let pattern = /World/; // A regex to find "World"
console.log(pattern.test(text)); // true ✅

✨ Basic Regex Methods

╰┈➤ Example of test()

let sentence = "The cat jumps!";
let regex = /cat/;
console.log(regex.test(sentence)); // true ✅

╰┈➤ Example of match()

let sentence = "Rainy days are beautiful!";
let regex = /rainy/i;
console.log(sentence.match(regex)); // [ 'Rainy', index: 0, input: 'Rainy days are beautiful!', groups: undefined ]

📝 Note: i makes the search case-insensitive.

🔍 Special Characters & Patterns

🔥 Example: Match Words with . (Wildcard)

let sentence = "The bat, cat, and hat are in the room!";
let regex = /b.t/g; // Matches words like "bat", "bit", "bot" etc.
console.log(sentence.match(regex)); // [ 'bat' ]

📝 Note: g finds all occurrences instead of stopping at the first match.

🚩 Using Flags (g, i, m)

🔥 Example: Case-Insensitive Search with i

let text = "HELLO hello Hello hElLo";
let regex = /hello/ig;
console.log(text.match(regex)); // [ 'HELLO', 'hello', 'Hello', 'hElLo' ]

☣︎ Matching Numbers & Letters

🔥 Example: Extracting Digits

let price = "The total is $120.99!";
let regex = /\d+/g;
console.log(price.match(regex)); // ['120', '99']

⏳ Greedy vs. Lazy Matching

🧐 Greedy Matching: Takes as much text as possible.

let str = "abc123def456";
let regex = /\d+/;
console.log(str.match(regex)); // ['123'] (greedy, matches longest possible number)

🧐 Lazy Matching: Stops at the first match.

let regexLazy = /\d+?/;
console.log(str.match(regexLazy)); // ['1'] (lazy, matches shortest possible number)

📌 Anchors ^ and $

🔥 Example: Matching Start & End

let phrase = "Start here, end there";
let startRegex = /^Start/;
let endRegex = /there$/;
console.log(startRegex.test(phrase)); // true ✅
console.log(endRegex.test(phrase)); // true ✅

📖 More Learning Resources ↓

🔗 Check out my Technical Presentation
🔗 MDN Web Docs

📋✅ Master Regex with this Checklist

📖 Understand what Regex is and how it works 🤓

📖 Learn basic Regex methods: test(), match() ✅

📖 Practice special characters (., *, +, ?, {} etc.) 🔣

📖 Explore Regex flags like g, i, m 🚀

📖 Learn to match numbers, letters and whitespace (\d, \w, \s, etc.) 🔢

📖 Understand greedy vs. lazy matching ⏳

📖 Use anchors (^, $) to match start or end of a string 🎯

♡ Happy Coding! ♡