Regular expressions are patterns used to match and/or manipulate strings. This is a high-level overview of a few of the practical applications of a RegEx in Javascript.

What is RegEx and what’s it doing in Javascript?

A RegEx consists of simple and special characters that together form a language of its own. Regular expressions can be used to match strings, identify specified patterns, and extract parts of strings.

RegEx is a common enough function available in programming languages. They provide powerful ways to recognize patterns and test a given string efficiently and quickly.

Regular expressions are easy to get started with but can get difficult quickly. Regular expressions can be notorious to decipher, hard to understand and in general, and become an object of your nightmares if not properly tested.

RegEx is an object in Javscript. Since Javascript was primarily manipulating HTML and content, it directly supports RegEx, gets a dedicated RegEx notation and, expectedly, makes it easy to deal with strings.

Ways to create RegEx

There are two ways to create RegEx -

1. The most common way

1
2
3

let str = /hello/;
console.log("str: ", str);
// /hello/

1. The obnoxious way

1
2
3

let strReg = new RegExp(/hello/);
console.log("strReg: ", strReg);
// /hello/

By itself RegEx just describes a pattern. You may apply that pattern to a string using Javascript methods. For example, .test tests whether the defined pattern exists in the given string.

1
2
3
4
5
6

const pattern = /hello/;

console.log(pattern.test("hello"));
// true
console.log(pattern.test("world"));
// false

Types of Methods using RegEx

You can use more than one type of function with RegEx.

Identify / search

Identify a string pattern within a given string.

1
2
3

const pattern = /hello/;
console.log(pattern.test("hello"));
// true

Or, use a string expression. I find this easier to remember since I start with strings most of the time.

1
2
3
4
5
6

console.log("hello world".search(/hello/));
// 0
console.log("hello world".search(/wo/));
// 6
console.log("hello world".search(/earth/));
// -1

Search with additional info

Search a given string, but also potentially do something with the extracted strings.

Use RegEx.

1
2
3
4

console.log(/hello/.exec("hello world"));
// [ 'hello', index: 0, input: 'hello world', groups: undefined ]
console.log(/hello/.exec("earth"));
// null

As in the previous case, alternatively use string expressions.

1
2
3
4

console.log("hello world".match(/hello/));
// [ 'hello', index: 0, input: 'hello world', groups: undefined ]
console.log("hello world".match(/earth/));
// null

You can boost up the power by using flags in RegEx.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

console.log("hello world".replace(/o/, "e"));
// helle world

console.log("hello world".replace(/o/g, "e"));
// helle werld

console.log("hello world".replace(/O/, "i"));
// hello world

console.log("hello world".replace(/O/gi, "i"));
// helli wirld

And then, level up even more using range manipulation.

1
2

console.log("hello world".replace(/[a-z]/g, ".-"));
// .-.-.-.-.- .-.-.-.-.-

Manipulate

Use RegEx to split a string.

1
2

console.log("hello world".split(/wo/));
// [ 'hello ', 'rld' ]

Or, replace a substring within string.

1
2

console.log("hello world".replace(/w/, "o"));
// hello oorld

Few examples of practical application of RegEx

Here are a few common examples of how RegEx is used.

Test valid email

Test whether a given string is a valid email.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let pattern = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;

console.log(pattern.test("test@email.com"));
// true

console.log(pattern.test("test@"));
// false

console.log(pattern.test(".com"));
// false

Test names

Test whether the name input by user is correct.

The below pattern does not accept numbers or special characters. Depending on the region you are in, you may need to change the pattern to accept special characters and numbers.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let pattern = /^[ a-zA-Z]*$/;

console.log(pattern.test("Mr Anderson"));
// true

console.log(pattern.test("test@"));
// false

console.log(pattern.test("André Cortez The Third"));
//false

Tools to Learn RegEx

As you may have seen by now, RegEx is a beast of its own. I do two things to speed up my application of RegEx -

1. Google - for e.g. search for email validation regex
2. Use external tools to iterate through RegEx quickly before deciding the final pattern

Some of the tools that are super useful -

• [https://regexr.com/]: See a visual representation of RegEx application in Javascript and PHP
• [https://regex101.com]: a clean way to quickly test regular expressions in Javascript, PHP, Python and Go