Regex for Beginners: A Practical Tutorial with Examples

Regex Looks Like a Cat Walked on Your Keyboard. Let's Fix That.

If you've ever seen something like ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ and thought "nope, that's black magic" — you're not alone. Regular expressions (regex) have a reputation for being unreadable, and honestly, the complex ones kind of are.

But here's the secret: you don't need to understand complex regex to start using them. Simple patterns are genuinely simple, and they solve real problems every day — finding phone numbers in text, validating email inputs, extracting dates from logs, cleaning up messy data.

Think of regex as a search-on-steroids. Instead of searching for an exact word, you describe a pattern of what the text should look like, and the regex engine finds everything that matches.

Starting Simple: Literal Text

The simplest regex is just... text. The pattern hello matches the word "hello" anywhere in the input:

Pattern: hello
Text:    "say hello world"
Match:       ^^^^^ (found it!)

Regex is case-sensitive by default. hello won't match "Hello" unless you add the i flag (more on flags later).

The Special Characters (Your New Superpowers)

The Dot (.) — "Any Character"

A dot matches any single character (except newlines). Think of it as a wildcard card in Scrabble.

Pattern: c.t
Matches: "cat", "cot", "cut", "c@t", "c3t"
Nope:    "ct" (missing a char), "cart" (too many chars)

Character Classes [] — "Pick One From This Menu"

Square brackets let you define a set of acceptable characters for one position:

[aeiou]    — matches any vowel
[0-9]      — matches any digit (the dash means "range")
[a-zA-Z]   — matches any letter
[^0-9]     — matches anything that is NOT a digit

The ^ inside brackets means "not." It's like saying "anything except these."

Shorthand Classes — Common Shortcuts

\d — any digit         (same as [0-9])
\w — any "word" char   (letters, digits, underscore)
\s — any whitespace    (space, tab, newline)
\D — any NON-digit
\W — any NON-word char
\S — any NON-whitespace

Quantifiers: "How Many?"

Quantifiers tell the engine how many times something should appear:

*     — zero or more (greedy)
+     — one or more
?     — zero or one (optional)
{3}   — exactly 3 times
{2,5} — between 2 and 5 times
{3,}  — 3 or more times

Let's see them work:

colou?r     → matches "color" AND "colour" (the u is optional)
\d{3}-\d{4} → matches "555-1234" (3 digits, dash, 4 digits)
a+          → in "baaab", matches "aaa" (one or more a's)

Anchors: "Where in the String?"

Anchors don't match characters — they match positions. Think of them as invisible boundary markers:

^     — start of string
$     — end of string
\b    — word boundary (where a word starts or ends)

^Hello   → matches "Hello world" but NOT "Say Hello"
end$     → matches "the end" but NOT "endless"
\bcat\b  → matches "the cat sat" but NOT "concatenate"

Groups and "Or" Statements

Parentheses () group parts together. The pipe | means "or":

(ha)+       → matches "hahaha" (the group "ha" repeated)
cat|dog     → matches "cat" or "dog"
(Mon|Fri)day → matches "Monday" or "Friday"

// Capturing groups also remember what they matched:
(\d{4})-(\d{2})-(\d{2})
Input: "2026-02-10"
Group 1: "2026", Group 2: "02", Group 3: "10"

Let's Build Something Real

Validate a (Simplified) Email

^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$

Reading it aloud:
^ — start of string
[a-zA-Z0-9._%+-]+ — one or more valid characters for the local part
@ — literal @ sign
[a-zA-Z0-9.-]+ — one or more domain characters
\. — literal dot (escaped because . is special)
[a-zA-Z]{2,} — two or more letters (the TLD like "com")
$ — end of string

Extract All Hashtags

#\w+

Input: "Loving #JavaScript and #WebDev today"
Matches: ["#JavaScript", "#WebDev"]

Regex in JavaScript: Quick Start

// Two ways to create a regex
const pattern1 = /\d{3}-\d{4}/g;                    // literal syntax
const pattern2 = new RegExp("\\d{3}-\\d{4}", "g");  // constructor

// The most useful methods
"Phone: 555-1234".match(/\d{3}-\d{4}/);  // ["555-1234"]
/\d{3}-\d{4}/.test("555-1234");           // true
"555-1234".replace(/(\d{3})-(\d{4})/, "($1) $2"); // "(555) 1234"

Flags: Changing the Rules

g — global: find ALL matches, not just the first
i — case-insensitive
m — multiline: ^ and $ work on each line
s — dotAll: dot matches newlines too

"cat and cat".match(/cat/);   // ["cat"] (just the first)
"cat and cat".match(/cat/g);  // ["cat", "cat"] (all of them)
"Hello HELLO".match(/hello/gi); // ["Hello", "HELLO"]

The Greedy vs. Lazy Trap

By default, quantifiers are greedy — they grab as much text as possible. This catches beginners off guard:

Input: '<b>bold</b> and <b>more</b>'

Greedy:  <b>.*</b>  → matches EVERYTHING from first <b> to last </b>
Lazy:    <b>.*?</b> → matches "<b>bold</b>" then "<b>more</b>" separately

Adding ? after a quantifier makes it lazy (match as little as possible). If your regex matches way more than expected, this is usually the fix.

Tips for Learning Regex

1. Build piece by piece — Write a tiny pattern, test it, then add the next piece. Never try to write the whole thing at once.
2. Use a live tester — Tools that highlight matches as you type make learning 10x faster.
3. Read it aloud — Translate each symbol: "start of string, one or more digits, a hyphen..."
4. Keep a cheat sheet — Nobody memorizes all of regex. Even senior devs Google regex syntax regularly.