Learn JavaScript Regular Expressions with Practical Examples

Learn JavaScript Regular Expressions with Practical Examples

In JavaScript, regular expressions (regex or regexp) are also objects. We will explore some characters, a few shortcuts, and the common uses for writing regular expressions. Regular expressions are special strings that represent a search pattern. Regular expressions are patterns used to match character combinations in strings.

What are Regular Expressions in JavaScript?

Regular expressions are special strings that represent a search pattern. Also known as “regex” or “regexp”, they help programmers match, search, and replace text. Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. The goal is to combine the symbols and text into a pattern that matches only what you want.

In this article, we will explore some characters, a few shortcuts, and the common uses for writing regular expressions.

Using the Test Method

Regular expressions are used in programming languages to match parts of strings.

Let’s say you want to find the word hello *in the string *"hello world”, you could use the following regular expression: /hello/. JavaScript has multiple ways to use regexes. One way to test a regex is by using the method .test(). This method returns true or false if your pattern finds something or not. Have a look at the example below:

let testStr = "hello world";
let testRegex = /hello/;
testRegex.test(testStr);
// Returns true

As you can see, it returns true because the regex is available in our string.

Match Literal Strings

In the previous example, we used the test method to search for words in a string. Here’s another example searching for a literal match of the string "Kevin":

let testStr = "Hello, my name is Kevin.";
let testRegex = /Kevin/;
testRegex.test(testStr);
// Returns true

Notice that, any other forms of the string"**K**evin" will not match. For example, the regex /**K**evin/ will not match "kevin" or "**KEVIN**". That will return false.

let wrongRegex = /KEVIN/;
wrongRegex.test(testStr);
// Returns false

Ignore Case While Matching

As you can see in the last example, to match literal strings we should have the same letter case (uppercase & lowercase). But sometimes, you might want to also match case differences. You can match both cases using what is called a flag. There are other flags but here you’ll focus on the flag that ignores the case-the i flag. You can use it by appending it at the end of the regex.

let testStr = "Hello, my name is KEVIN.";
let testRegex = /Kevin/i; // the i flag.
testRegex.test(testStr);
// Returns true

As you can see, even though we have a case difference(KEVIN & Kevin), it returns true because we used the i flag.

Extract Matches

You can also extract the actual matches you found with the method .match(). Here’s an example:

"Hello, World!".match(/Hello/);
// Returns ["Hello"]
let ourStr = "Regular expressions";
let ourRegex = /expressions/;
ourStr.match(ourRegex);
// Returns ["expressions"]

Note that the syntax .match is the "opposite" of the method .test you have been using:

'string'.match(/regex/);
/regex/.test('string');

Find More Than the First Match

We can find more than one match in a string. To achieve that, we will need to use the gflag by appending it at the end of the regex. Have a look at the following examples:

let testStr = "Repeat, Repeat, Repeat";
let ourRegex = /Repeat/;
testStr.match(ourRegex);
// Returns ["Repeat"]

Using the g flag:

let repeatRegex = /Repeat/g;
testStr.match(repeatRegex);
// Returns ["Repeat", "Repeat", "Repeat"]

As you can see, we can search or extract a pattern more than once using the g flag.

regex web-development programming javascript developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.

How to use RegEx with String.Replace() in JavaScript

Learn how to use RegEx with String.Replace() in JavaScript. Regular Expressions (also called RegEx or RegExp) are a powerful way to analyze text. With RegEx, you can match strings at points that match specific characters (JavaScript) or patterns (NumberStringSymbol). The .replace method is used on strings in JavaScript to replace parts of string with characters.