Reactive Stack

The Quick Start Guide to Regexes

Cover Image for The Quick Start Guide to Regexes
Benoit Tremblay
Benoit Tremblay

Regexes can save you a a lot of time. In a single line of code, you can do complex validations or search & replace that would take 10 or 20 lines of code. While they are efficients, they are also one of the most cryptic syntax. A lot of developers don't even try to learn them because it looks so confusing and hard. I will share with you a step by step guide to learn regexes in a practical manner. The goal is to know just enough to be able to use them when they are the most useful.

Matching Pattern

We will begin with a simple example and work our way through more complex examples. Keep in mind that it is a lot to remember, but with a simple cheatsheet you can master them pretty quickly.

Regexes in JavaScript are used to match pattern. A pattern can be a phone number, an email, a postal code or really anything that has a specific formatting.

Here is an example of a regex in JavaScript:

const result = 'My name is Bob'.match(/^My name is (.+)$/);
const firstName = result ? result[1] : 'unknown';

You can see that in JavaScript, when you are writing a matching pattern, unlike a string that use quotes or double quotes, the pattern will be between slashes. Let's take this pattern character by character.

The first character is a ^. By default, the pattern that you are looking for can start anywhere in the string. However, when you have the ^ character at the start, it means the pattern has to match from the beginning. Then, My name is are just simple words. The text has to match exactly those characters, just like a regular search.

The next characters are where it starts to get interesting. We have (.+). This means it can be any character. The dot by itself means any character, however, in that case it has a chracter that specify how much of them we should get by using the +. It means the pattern is matching a many characters as possible, but it has to have at least one. You will not match an empty first name. You also have the option to allow no character to any character by using the star * instead of the +. In other case where you want a specific number of character, like a phone number for example, you can also specify the number of characters by using {3} for three characters or a range by using {3,5} for three to five characters inclusively.

You can also notice that the .+ is between parenthesis. It is used to separate the regex result by group. You will be able to pull the information from each group individually. Here it would be the first name.

Lastly, the $ character means it has to match until the end of the string. We make sure we capture the entire first name by making sure we do not stop until the end of the string.

The result of the regex will be null if it does not match. If it match, it will be an array. The first value will be the exact words that your regex matched as a whole. Then, the following values would be the splitted by each pattern groups between parenthesis. For us it's Bob.

Let's summarize everything we learned:

  • ^ / $ means it has to match from the start or until the end of the string
  • Regular text can be used to search for those exact characters
  • . means any character
  • To specify how many characters the previous pattern can match:
    • + means from 1 to any
    • * means from 0 to any
    • {3} means exactly 3
    • {3,5} means from 3 to 5 inclusively
  • The result is formatted as
    • null if does not match, an array if it does
    • The first value is the full match
    • The follow values are each pattern groups

Matching More Complex Characters

Now that we know how to do simple patterns, we are ready to match harder values. Let's do a north american phone number.

const result = '418-555-1234'.match(/([0-9]{3})-?([0-9]{3}-?[0-9]{4})/);
const areaCode = result[1];
const localNumber = result[2];

The most common component in this regex is the [0-9]. Everytime you see characters between brackets, it means the character has to match one of them. In this case, 0-9 means any number. You can also specific A-Z for any uppercase letter or a-z for any lowercase letter. You can also specify the character. If you had an hexadecimal, you could use [0-9abcdef] to make sure only the valid letters are used. There is also a bunch of thathands that are available to make your regex shorter and easier to read. Here is a short list of the most useful ones:

  • \s: Any spacing character like space, new line or tabs
  • \d: A digit
  • \w: Word character
  • \W: Non-word character

Sometimes, you want to search for a character that has a special meaning in your regex. Like a + or [. In those case, you have to prefix the character by a \ as an escape character. For example, if you want to use the character \, you have to write \\.

You can also notice that in our phone number regex, between the numbers, we have -?. The ? question mark after the character means it is optional. It does not need to be there so that our pattern matches.

One or the Other

In your regex, you can also search for two different pattern by splitting them by | and between ( and ). For example, if I had to find for the word good or bad, you could do that:

const result = 'Is it good?'.match(/good|bad/);

Flags

When you write a regex, the pattern is within two slashes. However, it can also have a few flags that can be added after the last slash. The main three flags are:

const result = 'Start with this and end with that\nstart with this and end with that'.match(
  /start/gim
);
const count = result ? result.length : 0;
  • g: Global. It means it will not stop at the first match. It will instead return an array with each match in the same order as the string.
  • i: Case insensitive. You don't have to worry about upper and lowercase characters. They will always match.
  • m: Multiline means the beginning ^ and end $ character represent each line instead of the full string.

Your Excercice

The is still only the beginning, but with that information you should be able to go a long way. The power does not lies into how complex one matching character is. It is how many things we can do by combining all the characters that makes regex so unbelievable. As an exercise, try to build a regex that matches an email address.

If you want to learn more about how to organize your code, you can read How to Organize Your React.js App Folders.

Want More Content About React.js?
Subscribe to Our Newsletter

* indicates required

We will never spam you.