Regular Expression

I had read about regular expressions and thought of writing a blog on this. I will try to cover as much as possible. Let's start with the basic definition. Regular Expression A regular expression (also “regexp”, or just “reg”) consists of a pattern and optional flags. In short, it is the method of matching strings to a pattern. Two syntaxes can be used to create a regular expression. const regexp = new RegExp("pattern","flags"); OR const regexp = /pattern/; //without flags const regexp = /pattern/flags; Regex should be written within forward-slashes /..../. These slashes play the same role as quotes in strings. The main difference between the syntaxes is that when the regular expression remains constant, use a pattern with a slash for better performance, but if the regular expression is changing, or you don't know the pattern, or getting it from another source like input fields, then a pattern with constructor should be used. This is not a hard and fast rule, but an optimal way to do. Let's see an example: const regex = new RegExp("abc"); const regex = /abc/; Both of these regular expressions represent the same pattern, i.e a is followed by b followed by c. Flags Regular expressions may have flags that affect the search. There are only 6 of them in JavaScript: i: With this flag, the search is case-insensitive g: With this flag, the search looks for a whole match. Without this flag, the search returns only the first match m: With this flag, the search matches not only at the beginning and the end of the string, but also at the start/end of the line. u: Enables full Unicode support s: With this flag, the search allows a dot . to match a newline character \n y: With this flag, searching at the exact position in the text Let's understand it more with some examples. let string = "You can and you will"; console.log(string.match(/You/gi)); //(2) ["You", "you"] As we are using g flag, it returns an array of all matches. Both You and you are found because i flag makes the regex case-insensitive. Let's see what happens without the flag. let string = "You can and you will"; console.log(string.match(/You/)); //(1)["You"] Before going through other flags, first understand Character Classes. Character Classes A character class is a special notation that matches any symbol from a certain set. The following character classes exist: \d - digits \s - space symbols, tabs, newlines \w - Latin letters, digits, underscore '_' . - any character if with the regexp 's' flag, otherwise any except a newline \n. Inverse Classes Every character class has an inverse class; these are: \D - non-digits \S - all but \s \W - all but \w Dot Character Class A dot is a special character which matches "every character except new line". alert("ABC".match(/./)); // A We can even match it in the middle of a regex. const regex = /Project.2/; alert("Project-2".match(regex)); //Project-2 alert("Project 2".match(regex)); //null The second example gives null. This is because a dot means "any character" but not "absence of character." Dot doesn't match character with new line without s flag. let string = "A\nB" alert(string.match(/A.B/)); //null alert(string.match(/A.B/s)); //A B The above example is self-explanatory. Regular expressions are a powerful tool in JavaScript for pattern matching and text manipulation. While they may seem intimidating at first, understanding the basics, such as how to create regex using literals or constructors, the role of flags, and the meaning of character classes, can go a long way in making them approachable and useful. Whether you're validating input, searching within strings, or performing complex text transformations, regex can simplify your logic and make your code more efficient. As with any powerful tool, practice and experimentation are key to mastering regular expressions. Happy coding!

May 7, 2025 - 18:21

I had read about regular expressions and thought of writing a blog on this. I will try to cover as much as possible. Let's start with the basic definition.

Regular Expression

A regular expression (also “regexp”, or just “reg”) consists of a pattern and optional flags. In short, it is the method of matching strings to a pattern.

Two syntaxes can be used to create a regular expression.

const regexp = new RegExp("pattern","flags");

const regexp = /pattern/; //without flags
const regexp = /pattern/flags;

Regex should be written within forward-slashes /..../. These slashes play the same role as quotes in strings.

The main difference between the syntaxes is that when the regular expression remains constant, use a pattern with a slash for better performance, but if the regular expression is changing, or you don't know the pattern, or getting it from another source like input fields, then a pattern with constructor should be used.
This is not a hard and fast rule, but an optimal way to do.

Let's see an example:

const regex = new RegExp("abc");
const regex = /abc/;

Both of these regular expressions represent the same pattern, i.e a is followed by b followed by c.

Flags

Regular expressions may have flags that affect the search.
There are only 6 of them in JavaScript:

i: With this flag, the search is case-insensitive
g: With this flag, the search looks for a whole match. Without this flag, the search returns only the first match
m: With this flag, the search matches not only at the beginning and the end of the string, but also at the start/end of the line.
u: Enables full Unicode support
s: With this flag, the search allows a dot . to match a newline character \n
y: With this flag, searching at the exact position in the text

Let's understand it more with some examples.

let string = "You can and you will";
console.log(string.match(/You/gi));
  //(2) ["You", "you"]

As we are using g flag, it returns an array of all matches.
Both You and you are found because i flag makes the regex case-insensitive. Let's see what happens without the flag.

let string = "You can and you will";
console.log(string.match(/You/));
  //(1)["You"]

Before going through other flags, first understand Character Classes.

Character Classes

A character class is a special notation that matches any symbol from a certain set.
The following character classes exist:
\d - digits
\s - space symbols, tabs, newlines
\w - Latin letters, digits, underscore '_'
. - any character if with the regexp 's' flag, otherwise any except a newline \n.

Inverse Classes

Every character class has an inverse class; these are:
\D - non-digits
\S - all but \s
\W - all but \w

Dot Character Class

A dot is a special character which matches "every character except new line".

alert("ABC".match(/./)); 
      // A

We can even match it in the middle of a regex.

const regex = /Project.2/;
alert("Project-2".match(regex)); //Project-2
alert("Project 2".match(regex)); //null

The second example gives null. This is because a dot means "any character" but not "absence of character."
Dot doesn't match character with new line without s flag.

let string = "A\nB"
alert(string.match(/A.B/)); //null
alert(string.match(/A.B/s)); //A  B

The above example is self-explanatory.

Regular expressions are a powerful tool in JavaScript for pattern matching and text manipulation. While they may seem intimidating at first, understanding the basics, such as how to create regex using literals or constructors, the role of flags, and the meaning of character classes, can go a long way in making them approachable and useful. Whether you're validating input, searching within strings, or performing complex text transformations, regex can simplify your logic and make your code more efficient. As with any powerful tool, practice and experimentation are key to mastering regular expressions. Happy coding!