JavaScript RegExp – Introduction to Regular Expressions

When we are working with JavaScript, sometimes we may need to search for specific patterns or characters within a string. This is when regular expressions come in handy. In JavaScript, we can use RegExp to define patterns and match them with strings.

What is RegExp?

RegExp is a built-in JavaScript object that helps us define patterns that match strings. It stands for “regular expression” and is a sequence of characters that define a search pattern. We can use RegExp to search, replace, and extract information from strings.

How to create a RegExp object?

There are two ways to create a RegExp object in JavaScript. We can use either a literal notation or a constructor function.

Literal Notation

We can define a regular expression pattern by enclosing it in forward slashes. For example, /hello/ is a regular expression that matches the string “hello”.

let pattern = /hello/;

Constructor Function

We can also create a RegExp object using the constructor function. The constructor function takes two arguments – the pattern and flags.

let pattern = new RegExp("hello");

Flags

When creating a RegExp object, we can add optional flags that modify the search behavior.

g – Global search

The g flag performs a global search, meaning it searches for all instances of the pattern in a string instead of just the first one. For example:

let pattern = /hello/g;
let str = "hello world, hello!"
console.log(str.match(pattern)); // ["hello", "hello"]

i – Case-insensitive search

The i flag performs a case-insensitive search, meaning it matches both uppercase and lowercase characters. For example:

let pattern = /hello/i;
let str = "Hello world!"
console.log(pattern.test(str)); // true

m – Multiline search

The m flag performs a multiline search, meaning it matches patterns that span multiple lines. For example:

let pattern = /^hello/m; // matches the first "hello" that appears at the beginning of a line
let str = "hello\nworld\nhello!";
console.log(str.match(pattern)); // ["hello", "hello"]

Matching Patterns

Once we have created a RegExp object, we can use it to search for patterns in strings.

test()

The test() method checks if a pattern exists in a string and returns a boolean value. For example:

let pattern = /hello/;
let str = "hello world";
console.log(pattern.test(str)); // true

match()

The match() method returns an array of all matches found in a string. For example:

let pattern = /hello/;
let str = "hello world, hello!";
console.log(str.match(pattern)); // ["hello", "hello"]

exec()

The exec() method returns an array of information about the first match found in a string. For example:

let pattern = /hello/;
let str = "hello world, hello!";
console.log(pattern.exec(str)); // ["hello", index: 0, input: "hello world, hello!", groups: undefined]

Special Characters

In RegExp, there are special characters that have special meanings.

Dot (.)

The dot (.) matches any single character except for newline characters. For example:

let pattern = /h.t/;
let str1 = "hat";
let str2 = "hot";
let str3 = "h\nt";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // false

Caret (^)

The caret (^) matches the beginning of a string. For example:

let pattern = /^hello/;
let str1 = "hello world";
let str2 = "world hello";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // false

Dollar Sign ($)

The dollar sign ($) matches the end of a string. For example:

let pattern = /world$/;
let str1 = "hello world";
let str2 = "world hello";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // false

Square Brackets []

Square brackets ([]) define a range of characters to match. For example:

let pattern = /[aeiou]/;
let str1 = "hello world";
let str2 = "why";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // false

Quantifiers

Quantifiers define how many times a character or group of characters can occur.

Asterisk (*)

The asterisk (*) matches zero or more occurrences of the previous character or group. For example:

let pattern = /ab*c/;
let str1 = "ac";
let str2 = "abc";
let str3 = "abbbbc";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // true

Plus Sign (+)

The plus sign (+) matches one or more occurrences of the previous character or group. For example:

let pattern = /ab+c/;
let str1 = "ac";
let str2 = "abc";
let str3 = "abbbbc";
console.log(pattern.test(str1)); // false
console.log(pattern.test(str2)); // true
console.log(pattern.test(str3)); // true

Question Mark (?)

The question mark (?) matches zero or one occurrence of the previous character or group. For example:

let pattern = /colou?r/;
let str1 = "color";
let str2 = "colour";
console.log(pattern.test(str1)); // true
console.log(pattern.test(str2)); // true

Curly Braces {}

Curly braces ({}) are used to specify the number of occurrences of the previous character or group. For example:

let pattern = /ab{2,4}c/;
let str1 = "ac";
let str2 = "abc";
let str3 = "abbc";
let str4 = "abbbc";
console.log(pattern.test(str1)); // false
console.log(pattern.test(str2)); // false
console.log(pattern.test(str3)); // true
console.log(pattern.test(str4)); // true

Conclusion

JavaScript RegExp is a powerful tool for searching, replacing, and extracting information from strings. By defining regular expression patterns, we can match them with strings and modify the behavior using flags. Special characters and quantifiers allow us to define complex patterns that match specific criteria. With RegExp, we can manipulate text quickly and efficiently.