DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. Regular Expressions in JavaScript: A Practical Guide
XLinkedInReddit
MediumFrontend Engineering

Regular Expressions in JavaScript: A Practical Guide

D
DevPrep Team
February 10, 2026·2 min read·0
Table of Contents
  • Essential Syntax
  • Practical Patterns
  • Named Groups
  • Lookahead and Lookbehind
  • Performance Tips

Regex is a superpower that most developers fear. Let me demystify it with practical patterns you'll use daily.

Essential Syntax

// Character classes
\\d    // digit [0-9]
\\w    // word char [a-zA-Z0-9_]
\\s    // whitespace
.     // any char except newline
[abc] // a, b, or c
[^abc] // NOT a, b, or c

// Quantifiers
*     // 0 or more
+     // 1 or more
?     // 0 or 1
{3}   // exactly 3
{2,5} // 2 to 5

// Anchors
^     // start of string
$     // end of string
\\b    // word boundary

Practical Patterns

// Email validation (simplified)
const email = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}$/;

// URL extraction
const urls = /https?:\\/\\/[^\\s]+/g;

// Phone number (flexible)
const phone = /\\+?\\d{1,3}[-.\\s]?\\(?\\d{1,4}\\)?[-.\\s]?\\d{1,4}[-.\\s]?\\d{1,9}/;

// Password strength (min 8 chars, uppercase, lowercase, digit, special)
const strongPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]{8,}$/;

// HTML tag stripping
const stripped = html.replace(/<[^>]*>/g, "");

Named Groups

const dateRegex = /(?<year>\\d{4})-(?<month>\\d{2})-(?<day>\\d{2})/;
const match = "2024-01-15".match(dateRegex);
console.log(match.groups.year);  // "2024"
console.log(match.groups.month); // "01"

Lookahead and Lookbehind

// Positive lookahead: match "foo" followed by "bar"
/foo(?=bar)/ // matches "foo" in "foobar", not in "foobaz"

// Negative lookahead: match "foo" NOT followed by "bar"
/foo(?!bar)/ // matches "foo" in "foobaz", not in "foobar"

// Lookbehind
/(?<=\\$)\\d+/ // match digits preceded by $: "$100" → "100"

Performance Tips

  • Avoid catastrophic backtracking: /(a+)+$/ is O(2^n) on non-matching strings
  • Use non-greedy quantifiers (*?, +?) when possible
  • Anchor patterns with ^ and $
  • Cache compiled RegExp objects — don't create new ones in loops
  • Use String.includes() instead of regex for simple substring checks

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • Essential Syntax
  • Practical Patterns
  • Named Groups
  • Lookahead and Lookbehind
  • Performance Tips

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.