🔍 Regular Expressions: The Pattern Detective

Imagine you have a magical magnifying glass that can find ANY pattern in a giant book instantly. That’s what Regular Expressions (RegExp) do for text!

🌟 What Are Regular Expressions?

Think of Regular Expressions like a super-smart search tool.

Simple Example:

• You want to find all phone numbers in a huge document
• Instead of looking one by one, you describe the PATTERN: “10 digits”
• The magical tool finds ALL of them in one second!

Real Life:

• When you search for “*.jpg” to find all pictures = pattern matching
• When a website checks if your email is valid = RegExp
• When your phone highlights phone numbers in messages = RegExp

🏗️ RegExp Creation

There are two ways to create a pattern detector:

Method 1: The Slash Way (Literal)

const pattern = /hello/;

Think of the slashes / like quotation marks, but for patterns!

Method 2: The Constructor Way

const pattern = new RegExp('hello');

Use this when your pattern comes from user input or a variable.

When to Use Which?

Example:

// Fixed pattern - use slashes
const findCat = /cat/;

// Dynamic pattern - use constructor
const userSearch = "dog";
const findIt = new RegExp(userSearch);

🧪 Test and Exec Methods

These are your two detective tools!

The test() Method - Yes or No Detective

Ask a simple question: “Does this pattern exist?”

const pattern = /apple/;

pattern.test("I love apples");
// Returns: true ✅

pattern.test("I love oranges");
// Returns: false ❌

Think of it like: Asking “Is there a cat in this room?” → Yes or No

The exec() Method - Full Investigation

Get all the details about what you found!

const pattern = /apple/;
const result = pattern.exec("I love apples");

// result[0] = "apple" (what was found)
// result.index = 7 (where it was found)

Think of it like: “Find the cat and tell me WHERE it is and WHAT it looks like”

graph TD
    A[Your Pattern] --> B{Which Method?}
    B -->|Just need Yes/No| C[test]
    C --> D[Returns true/false]
    B -->|Need Details| E[exec]
    E --> F[Returns match + position]

🚩 Regular Expression Flags

Flags are like special powers you give to your pattern!

Add them after the closing slash: /pattern/flags

The Main Flags

Examples:

// Without 'i' flag - case matters
/cat/.test("CAT");  // false ❌

// With 'i' flag - case ignored
/cat/i.test("CAT"); // true ✅

// Without 'g' - finds only first
"cat cat cat".match(/cat/);
// ["cat"]

// With 'g' - finds ALL
"cat cat cat".match(/cat/g);
// ["cat", "cat", "cat"]

Memory Trick:

• g = Get all of them
• i = Ignore uppercase/lowercase
• m = Multiple lines matter

🎨 Regular Expression Patterns

Patterns are the descriptions of what you’re looking for!

Simple Patterns

Just type what you want to find:

/hello/  // Finds "hello"
/123/    // Finds "123"

Special Pattern Characters

Some characters have magic powers:

// Find any 3 digits
/\d\d\d/.test("My code is 789");
// true ✅

// Find any word
/\w+/.exec("Hello there");
// ["Hello"]

📝 String Methods with Regex

Strings have special methods that work with patterns!

match() - Find Matches

const text = "I have 3 cats and 2 dogs";
text.match(/\d/g);
// ["3", "2"]

replace() - Find and Replace

const text = "I love cats";
text.replace(/cats/, "dogs");
// "I love dogs"

search() - Find Position

const text = "Hello World";
text.search(/World/);
// 6 (position where "World" starts)

split() - Break Apart

const text = "apple,banana,cherry";
text.split(/,/);
// ["apple", "banana", "cherry"]

graph TD
    A[String + Pattern] --> B{What do you need?}
    B -->|Get all matches| C[match]
    B -->|Swap text| D[replace]
    B -->|Find position| E[search]
    B -->|Break into pieces| F[split]

🔤 Character Classes

Character classes let you say “match ANY of these characters!”

Using Square Brackets [ ]

// Match a, b, OR c
/[abc]/.test("cat");   // true ✅
/[abc]/.test("dog");   // false ❌

Ranges with Dash -

// Any lowercase letter
/[a-z]/.test("hello"); // true ✅

// Any digit
/[0-9]/.test("abc123"); // true ✅

// Any letter (upper or lower)
/[a-zA-Z]/.test("Hello"); // true ✅

Negation with ^

Put ^ at the start to mean “NOT these”:

// NOT a vowel
/[^aeiou]/.test("b"); // true ✅
/[^aeiou]/.test("a"); // false ❌

Built-in Character Classes

📏 Quantifiers and Anchors

Quantifiers - “How Many?”

Tell the pattern how many times to match!

// Find words with 2+ o's
/go+d/.test("good");  // true ✅
/go+d/.test("gd");    // false ❌

// Phone pattern: 3 digits, dash, 4 digits
/\d{3}-\d{4}/.test("555-1234"); // true ✅

Anchors - “Where Exactly?”

Anchors don’t match characters - they match positions!

// Must START with "Hello"
/^Hello/.test("Hello World");  // true ✅
/^Hello/.test("Say Hello");    // false ❌

// Must END with "World"
/World$/.test("Hello World");  // true ✅
/World$/.test("World Cup");    // false ❌

// Complete word only
/\bcat\b/.test("cat");         // true ✅
/\bcat\b/.test("category");    // false ❌

🎁 Groups and Capturing

Groups let you bundle patterns together and remember what they matched!

Basic Groups with ( )

// Group "ha" and repeat it
/(ha)+/.test("hahaha"); // true ✅

// Match "gray" or "grey"
/gr(a|e)y/.test("gray"); // true ✅
/gr(a|e)y/.test("grey"); // true ✅

Capturing - Remember What Matched!

Groups automatically save what they matched:

const pattern = /(\d{3})-(\d{4})/;
const result = pattern.exec("555-1234");

// result[0] = "555-1234" (full match)
// result[1] = "555" (first group)
// result[2] = "1234" (second group)

Using Captured Groups in Replace

Use $1, $2, etc. to reference captured groups:

// Swap first and last name
const name = "John Smith";
name.replace(/(\w+) (\w+)/, "$2, $1");
// "Smith, John"

Non-Capturing Groups (?:)

When you need grouping but don’t need to remember:

// Group but don't capture
/(?:ha)+/.test("hahaha"); // true ✅
// No $1 available - it wasn't captured!

graph TD
    A[Groups] --> B[Capturing]
    A --> C[Non-Capturing]
    B --> D["#40;pattern#41;"]
    B --> E[Saves to $1, $2...]
    C --> F["#40;?:pattern#41;"]
    C --> G[Just for grouping]

🚀 Putting It All Together

Here’s how all the pieces work together:

// Email validation pattern
const emailPattern = /^[\w.-]+@[\w.-]+\.\w{2,}$/;

// Let's break it down:
// ^           - Start of string
// [\w.-]+     - One or more word chars, dots, or dashes
// @           - Literal @ symbol
// [\w.-]+     - Domain name
// \.          - Literal dot (escaped)
// \w{2,}      - 2 or more word chars (com, org, etc.)
// $           - End of string

emailPattern.test("user@example.com"); // true ✅
emailPattern.test("bad@email");        // false ❌

🎯 Quick Reference

🌈 You Did It!

You now understand:

• ✅ How to create patterns with /pattern/ or new RegExp()
• ✅ How to test with test() and investigate with exec()
• ✅ How flags like g, i, m give patterns superpowers
• ✅ How character classes [abc] match any of several characters
• ✅ How quantifiers +, *, ?, {n} control repetition
• ✅ How anchors ^, $, \b match positions
• ✅ How groups () bundle and capture matches

Regular expressions are like learning a secret code - once you know it, you can find ANY pattern in ANY text instantly! 🔍✨