Nerd For Tech
Published in

Nerd For Tech

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.

--

--

--

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To know more about us, visit https://www.nerdfortech.org/.

Recommended from Medium

Marking it up 💅 — Overview of web app rendering techniques

鬼灭之刃剧场版:无限列车篇 2020 (Demon Slayer: Kimetsu no Yaiba) 完整版本 HD/BluRay

JS30 Challenge Day 1 — JS Drum Kit

Webpack Additional Compilation Pass

Why one should love jQuery ?

Vue Google autocomplete with multiple input fields.

Basic React Router

An Introduction to JavaScript

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
Jakub Korch

Jakub Korch

Web enthusiast, programmer, husband and a father. Wannabe entrepreneur. You name it.

More from Medium

How to cancel a Fetch request during in-flying in ReactJS

Wrapper in JavaScript to avoid writing Try/Catch multiple times

Save Game Option for Sudoku Puzzle in React.js

How to install Typescript with CRA (CREATE REACT APP) Beginner Guide.