In computer science, some topics may sound scarier than others.
Regular Expressions, in detail, may sound incredibly scary at first… but once you got it, you’ll find ‘em incredibly easy and useful!

Why do I need RegEx?

First of all: what is a RegEx? A Regular Expression is a sequence of characters that define a search pattern.

Let’s make an example: we have a string containing both numbers and letters, and we want to delete every non-letter character.

let myString = "91jsm0on3d32a4y r0oc54k2s!";

How can we delete every number from this string? This doesn’t feel like a great solution:

let myString = "91jsm0on3d32a4y r0oc54k2s!";

function deleteNumbers(string) {
  let newString = "";
  for (let i = 0; i < string.length; i++) {
      if (isNaN(parseInt(string[i]))) {
      newString += string[i];
      }
  }
  
  return newString;
}

console.log(deleteNumbers(myString));
// => "jsmonday rocks!"

Of course, the code above would work… but I think that we could do better using a simple RegEx:

let myString = "91jsm0on3d32a4y r0oc54k2s!";

function deleteNumbers(string) {
  return string.replace(/\d/g, "");
}

console.log(deleteNumbers(myString));

Way easier to implement, read and test! But how does it work?
In JavaScript, a RegEx can be defined in two ways:

  1. Writing the RegEx between two slashes: /myregex/g
  2. Using the RegExp class: const re = new Regexp("myregex", "g");

Let’s write down a couple of examples:

const isNumber = (str) => /\d/g.test(str);

// Is equivalent to

function isNumber(str) {
  const re = new RegExp("\\d", "g");
  return re.test(str);
};

Can you spot the differences?

  1. Using the RegExp class, we can pass a string as first argument. That means that we can write more dynamic RegEx!
  2. Inside the RegExp class, the backslash (\) character is used as an escape character. So, if you want to use (for instance) the “all digits” character (\d) you have to escape it (\\d).

RegEx Methods

Once we write our RegEx, we can adopt them using four different built-in methods:

Exec
The exec method executes a search for a match following your RegEx inside a string:

/a/g.exec(`I will match all the "a" characters inside this string.`);

// => ["a", index: 8, input: "I will match all the "a" characters inside this string.", groups: undefined]

As you can see, it stops after the first occurrence even if we’re using the global flag (g).

Match
Similar to the exec method, match will return an array of matches depending on your RegEx:

`I will match all the "a" characters inside this string.`.match(/a/g)

// => ["a", "a", "a", "a", "a"]

toString
toString returns a string representation of your RegEx:

/[^\d]/.toString();

// => "/[^\d]/"

test
test will just run your RegEx against a string and will return a boolean value depending on the match:

/\d/.test("12"); // => true
/^\d/.test("hello"); // => false

Writing a RegEx

As I said before, RegEx may sound scary at first, but believe it or not, they can be incredibly easy once you get used to!
Let’s see some RegEx examples, starting from the basics:

We can write a RegEx that matches any character just by writing the desired char inside our regex:

const regex  = /a/;
const result = "Aabbccdd".match(regex);

JSMonday Regex

As you can see, this RegEx only matches the first lowercase a character. What if we want to match both lowercase and uppercase chars?

const regex  = /a/i;
const result = "Aabbccdd".match(regex);

JSMonday Regex

We can just add the i (insensitive) flag after our RegEx! But now we have a problem, we’re just matching the first occurrence! Let’s fix this by adding the g (global) flag:

const regex  = /a/gi;
const result = "Aabbccdd".match(regex);

JSMonday Regex

Now we want to match any of the following characters: a, b, c

const regex  = /[abc]/gi;
const result = "Aabbccdd".match(regex);

JSMonday Regex

Awesome! We just need to wrap our desired chars inside two square brackets and the RegEx engine will match every char written inside them!
And what if we want to match everything that is not equal to any of the following characters: b, c?

const regex  = /[^bc]/g;
const result = "Aabbccdd".match(regex);

JSMonday Regex

So easy! Just add the ^ char inside the two brackets and the RegEx engine will prevent those characters from matching!

Now, let’s say we want to detect every line that starts with the following string: "I love regex":

const regex  = /^i love regex.+/gmi;
const string = `
I love regex. They are so fun!
I love regex. They are not so difficult!
I love pizza. Just pizza.
`

const result = string.match(regex);

JSMonday Regex

When written at the beginning of our RegEx (and out of two square brackets), the ^ char means “begin with”. Note that we’re also using the m (multiline flag) in order to run our RegEx on multiple lines!
But how did it match the entire line? We’ve ended our RegEx with .+, which means “match everything until the end”. In fact, the point char (.) means “any char”, and + means “repeat the previous match infinitely”. So, together these two characters will match everything until the end of the string!

But what if we want to stop that “infinite” match?

const regex = /".+"/g;
const string = `Let's match "everything between" two quotes!`;

const result = string.match(regex);

JSMonday Regex

Super easy! Our RegEx engine reads our RegEx from left to right, so the RegEx above would be interpreted as “Match the double quotes char then match everything until the next double quote char” .

RegEx Reference

We’ve just scratched the surface of the RegEx power… there’s no way that a single article could teach you how to write super powerful RegEx! But we have to start somewhere

Did you like this article? Consider becoming a Patron!

This article is CC0 1.0 (Public Domain) licensed.