DEV Community

Cover image for Regular Expressions Fast – JavaScript Regex (Beginner to Pro)
Mahmud Rahman
Mahmud Rahman

Posted on

Regular Expressions Fast – JavaScript Regex (Beginner to Pro)

#javascript #regex #beginners #learning

If the words regular expression make you nervous, good. That means you haven’t wasted years avoiding one of the most powerful tools in programming.

Regex is not magic. It’s just a compact language for finding, validating, extracting, and replacing text. Once you understand the rules, it becomes predictable and fast.

This article is beginner‑friendly, but it does not dumb things down. We’ll cover regex properly, with clean JavaScript examples and practical use cases.

What Is a Regular Expression?

A regular expression (regex) is a pattern used to match text.

In JavaScript, regex is mainly used with strings:

const text = "hello world";
text.match(/world/); // ['world']
Enter fullscreen mode Exit fullscreen mode

You define regex patterns using:

/pattern/flags
Enter fullscreen mode Exit fullscreen mode

Example:

/hello/i
Enter fullscreen mode Exit fullscreen mode
  • hello → pattern
  • i → flag (case‑insensitive)

How Regex Works (Mental Model)

Regex works left to right, character by character.

Think of it like this:

  • The engine reads the string
  • Tries to match your pattern
  • Stops when it fails or succeeds

No mystery. Just rules.

Creating Regex in JavaScript

1. Literal syntax (most common) 

const regex = /abc/;
Enter fullscreen mode Exit fullscreen mode

2. Constructor syntax (dynamic patterns) 

const word = "abc";
const regex = new RegExp(word);
Enter fullscreen mode Exit fullscreen mode

Use the constructor only when patterns must be dynamic.

Common Regex Methods in JavaScript

test() → true / false 

/abc/.test("abc123"); // true
Enter fullscreen mode Exit fullscreen mode

match() → get matched result 

"abc123".match(/abc/);
Enter fullscreen mode Exit fullscreen mode

replace() → replace text 

"hello world".replace(/world/, "JS");
Enter fullscreen mode Exit fullscreen mode

search() → index of match 

"hello".search(/e/); // 1
Enter fullscreen mode Exit fullscreen mode

Characters and Literals

Basic matching:

/hello/   // matches "hello"
Enter fullscreen mode Exit fullscreen mode

Regex is case‑sensitive by default.

/hello/i  // matches "Hello", "HELLO"
Enter fullscreen mode Exit fullscreen mode

Special Characters (Meta Characters)

These characters have special meaning:

. ^ $ * + ? ( ) [ ] { } | \
Enter fullscreen mode Exit fullscreen mode

To match them literally, escape with \\:

/\./  // matches a dot
Enter fullscreen mode Exit fullscreen mode

Character Classes [ ]

Match one character from a set:

/[abc]/     // a OR b OR c
/[0-9]/     // any digit
/[a-z]/     // lowercase letters
/[A-Z]/     // uppercase letters
Enter fullscreen mode Exit fullscreen mode

Negation:

/[^0-9]/    // NOT a digit
Enter fullscreen mode Exit fullscreen mode

Shorthand Character Classes

Pattern Meaning
\d digit (0–9)
\D not digit
\w word char (a–z, A–Z, 0–9, _)
\W not word
\s whitespace
\S not whitespace

Example:

/\d+/.test("123"); // true
Enter fullscreen mode Exit fullscreen mode

Quantifiers (How Many?)

Quantifiers control repetition.

Symbol Meaning
* 0 or more
+ 1 or more
? 0 or 1
{n} exactly n
{n,} n or more
{n,m} between n and m

Examples:

/a*/    // "", "a", "aaaa"
/a+/    // "a", "aaaa"
/a{2}/  // "aa"
Enter fullscreen mode Exit fullscreen mode

Greedy vs Lazy Matching

Regex is greedy by default.

"<div>test</div>".match(/<.*>/);
// matches everything
Enter fullscreen mode Exit fullscreen mode

Lazy version:

"<div>test</div>".match(/<.*?>/);
Enter fullscreen mode Exit fullscreen mode

Add ? to make it lazy.

Anchors ^ and $

Anchors match positions, not characters.

/^hello/   // starts with hello
/world$/  // ends with world
Enter fullscreen mode Exit fullscreen mode

Useful for validation.

Groups ( )

Groups let you capture parts of a match.

const result = "2025-12-18".match(/(\d{4})-(\d{2})-(\d{2})/);

result[1]; // year
result[2]; // month
result[3]; // day
Enter fullscreen mode Exit fullscreen mode

Non‑capturing group:

/(?:abc)+/
Enter fullscreen mode Exit fullscreen mode

Alternation | (OR) 

/cat|dog/
Enter fullscreen mode Exit fullscreen mode

Matches either cat or dog.

Flags

Flag Meaning
g global
i case‑insensitive
m multiline
s dot matches newline
u unicode
y sticky

Example:

/hello/gi
Enter fullscreen mode Exit fullscreen mode

Lookaheads & Lookbehinds

Positive Lookahead 

/\d(?=px)/  // digit followed by px
Enter fullscreen mode Exit fullscreen mode

Negative Lookahead 

/\d(?!px)/
Enter fullscreen mode Exit fullscreen mode

Lookbehind (modern JS) 

/(?<=\$)\d+/
Enter fullscreen mode Exit fullscreen mode

Use sparingly. They reduce readability.

Common Real‑World Examples

Email Validation (simple) 

/^[^\s@]+@[^\s@]+\.[^\s@]+$/
Enter fullscreen mode Exit fullscreen mode

Phone Number 

/^\+?\d{10,14}$/
Enter fullscreen mode Exit fullscreen mode

Password (basic rules) 

/^(?=.*[A-Z])(?=.*\d).{8,}$/
Enter fullscreen mode Exit fullscreen mode

Performance Tips (Important)

  • Avoid .* when possible
  • Anchor your regex (^, $)
  • Keep patterns specific
  • Don’t overuse lookarounds

Bad regex will be slow.

Debugging Regex

Use tools:

  • Regex101
  • Regexr

Test small. Build step by step.

Final Advice (Brutally Honest)

Regex is not hard.

Unreadable regex is your fault, not regex’s.

If your pattern looks like line noise:

  • Break it
  • Comment it
  • Or don’t use regex at all

Use regex when it simplifies the problem, not to show off.

Cheat Sheet 

.      any char
\d     digit
\w     word
\s     space
+      one or more
*      zero or more
?      optional
^      start
$      end
|      OR
()     group
Enter fullscreen mode Exit fullscreen mode

If you master regex, text stops being messy.
It becomes structured.

And that skill pays forever.

Follow for more! @mahmud-r-farhan
Contact: https://gravatar.com/floawd

Top comments (0)