Regular Expressions for Beginners 💡

Introduction

Regular expressions may seem like a daunting concept at first, but they are a powerful tool that can help you to search and manipulate text with precision.

Regex is used for tasks such as

• input validation
• data extraction
• text search and replace.

In this blog, we'll break down the basics of regular expressions in JavaScript, and how you can use them to search and manipulate data.

Even if you have no prior knowledge of regular expressions, by the end of this blog, you'll be able to use them like a pro! 😎

What are Regular Expressions? 🤔

Regular expressions (or "regex" for short) are a sequence of characters and metacharacters that form a search pattern. They can be used to search , replace , and validate text. For example, if you want to search for a specific word within a string, you can use regex to do so.

You know what? Let's use an example to understand Regex better.

Let's say you're trying to find all the email addresses in a long list of text. You could manually scan through the text, but that would take forever 😤.

My email address is [e-mail] but I want you to send all the docs to this email address [e-mail] and if possible send these docs and pdfs to these email addresses as well: [e-mail], [e-mail], [e-mail]

Instead, you can use regex to quickly search for all the email addresses in the text. Here's an example regex pattern that could match email addresses

/[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}/

Now, I know what you're thinking - "That looks like gibberish!" But don't worry, we'll break down what each part of the pattern means in the upcoming sections. For now, just remember that regex is a powerful tool for searching and validating text patterns. And who doesn't love saving time by letting robots do the work for us? 😉

Creating a Regular Expression

To create a regular expression in JavaScript, you need to enclose the pattern you want to match between two forward slashes /. For example, to search for the word "hello" in a string, you would create the regex as follows: /hello/. You can then use the test() method to check if a string matches the regex.

Here's an example:

let str = "hello world";
let regex = /hello/;
console.log(regex.test(str)); // Output: true

Metacharacters

Metacharacters are special characters that represent a specific pattern. Here are a few common metacharacters:

• . : Matches any single character except for a new line

• * : Matches zero or more occurrences of the preceding character

• + : Matches one or more occurrences of the preceding character.

• ? : Matches zero or one occurrence of the preceding character.

• \d : Matches any digit.

• \w : Matches any word character (alphanumeric and underscore).

• ^ : Matches the beginning of a string.

• $ : Matches the end of a string.

Here's an example of how to use metacharacters in regex:

let str1 = "hello world";
let str2 = "he danced";
let regex = /he.*d/;
console.log(regex.test(str1)); // Output: true
console.log(regex.test(str2)); // Output: true

In this example, the . character in the regex represents any character, and the * character means zero or more of the preceding character. So the regular expression is looking for the character "he", followed by zero or more characters of any type, followed by the letter "d". Therefore it matches strings like "hello world", and "he danced".

Find Email Addresses 📧

/\b[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z\.]{2,}\b/g

This regular expression matches any email address that follows the basic format of [e-mail]. Let's break it down:

• \b: This matches a word boundary, which ensures that the email address is not part of a larger word.

• [A-Za-z0-9._%+-]+: All characters within [] matches any character that is either an uppercase letter A-Z, lowercase letter a-z, digit 0-9, dot, underscore, percent sign, plus sign, or hyphen. The plus sign + at the end matches any number of such characters within the []. This is the username part of the email address.

• @: This matches the literal @ symbol.

• [A-Z0-9.-]+: This matches one or more characters that are either uppercase letters, digits, dots, or hyphens. This is the domain name part of the email address.

• \.: This matches the literal . character. Because the . is a special character in regular expressions, which indicates any character, but using \. always denotes the . character itself.

• [A-Z]{2,}: This matches two or more uppercase letters. This is the domain extension part of the email address.

• i: This specifies that the regular expression is case-insensitive, so it will match email addresses regardless of whether they are uppercase or lowercase.

• g stands for global search, that is search all those strings that match the pattern.

Note: g and i is used at the end of / / regex pattern.

const myString = "My email address is [e-mail] but I want you to send all the docs to this email address [e-mail] and if possible send these docs and pdfs to these email addresses as well: [e-mail], [e-mail], [e-mail]";

const myRegex = /\b[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[a-zA-Z\.]{2,}\b/g;
const matches = myString.match(myRegex);

console.log(matches); // ["[e-mail]", "[e-mail]", "[e-mail]", "[e-mail]", "[e-mail]"]

Testing Indian Phone Numbers 📱

Phone numbers can come in many different formats, such as ([phone], [phone], [phone], 918345678909, 8123456789, 06289000189. To validate phone numbers, we can use regular expressions to match the pattern of a phone number.

First, let's define the regex pattern of a phone number:

/^(\+91[\-\s]?)?[0]?(91)?(\(\+91\))?[7896]\d{9}$/

Let's break it down:

• ^: Matches the start of the string.

• (\+91[\-\s]?)?:

• [0]?: Matches an optional 0 after the country code.
  
  Ex: 06289000189

• (91)?: Matches an optional 91 after the optional 0.
  
  Ex: 918345678909

• [7896]: Matches the first digit of the phone number, which must be 7, 8, 9 or 6.

• \d indicates any digit between 0 and 9

• \d{9}: Matches the remaining 9 digits of the phone number.

• $: Matches the end of the string.

Note: The m at the end denotes multiline.

Methods

Throughout the examples, you might have seen some methods like test and replace. Let's explore more such methods and understand what they do.

Here are some common methods for using regular expressions in JavaScript:

1. test(): This method tests whether a regular expression matches a specified string and returns true or false.

2. exec(): This method searches for a match in a specified string and returns an array of information about the match.

3. match(): This method searches for a match in a specified string and returns the matched text as an array.

4. replace(): This method searches for a match in a specified string, replaces the matched text with a new string, and returns the new string.

5. search(): This method searches for a match in a specified string and returns the index of the first match.

6. split(): This method uses a regular expression to split a string into an array of substrings.

These are just a few of the methods available for working with regular expressions in JavaScript. The specific methods you use will depend on your needs and the task at hand.

Regex Playground 🎢

For testing out regular expressions, you can use this website RegExr

RegExr consists of cheatsheets, tools to identify and explain each character and metacharacters you use to extract patterns from a string.

From the above examples on emails and phone numbers, use those regex patterns and play with them on the RegExr platform.

Conclusion

Just like I said, Regular expressions may seem daunting at first, but they are a powerful tool that can save you time and effort in text manipulation. By learning the basics and practicing with different patterns, you can become a regular expression pro in no time.

Follow this tutorial for a better understanding of Regex :

https://youtu.be/ZfQFUJhPqMM

Happy coding! 💻💡