An Introduction to Regex In JavaScript

Victoria Lo
Jun 10 · 4 min read

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.

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);

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().

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:

let str = "The cat looks at the other cat and purrs."; 
const regex = /cat/g;
console.log(str.match(regex));
let str = "The cat looks at the other cat and purrs.";
const regex = /cat/;
console.log(str.match(regex));

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.

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!

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. 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!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store