JavaScript Fundamentals

Regular Expressions

Powerful patterns for searching and manipulating text

Find videos you like?

Save to resource drawer for future reference!

What are Regular Expressions?

Regular expressions (regex) are patterns used to find and match text. Think of them as super-powered search with special codes to find emails, phone numbers, or any text pattern!

Why Use Regex?

Instead of checking each character manually, regex lets you describe the pattern you're looking for. Perfect for validation (emails, phone numbers) and text processing!

Creating Regular Expressions

Two ways to create regex patterns

Two Syntaxes

1. Literal notation (common)

Pattern between forward slashes

const regex = /hello/;
const regex2 = /hello/gi;  // with flags

2. Constructor (dynamic)

Use when pattern comes from variable

const regex = new RegExp('hello');
const regex2 = new RegExp('hello', 'gi');  // with flags

Creating Regex Examples

Both ways to create patterns

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Testing & Matching

Methods to use regex patterns

Main Methods

test() - Returns true/false

Check if pattern exists in string

const regex = /hello/;
console.log(regex.test('hello world'));  // true
console.log(regex.test('goodbye'));      // false

match() - Returns matches array

Find and extract matches

const text = 'cat bat rat';
const matches = text.match(/at/g);
console.log(matches);  // ['at', 'at', 'at']

replace() - Replace matches

Replace pattern with new text

const text = 'I love cats';
const newText = text.replace(/cats/, 'dogs');
console.log(newText);  // 'I love dogs'

Basic Methods Examples

Using test(), match(), and replace()

javascript

code

DarkEditable

const text = 'The quick brown fox jumps over the lazy dog';

// test() - Check if pattern exists
const hasQuick = /quick/.test(text);
console.log(hasQuick);  // true

const hasSlow = /slow/.test(text);
console.log(hasSlow);  // false

// match() - Find matches
const words = text.match(/\w+/g);  // \w+ = one or more word characters
console.log(words);
// ['The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog']

// Find all 'o' characters
const oLetters = text.match(/o/g);
console.log(oLetters);  // ['o', 'o', 'o', 'o']

// replace() - Replace text
const newText = text.replace(/fox/, 'cat');
console.log(newText);
// 'The quick brown cat jumps over the lazy dog'

// Replace all (use /g flag)
const noThe = text.replace(/the/gi, 'a');  // i = case-insensitive
console.log(noThe);
// 'a quick brown fox jumps over a lazy dog'

// Real-world: Remove spaces
const phone = '123 456 7890';
const cleaned = phone.replace(/\s/g, '');  // \s = whitespace
console.log(cleaned);  // '1234567890'

Console Output

Click "Run Code" to see output here...

Common Patterns

Special characters and shortcuts

Character Classes

\\d - Any digit (0-9)

\\w - Any word character (a-z, A-Z, 0-9, _)

\\s - Any whitespace (space, tab, newline)

. - Any character (except newline)

\\D, \\W, \\S - Opposite (NOT digit, word, whitespace)

Pattern Examples

Using special characters

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Quantifiers

Specify how many times a pattern should match

Repetition

+ - One or more (1+)

* - Zero or more (0+)

? - Zero or one (optional)

{ n } - Exactly n times

{ n, } - n or more times

{ n,m } - Between n and m times

Quantifier Examples

Specifying repetition

javascript

code

DarkEditable

// + (one or more)
const text1 = 'goooooal!';
const match1 = text1.match(/o+/);
console.log(match1[0]);  // 'oooooo'

// * (zero or more)
const text2 = 'color colour';
const match2 = text2.match(/colou?r/g);  // u is optional
console.log(match2);  // ['color', 'colour']

// ? (optional)
const text3 = 'http://example.com https://secure.com';
const urls = text3.match(/https?:\/\/\w+\.\w+/g);
console.log(urls);
// ['http://example.com', 'https://secure.com']

// {n} (exactly n)
const zipCode = '12345';
const isValid = /^\d{5}$/.test(zipCode);
console.log(isValid);  // true

// {n,} (n or more)
const password = 'myPass123';
const longEnough = /^.{8,}$/.test(password);  // at least 8 chars
console.log(longEnough);  // true

// {n,m} (between n and m)
const phone = '555-1234';
const hasValidDigits = /\d{3,4}/.test(phone);
console.log(hasValidDigits);  // true

// Real-world: Phone number
const phonePattern = /\d{3}-\d{3}-\d{4}/;
console.log(phonePattern.test('555-123-4567'));  // true
console.log(phonePattern.test('555-1234'));      // false

Console Output

Click "Run Code" to see output here...

Regex Flags

Modify how patterns work

Common Flags

g (global)

Find all matches, not just first

i (ignore case)

Case-insensitive matching

m (multiline)

^ and $ match start/end of each line

Flags Examples

Using g, i, and m flags

javascript

code

DarkEditable

const text = 'The cat and the Cat sat on the mat';

// Without flags - finds first match only
const match1 = text.match(/cat/);
console.log(match1);  // ['cat'] (first one only)

// g flag - find all matches
const match2 = text.match(/cat/g);
console.log(match2);  // ['cat'] (still just lowercase)

// i flag - case-insensitive
const match3 = text.match(/cat/i);
console.log(match3);  // ['cat'] (first match, any case)

// gi flags - all matches, any case
const match4 = text.match(/cat/gi);
console.log(match4);  // ['cat', 'Cat'] (all matches)

// Replace all occurrences
const newText = text.replace(/cat/gi, 'dog');
console.log(newText);
// 'The dog and the dog sat on the mat'

// m flag - multiline
const multiline = `First line
Second line
Third line`;

// Without m - ^ only matches start of string
const match5 = multiline.match(/^\w+/);
console.log(match5);  // ['First']

// With m - ^ matches start of each line
const match6 = multiline.match(/^\w+/gm);
console.log(match6);  // ['First', 'Second', 'Third']

Console Output

Click "Run Code" to see output here...

Real-World Validation

Common patterns for validation

Validation Patterns

Email (basic)

/^[\w.-]+@[\w.-]+\.\w+$/

Phone (US format)

/^\d{3}-\d{3}-\d{4}$/

URL (basic)

/^https?:\/\/[\w.-]+\.\w+/

Password (8+ chars, letter + number)

/^(?=.*[a-z])(?=.*\d).{8,}$/

Validation Examples

Real-world form validation

javascript

code

DarkEditable

// Email validation
function validateEmail(email) {
  const emailPattern = /^[\w.-]+@[\w.-]+\.\w+$/;
  return emailPattern.test(email);
}

console.log(validateEmail('user@example.com'));  // true
console.log(validateEmail('invalid-email'));     // false

// Phone validation (US format: 555-123-4567)
function validatePhone(phone) {
  const phonePattern = /^\d{3}-\d{3}-\d{4}$/;
  return phonePattern.test(phone);
}

console.log(validatePhone('555-123-4567'));  // true
console.log(validatePhone('5551234567'));    // false

// URL validation
function validateURL(url) {
  const urlPattern = /^https?:\/\/[\w.-]+\.\w+/;
  return urlPattern.test(url);
}

console.log(validateURL('https://example.com'));  // true
console.log(validateURL('example.com'));          // false

// Password validation (8+ chars, has letter and number)
function validatePassword(password) {
  const hasLength = password.length >= 8;
  const hasLetter = /[a-z]/i.test(password);
  const hasNumber = /\d/.test(password);
  
  return hasLength && hasLetter && hasNumber;
}

console.log(validatePassword('pass123'));      // false (too short)
console.log(validatePassword('password'));     // false (no number)
console.log(validatePassword('password123'));  // true

// Extract all emails from text
const text = 'Contact us at support@example.com or sales@company.com';
const emails = text.match(/[\w.-]+@[\w.-]+\.\w+/g);
console.log(emails);
// ['support@example.com', 'sales@company.com']

// Format phone numbers
function formatPhone(phone) {
  // Remove non-digits
  const cleaned = phone.replace(/\D/g, '');
  
  // Format as XXX-XXX-XXXX
  if (cleaned.length === 10) {
    return cleaned.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  }
  return phone;
}

console.log(formatPhone('5551234567'));      // '555-123-4567'
console.log(formatPhone('(555) 123-4567'));  // '555-123-4567'

Console Output

Click "Run Code" to see output here...

Quick Reference & Tips

Do This ✅

• Use test() for yes/no checks
• Use match() to extract data
• Add /g flag to find all matches
• Add /i for case-insensitive
• Test patterns on regex101.com

Avoid This ❌

• Don't make regex too complex (hard to maintain)
• Don't forget to escape special chars: . + * ? [ ] ()
• Don't use regex for parsing HTML/XML
• Don't forget the /g flag when replacing all
• Don't over-validate (keep it simple)

Common Patterns Cheat Sheet

\\d - digit

\\w - word char

\\s - whitespace

. - any char

+ - one or more

* - zero or more

? - optional

^ - start

$ - end

[abc] - a, b, or c

[0-9] - any digit

(abc) - group

Learning Tip

Start simple! Master basic patterns first, then add complexity. Use online regex testers like regex101.com to experiment and learn!

Previous Topic

String Methods

Common methods: charAt, slice, indexOf, includes, split, replace, trim.

Next Topic

Scope

Understanding lexical scope, block scope, and function scope.

Ask a Question

Have a question about Regular Expressions? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

Regular Expressions

Powerful patterns for searching and manipulating text

Find videos you like?

Save to resource drawer for future reference!

What are Regular Expressions?

Regular expressions (regex) are patterns used to find and match text. Think of them as super-powered search with special codes to find emails, phone numbers, or any text pattern!

Why Use Regex?

Instead of checking each character manually, regex lets you describe the pattern you're looking for. Perfect for validation (emails, phone numbers) and text processing!

Creating Regular Expressions

Two ways to create regex patterns

Two Syntaxes

1. Literal notation (common)

Pattern between forward slashes

const regex = /hello/;
const regex2 = /hello/gi;  // with flags

2. Constructor (dynamic)

Use when pattern comes from variable

const regex = new RegExp('hello');
const regex2 = new RegExp('hello', 'gi');  // with flags

Creating Regex Examples

Both ways to create patterns

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Testing & Matching

Methods to use regex patterns

Main Methods

test() - Returns true/false

Check if pattern exists in string

const regex = /hello/;
console.log(regex.test('hello world'));  // true
console.log(regex.test('goodbye'));      // false

match() - Returns matches array

Find and extract matches

const text = 'cat bat rat';
const matches = text.match(/at/g);
console.log(matches);  // ['at', 'at', 'at']

replace() - Replace matches

Replace pattern with new text

const text = 'I love cats';
const newText = text.replace(/cats/, 'dogs');
console.log(newText);  // 'I love dogs'