Basics of Javascript · String · match() (method)

This article is a transcript of my free youtube series about basics of web development. If you prefer watching over reading, feel free to visit my channel “Dev Newbs”.

Hello my fellow developers! The method we will cover today is not a pleasant one. It is a powerful tool to use, but you need to master regular expressions first. That does not sound like a basic knowledge and you would be right. But do not worry too much. I will guide you through the basics, so if you will need it in the future, you can achieve whatever you need with only a bit of additional googling to cover your special case. Enough talking…let’s get to it!

The match() method searches a string for a match against a regular expression, and returns the matches, as an Array object.

If the regular expression does not include the “g” flag, we get the Array object with the result at index 0. The resulting Array object has the same format as if we invoked method exec() on regular expression passing our referenced string. The Array object contains additional data like index at which the first occurrence of match happened, original input, etc….

If we use the “g” flag, the resulting Array object contains only the matches and nothing else.

Ok, so much for the theory. Let’s move to the real world. Or…you know…the virtual one.

let str = "The main bulk of rain will fall in SPAIN. That's our gain.";
let regExp = /ain/;
let regExpG = /ain/g;
let regExpGI = /ain/gi;
str.match(regExpG)                   // ["ain","ain","ain"]
str.match(regExpGI)                  // ["ain","ain","AIN","ain"]
str.match(regExp)                    
// [
//   "ain",
//   groups: undefined,
//   index: 5, 
//   input: "The main bulk of rain will fall in SPAIN. That's...",
//   length: 0
// ]
regExp.exec(str)
// [
//   "ain",
//   groups: undefined,
//   index: 5, 
//   input: "The main bulk of rain will fall in SPAIN. That's...",
//   length: 0
// ]
(str.match(regExp))[0]                   // ain

First case uses regular expressions searching for the string “ain” with the additional flag “g” which specifies that we want to find all the matches. The resulting array contains 3 matches.

Second case uses an additional flag “i” which tells the method that it does not care about case-sensitivity. Thanks to that fact, it finds one extra occurrence in the word “SPAIN”.

The last case shows what happens when we do not use the global flag “g”. The result is just the first occurrence of the match which is stored in the first position of the resulting Array object with the index 0.

One of the very important features when utilizing regular expressions is to define the allowed set of characters. If I wanted to find any uppercase characters, I can either explicitly write them within square brackets or I can use dash to specify a sequence and just provide the first and last character of the sequence.

let str2 = "The quick brown fox jumps over the lazy dog. It barked.";
let regExpUpper = /[A-Z]/g;
let regExpLower = /[a-z]/g;
let regExpOther = /[ .]/g;
let regExpCapital = /[A-Z][a-z]*/g;
str2.match(regExpUpper)               // ["T","I"]
str2.match(regExpUpper).length        // 2
str2.match(regExpLower)               // ["h","e","q",...]
str2.match(regExpLower).length        // 41
str2.match(regExpOther)               // [" ",...," ","."]
str2.match(regExpOther).length        // 12
str2.match(regExpCapital)             // ["The","It"]
str2.match(regExpCapital).length      // 2

I wanted to sort characters in the string into three groups: uppercase, lowercase and the remaining characters.

There is one extra regular expression at the end — let’s say we want to get all the first words starting with capital letter. We first specify that the first characters should be from a set of uppercase letters and that it is followed by zero or more lowercase letters. That is said by the asterisk symbol after the second square brackets. And that’s it.

Okay, moving on. Let’s play with specific types of characters. Digits are a nice choice, so let’s go with those. We can have a text with the references to specific chapters and we would like to find all those references. So let’s see how that can be done.

let str3 = "Chapter 2.7 This text contains references to chapter 4.2.1 & also to chapter 5";
let regExp3 = /chapter \d+(\.\d)*/gi;
str3.match(regExp3)   // ["Chapter 2.7","chapter 4.2.1","chapter 5"]

We want to find the word “chapter” followed by the chapter number that consists of digits, potentially separated by dots. We do not care whether the word “chapter” starts with lowercase or uppercase. We want to find all the occurrences.

First step is to specify the “g” and “i” flag. Then we specify word “chapter”, blank space and then we use backslash with letter “d” to signal we are looking for a digit. We want at least one digit, so we add a plus character. Now, the chapter can have just one digit and no dots followed by a subchapter number. So what we have so far would cover those cases. However there might be zero or more dots followed by a subchapter digit, so we add brackets with the asterisk after to signal that. Within the brackets, we specify we expect a dot. Dot is a special character that means one piece of any character, so we need to escape it with backslash. Then we follow that with backslash plus character “d” to signal another digit. And that’s it.

Thank you for sticking with the series even after the last two methods, which were by far the most challenging so far. I hope you also learned something new.

Thank you for your unwavering attention and I hope we meet again soon with the next article.