What's Regex?

Regex, short for Regular Expressions are useful tools to find matching patterns in a string.

They can be used to validate text from user input, check formatting of the string (like an email or a 12-digit phone number) and allows the search for a certain pattern of words or numbers in a string.

Most programming languages like JavaScript use regex. It can be, however, quite difficult to learn all its complicated syntax and rules to follow. But once you get started with the basics, I have a simple and fun way for you to master regex like a pro.

Let's go to the basics: The Rules

Here are some basic regex rules and syntax to know.

1. Regex Methods to find matching patterns

The most common way to use regex in JavaScript is to use .match() on a string. Here's an example:

const paragraph = 'The quick brown fox jumps over the lazy dog. It barked.';
const regex = /[A-Z]/g;
const found = paragraph.match(regex);

console.log(found);
// expected output: Array ["T", "I"]

Code from: developer.mozilla.org/enUS/docs/Web/JavaScr..

As seen in the code, the regex will be the parameter of match() to find if the string contains the pattern the regex specifies.

Important Note: Regex are, by default, case sensitive! Unless it is specified otherwise.

In this example, the regex specifies looking for capital letters from A to Z. The only 2 capital letters in the given string is T and I so match() will return the 2 matched letters.

Other common regex methods are: RegExp.exec(), RegExp.test() and String.prototype.matchAll().

2. Syntax & Flags

A regex is always contained in between 2 forward slashes like: /some_regex/.

In regex, you can use "flags" at the end of the last forward slash to indicate some extra conditions of the pattern you want to find.

For example, adding a "g" the global flag will allow the search to find all occurences of the specified regex instead of just finding the first match and stop. Take a look at this example:

//with the global flag
let str = "The cat looks at the other cat and purrs.";
const regex = /cat/g;
console.log(str.match(regex));
//output: ["cat","cat"]

//without global flag
let str = "The cat looks at the other cat and purrs.";
const regex = /cat/;
console.log(str.match(regex));
//output: ["cat"]

As seen in the code above, the global flag returns all instances of the specified word "cat" while the regex without the 'g' returns the first one it finds at index 4.

There are more flags in regex that you should learn to master regex. But I don't want to overload you with info yet because I will introduce an easy way to learn more about flags further down this post.

3. Wildcard & Anchor

In regex, a wildcard refers to a period (yes, the full-stop). This period represents any character (including spaces). So if you want to match every character in a sentence, the regex would simply be : /./g.

An anchor refers to a carrot (^), which will match any word that begins the string. For example, back to our sentence: "The cat looks at the other cat and purrs."

A regex of /^The/ would found a match while a regex of /^cat/ will not because the string does not brings with "cat".

Wildcard (.) : matches any character

Anchor (^) : matches the first word in the string

I hope that's a clear and concise introduction to regex. Of course, there are many many more rules, flags, syntax and special characters to learn in regex. Going through them all in one post would be exhausting for both the writer and the reader.

So in this post, I'll leave you with an easy and fun way to get started mastering your regex stuff!

DRUM ROLL...........

The Simple Way to Master Regex

Here it is: regexcrossword.com

Games are a form of active learning, which helps you retain new information easier and faster! So I was introduced to this awesome regex crossword game by a friend. Check out her Hashnode blog here. Another good website to learn regex is https://regexr.com/.

Since learning regex can be overwhelming, this fantastic game offers different levels of difficulty. From beginner to more advanced regex learners. Have a try at it! 10 minutes a day and you're on your way to become a regex master. I hope this post has been a good introduction and motivator to start learning some regex which can be a helpful tool to use in your projects. Till next time, cheers!

P.S. : Thank you for all the support on this blog. Some of you have messaged me, wanting to connect through Twitter, so I rebooted my old Twitter account in case any of you would like to follow me on Twitter: twitter.com/lo_victoria2666