DEV Community

Cover image for Understanding Regex: The Simplest Guide.
Neeraj Singh
Neeraj Singh

Posted on

Understanding Regex: The Simplest Guide.

#javascript #programming #regex

Regex (Regular Expressions) is one of those topics that gives many developers headaches.

But here’s the truth: Regex is NOT difficult — you just need to understand it in the right way.

In this blog, we’ll simplify regex in everyday language without frying your brain! 👇

✅ What is Regex?

Regex is a pattern-matching tool.

It is used to find, replace, validate, or extract specific patterns in a string.

Common uses:

  • Finding numbers
  • Validating emails
  • Filtering alphabets
  • Removing special characters
  • Extracting dates, phone numbers, IDs, etc.

🎯 1. Basic Structure of Regex

In JavaScript, a regex is written between slashes:

/pattern/flags
Enter fullscreen mode Exit fullscreen mode

Example:

/[0-9]+/g
Enter fullscreen mode Exit fullscreen mode

Breakdown:

Part Meaning
/ Regex starts
[0-9]+ Pattern
/ Regex ends
g Flag (global)

🎯 2. Character Classes — The Heart of Regex

The most important part of regex:

✔ [ ] → Character Set

Whatever you put inside the brackets will match any one of those characters.

Examples:

Pattern Meaning
[0-9] Any digit
[a-z] a to z
[A-Z] A to Z
[a-zA-Z] Alphabets only
[0-9-] Number or hyphen

💡 Just remember these 5 — you’ve already learned 60% of regex!

🎯 3. Quantifiers — How Many Times?

Quantifiers decide how many times a pattern should repeat:

Symbol Meaning Example Explanation
+ 1 or more [0-9]+ One or more digits
* 0 or more a* "a" may or may not exist
? 0 or 1 colou?r color OR colour

🎯 4. Anchors — Start & End of String

Anchor Meaning
^ String starts with
$ String ends with

Example:

/^[0-9]+/
Enter fullscreen mode Exit fullscreen mode

→ String must start with a number.

🎯 5. Flags — Extra Power

Flags come after the closing slash.

Flag Name Use
g Global Find ALL matches
i Ignore case Case-insensitive matching
m Multiline Applies to each line
s Dotall . also matches newline

Example:

/hello/gi
Enter fullscreen mode Exit fullscreen mode

Matches:

  • hello
  • Hello
  • HELLO

- hElLo

🎯 6. Real-World Practical Examples

✔ Example 1: Remove Numbers 

"50-200 metric tonnes".replace(/[0-9]/g, "");
Enter fullscreen mode Exit fullscreen mode

Output:

-metric tonnes
Enter fullscreen mode Exit fullscreen mode

✔ Example 2: Extract Only Numbers (including hyphen) 

"50-200 metric tonnes".match(/[0-9-]+/)[0];
Enter fullscreen mode Exit fullscreen mode

Output:

50-200
Enter fullscreen mode Exit fullscreen mode

✔ Example 3: Validate Email 

/^[\w.-]+@[\w.-]+\.\w{2,}$/i.test("user@example.com");
Enter fullscreen mode Exit fullscreen mode

✔ Example 4: Remove Special Characters 

text.replace(/[^a-zA-Z0-9 ]/g, "");
Enter fullscreen mode Exit fullscreen mode

→ Only letters, numbers, and spaces remain.

🎯 7. Regex vs No Regex

❌ Without Regex 

let result = "";

for (let ch of str) {
  if (!"0123456789".includes(ch)) {
    result += ch;
  }
}
Enter fullscreen mode Exit fullscreen mode

✔ With Regex 

str.replace(/[0-9]/g, "");
Enter fullscreen mode Exit fullscreen mode

✔ Shorter
✔ Cleaner
✔ Readable

🎉 Final Tips to Remember Regex Forever

Regex is not magic — it’s just pattern matching.

Remember these 4 rules:

  1. [ ] → What to match
  2. + * ? → How many times
  3. ^ $ → Start / End
  4. g i m s → Flags (behavior)

If you remember these, regex becomes easy.

🏁 Conclusion

Regex is powerful but NOT complicated.

Once you understand the basics, you can:

  • Clean strings
  • Validate user input
  • Extract data
  • Perform replacements easily

Regex = Pattern + Repetition + Flags

Master this formula and regex will feel simple forever. 🚀

Top comments (0)