Working With Regular Expressions (RegEx) in JavaScript

Match parts of strings with regular expressions

In programming languages, regular expressions are used to match parts of strings.

Getting Started With RegEx

Let’s say that, if you want to find the word "help" in the string “God helps those who help themselves”, you can use the following regular expression (RegEx): /help/.

JavaScript uses the .test() method, which takes the RegEx and applies it to a string (placed inside parenthesis). It returns true or false, depending on whether the pattern matches or not.

let str1 = "God helps those who help themselves";
let str2 = "You can't expect everyone to like you";
let testRegex = /help/;
testRegex.test(str1); //returns true
testRegex.test(str2); //returns false

In the example above, we used a literal RegEx /help/ to search for the word help in variable str1 and str2.

Another example of literal RegEx can be /expect/, which will match the word expect from the string.

We can look for multiple patterns using the OR operator: |.

Example: if you wanted to match “hi”, “hello”, or “hola”, the RegEx would be: /hi|hello|hola/.

Match Method

There is another method in JavaScript: .match(). It is applied on a string and takes a RegEx as an argument. The .match() method returns an array with the matched RegEx.

Example: “Quick brown fox”.match(\brown\); \\returns [“brown”]

Flags

We can use the -i flag to ignore letter case while matching.

“Hello” and “hello” will both match the RegEx /hello/i.

If we want to extract a match of every occurrence of a word in a string we use the -g (global) flag.

Example: “hello, hello, hello”.match(\hello\g); //returns [“hello”,”hello”,”hello”]

We can also use the -i and -g flags together to find all the occurrences of a word, as well as to ignore cases.

Wild Card

The wild card (.) matches anything.

The wild card . (aka dot or period) will match any one character.

Example: if you want to match “huh”,”hut”,”hum”,”hug”, we can use the RegEx /hu./

Character Classes

Character classes allow you to define a group of characters you wish to match by placing them inside square ([ and ]) brackets.

Example: “bag, big, bug, bog”.match(b[aiu]g); //returns [“bag”, “big”, “bug”, “bog”].

To match a range of characters, let’s say lowercase letters a to e, you would use [a-e].

Example: “cat, bat, mat”.match(/[a-e]at/); //returns [“cat”, “bat”, null]

You could also create a set of characters that you do not want to match.

These types of character sets are called negated character sets. To create a negated character set, you place a caret character (^) after the opening bracket and before the characters you do not want to match.

Example: /[^aeiou]/gi matches all the non-vowel characters.

Note that, outside of a character set, the caret (^) is used to search for patterns at the beginning of strings.

Also, you can search the end of strings using the dollar sign character $ at the end of the RegEx.

To match the occurrence of a character at least once we can use +, and to match characters that occur zero or more times we use *.

Example: ‘gooooooooooal!’.match(/go*/); //returns [“goooooooooo”]

Greedy and Lazy Match

In regular expressions, a greedy match finds the longest possible part of a string that fits the RegEx pattern and returns it as a match.

The alternative is called a lazy match, which finds the smallest possible part of the string that satisfies the RegEx pattern.

Example-1: "titanic".match(\t[a-z]*i\) returns \\ ["titani"]
Example-2: "titanic".match(/t[a-z]*?i/) 
returns \\ ["ti"] here we have used ? to specify lazy match.

Special Characters (\w, \W, \s, \S, \d, \D)

• To match all numbers and letters in JavaScript, we use \w which is equivalent to RegEx \[A-za-z0–9_]\.
• To skip all numbers and letters we use \W.
• To match only digits we use \d.
• To not match digits we use \D.
• \s is a RegEx that matches white spaces.
• \S is a RegEx to escape white space.

Range

To match a letter appearing in a certain range we use {}.

Example: "aaaaapple".test(\a{3,5}\); //returns true. 3 and 5 are the minimum and maximum number of times a should be present in the string.

That’s it, folks. I hope you find this interesting. Drop me your feedback! Thanks for reading.