DEV Community

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

Posted on

Understanding Regex: The Simplest Guide.

#javascript #regex #programming

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)