zohaib hassan

Posted on Jun 4

I'm a Developer from Pakistan — Here's the Side Project I Shipped in 2024

#nextjs #showdev #beginners #webdev

Regex in 10 Minutes — The Only Guide Beginners Actually Need

Regex has a reputation for being impossible to read.

This:

```text id="regex1"
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$




...is not random keyboard smashing.

It's an **email validator**.

By the end of this guide, you'll understand every character in it.

---

# What Is Regex?

Regular expressions (regex) are patterns used to match character combinations in strings.

Every major programming language supports them.

---

## Use Cases

* Validate email addresses, phone numbers, URLs
* Find and replace text
* Extract data from strings
* Parse log files
* Search in code editors

---

# The Building Blocks

## Literal Characters

The simplest regex matches exact characters:



```text id="lit1"
hello → matches "hello" in "say hello world"

The Dot (.)

Matches any single character except newline:

```text id="dot1"
h.llo → matches "hello", "hallo", "hxllo"




---

## Character Classes []

Match any one character inside brackets:



```text id="class1"
[aeiou] → matches any vowel  
[0-9]   → matches any digit  
[a-z]   → matches lowercase letters  
[A-Z]   → matches uppercase letters

Quantifiers

Control how many times something matches:

* → 0 or more times
+ → 1 or more times
? → 0 or 1 time (optional)
{3} → exactly 3 times
{2,5} → between 2 and 5 times

Anchors

^ → start of string
$ → end of string

Special Character Classes

\d → any digit [0-9]
\w → any word character [a-zA-Z0-9_]
\s → whitespace
\D → non-digit
\W → non-word character

Real Examples You'll Actually Use

Validate an Email

```regex id="email1"
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$




### Breakdown:

* `^` → start of string
* `[a-zA-Z0-9._%+-]+` → valid username characters
* `@` → literal symbol
* `[a-zA-Z0-9.-]+` → domain name
* `\.` → literal dot
* `[a-zA-Z]{2,}` → domain extension
* `$` → end of string

---

## Validate a URL



```regex id="url1"
https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{2,256}\.[a-z]{2,6}

Extract Numbers from Text

```regex id="num1"
\d+




Example:



```text id="ex1"
Order #12345 costs $99

Matches:

12345
99

Validate Pakistani Phone Number

```regex id="pk1"
^(+92|0)[0-9]{10}$




---

## Remove Extra Whitespace



```regex id="space1"
\s+

Replace with a single space.

Test Your Regex Instantly

Stop guessing in code.

Use this live tester:

👉 https://onlinefreetools.online/tools/regex-tester

You can:

Paste regex patterns
Test input strings
See matches instantly

Common Mistakes Beginners Make

1. Forgetting to Escape Characters

. means any character
\. means literal dot

2. Not Using Anchors

Without ^ and $, patterns may match partial strings.

Example:

email regex without anchors may incorrectly match invalid strings like: notanemail@valid.com!!!

3. Greedy Matching

.* matches as much as possible
Use .*? for lazy matching

4. Not Testing Edge Cases

Always test:

Empty strings
Very long inputs
Special characters

Summary Cheat Sheet

Symbol	Meaning
`.`	Any character
`\d`	Digit
`\w`	Word character
`\s`	Whitespace
`^`	Start of string
`$`	End of string
`*`	0 or more
`+`	1 or more
`?`	Optional
`{n}`	Exactly n times
`[abc]`	Any of a, b, c
`[^abc]`	Not a, b, or c
`(abc)`	Group
`a	b`	a or b

Final Thoughts

Regex looks scary at first, but it becomes natural very quickly once you understand the basics.

The key is:

Learn patterns, not memorization
Test everything visually
Start small, then build

Practice here: