RegEx (Regular Expression) in JavaScript

3 min readJun 13, 2018

I was not familiar with regular expressions, so spend time learning them from various books, mdn docs, blogs and source codes.

Learning and using regular expressions effectively is one of the most rewarding skills that you can gain. If you study popular JavaScript libraries or frameworks, you will be surprised to see how ubiquitous RegEx are.

Most engineers I know who are working on very good positions at GitHub and Google rely on RegEx primarily ’cause once you know how to use them, they are concise and easy to test.

However, learning RegEx took a significant amount of mineral water and air conditioning to me. Now lets get to a simple definition.

Definition

A regular expression or RegEx is a way to express a pattern to match strings of text. The expression itself consists of terms and operators that allow us to define these patterns.

How to?

In JS there are two ways to create a RegEx:

via a regular expression literal 😈
constructing an instance of a RegExp object 😇

e.g.: if you want to create a RegEx that matches the string test exactly, you could use

var pattern = /test/; The RegEx literal

var pattern = new RegExp("test"); RegExp constructor

In addition to the expression itself, there are three flags 🚩 that can be associated with a RegEx:

i: this makes the RegEx case-insensitive
g: this matches all the instances of the pattern
m: this allows matches across multiple lines

These flags are appended to the end of the literal ( /test/igm) or passed in a string as the second parameter to the RegExp constructor — new RegExp("test", "igm");

Some examples to understand how these flags work and affect the pattern

var pattern = /dhruv/;
console.log(pattern.test("dhruv")); // truevar pattern = /dhruv/i;
console.log(pattern.test("Dhruv")); // true

Match from an array of characters

If you want to match against a set of chars, you can place the set inside square brackets [] . For example, [abc] would mean any character a,b, or c:

var pattern = /[abc]/;
var nonPattern = /[^abc]/;console.log(pattern.test("a")); // true
console.log(pattern.test("z")); // falseconsole.log(nonPattern.test("a")); // false
console.log(nonPattern.test("z")); // true

and you can specify that you want to match anything but the pattern by adding a ^ (caret sign) at the beginning.

Also, if we want to match against a sequential range 💙 of chars or numbers, we can use the same method but with a hyphen -

var pattern = /[0-9]/;

String methods that can be used with RegEx

match — It returns an array containing all the matches (synonym of exec() for RegExp)
replace — It replaces the occurrence of a substring (RegEx here)
split — It returns an array containing all the substrings generated after splitting

Shortcuts

\d — any digit character
\w — any alphanumeric character
\s — any whitespace character
\D — a char that is not a digit
\W — a non-alphanumeric character
\S — a non-whitespace character
. — any character except for newline

Repeated Occurrences

RegEx comes with a wide variety of repetition quantifiers. Repetition quantifiers let us specify how many times a particular pattern can occur. List of various repetition quantifiers:

? Either 0 or 1 occurrence
* 0 or more occurrences
+ 1 or more occurrences
{n} exactly n occurrences
{n, m} occurrences between n and m
{,n} o to n occurrences

Examples: 🎴

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

You can also group character expression using ()

var pattern = /Ha+(Ha+)+/i;
console.log(pattern.test("HaHaHaHaaaaaaaaaa")); // true

🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁🏁
You won the race
Hurray! you have completed the RegEx basic tutorial

If you liked and appreciate the writing, 👏👏👏 clap and share.

Also, follow me on

Twitter at maddhruv

GitHub at maddhruv