Guide for Regular Expressions in JS

The Little Guide for Regular Expressions in JS

This is going to be a little guide for regular expressions, a very important part of programming in general.

I will try to be the more simple and clear as possible.

I hope you like it 😊

What is a Regular Expression?

Are patterns used to find a certain combination of characters within a text string. In JavaScript, regular expressions are also objects.

Simple Creation: ✍️

Recommended way ✔️: ️ let re = /good/;

Not so Recommended way ❌: let re = new RegExp(/good/);

When is better to use the literal way or using the RegExp constructor? ❓

Use the literal expression when the regular expression is going to be constant, because this way offers the immediate compilation of the regular expression when the script is loaded.

Use the RegExp constructor when the regular expressions is going to change or maybe the user is going to determinate the pattern.

Let’s start with methods and properties: 👊🏻

Ways to prove a Regular Expression:

exec: Return an array if exist a match, if not, return null.

console.log(re.exec('good bye'));  -> [ 'good', index: 0, input: 'good bye' ]

So we get : [ ‘good’, index: 0, input: ‘good bye’ ]

'good' -> is the regular expression.index: -> Is when the regular expression starts.input: -> Is the actual exec text.

test: Return true if exist a match, if not, return false.

console.log(re.test('good job!'));  -> trueconsole.log(re.test('nice job!'));  -> falseconsole.log(re.test('Good bye'));  -> false

In the last example we get false, maybe you are asking why that happens if the word ‘good’ was included, the thing here is that regular expressions are case sensitive like default, later, when we learn about flags we are going to fix this.

match: Return an array or null.

let str = 'goodbye for everyone';console.log(str.match(re));  -> [ 'good', index: 0, input: 'good bye for everyone' ]

This one is very similar to exec, the difference here is that we change the way that the regular expression is tested.

search: Return the index of the first match, if there is not match return -1

let str = 'goodbye for everyone';console.log(str.search(re));  -> 0 (because 'good' starts at the beginning of the text)

let str2 = 'that is not good';console.log(str2.search(re));  -> 12

replace: Return a new string if there find the regular expression.

let str = 'good job everyone!';console.log(str.replace(re, 'nice'));  -> nice job everyone!

Flags: 🚩

The flags are included at the end of the regular expression:

Literal Expression: let re = /pattern/flags;

With RegExp: let re = new RegExp('pattern', 'flags');

There is four flags to use:

g: Is for global search. Meaning it’ll match all occurrences, not just the first.

let str = 'aaa';console.log(str.match(/a/g));  -> [ 'a', 'a', 'a' ]

// Without the g flagconsole.log(str.match(/a/));  -> [ 'a', index: 0, input: 'aaa' ]

i: Is for case-insensitive.

let re = /good/i;console.log(re.test('Good bye'));  -> true

There is also two more:

m : for multi-line searching.

y: call Sticky, matches only from the index indicated by the lastIndex property of this regular expression. (not standard yet).

Properties: 🌳

Get the source text:

let re = /good/;console.log(re.source);  -> good

Return the flags that the regular expression have:

let re = /good/i;console.log(re.flags);  -> i

Verify if the regular expression is case-sensitive (i) or not:

let re = /good/i;console.log(re.ignoreCase);  -> true

let re2 = /good/;console.log(re2.ignoreCase);  -> false

Verify if the regular expression have the global (g) flag:

let re = /good/g;console.log(re.global);  -> true

Verify if the regular expression have the multiline (m) flag:

let re = /good/m;console.log(re.multiline);  -> true

Verify if the regular expression have the sticky (y) flag:

let re = /good/y;console.log(re.sticky);  -> true

Metacharacters Symbols: 🔱

There are quite a few special characters that will help us significantly when it comes to building our regular expressions.

^ : Must start with:

let re = /^j/;console.log(re.test('javascript'));  -> trueconsole.log(re.test('object'));  -> false

$ : Ends with:

let re = /.com$/;console.log(re.test('germancutraro@hotmail.com'));  -> trueconsole.log(re.test('germancutraro@hotmail'));  -> false

. : Any ONE character:

let re = /go.od/;console.log(re.test('go@od'));  -> true console.log(re.test('go@#od'));  -> false

* : Any character, could be 0 or more times repeated:

let re = /go*od/;console.log(re.test('good'));  -> trueconsole.log(re.test('goXdod'));  -> falseconsole.log(re.test('god'));  -> true

? : Define optional characters:

let re = /go?o?d/; console.log(re.test('god'));  -> true console.log(re.test('grfy'));  -> false

\ : Escape character:

let re = /go?o\?d/; console.log(re.test('god'));  -> false 

[] : Character sets:

let re = /gr[ae]y/;console.log(re.test('gray'));  -> trueconsole.log(re.test('grey'));  -> trueconsole.log(re.test('grty'));  -> false

[^characters] : Match everything except the characters:

let re = /[^F]riday/;console.log(re.test('Friday'));  -> falseconsole.log(re.test('Nriday'));  -> true

[range] : Match a range of characters

let reU = /[A-Z]riday/; // any capitalize letter ([A-Z])console.log(reU.test('Friday'));  -> truelet reL = /[a-z]riday/; // any lower case letter ([a-z])console.log(reL.test('friday'));  -> truelet reUL = /[A-Za-z]riday/; // any letterconsole.log(reUL.test('%riday'));  -> falselet reAny = /[0-9]riday/; // any numberconsole.log(reAny.test('3riday'));  -> true

{} :

let re = /go{2}d/;console.log(re.test('good'));  -> trueconsole.log(re.test('god'));  -> false

// In this case means that the string must have two 'o' (the character before the curly braces).

let re2 = /go{2,4}d/;console.log(re.test('good'));  -> trueconsole.log(re.test('god'));  -> falseconsole.log(re.test('goood'));  -> true

// Now, in re2, could be between 2 and 4 'o' (be careful with the space, {2, 4} is not valid -> the space after the coma is not valid) 

let re3 = /go{2,}d/;console.log(re3.test('goooooooooood'));  -> trueconsole.log(re3.test('god'));  -> false

// In the last example could be 2 or more.

Shorthands: 🔑

Some Classes Shorthands:

/\a/ : Word or number (alphanumeric) .

/a+/ : One or more.

/\W/ : Non-Word character.

/\d/ : Match any number digit.

/\d+/ : Match any number digit 0 or more times.

/\D/ : Non-Number digit.

/\s/ : Match whitespace.

/\S/ : Non-whitespace.

/y(?=e)/ : Match only if ‘y’ is followed by ‘e’

/y(?=!e)/ : Match only if ‘y’ is not followed by ‘e’

Follow me on: Github

And there is much more about regular expression, but I hope this may have helped!

I want to mention and thank to: Brad Traversy

Guide for Regular Expressions in JS was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.