The Beauty of JavaScript Regular Expressions (RegEx)

Sule-balogun Olanrewaju

A regular expression (sometimes called a rational expression) is a sequence of characters that define a search pattern, mainly for use in pattern matching with strings, or string matching, i.e. “find and replace” type of operations.(Wikipedia).

Regular expressions are used in programming languages to match parts of strings. You create patterns to help you do that matching.

Take for instance when you are trying to find the word ‘apple’ in a string “I gave him the apple”, you could use the following regular expression: /apple/.

let str = "I gave him the apple";

let regex = /apple/;

NOTE: The quotes are not required within the regular expression.

/’apple’/ — it’s not necessary. Why? You will figure it out later as we progress in this article.

JavaScript has multiple ways to use RegExes. Let’s take a deep dive into some of its usage(s).

Test Method

The .test() method takes the RegEx, applies it to a string (which is placed inside the parentheses), and returns true or false based on the search result.

let str = "He collected the apple";

let regex = /apple/;

let result = regex.test(str);

console.log(result);

Earlier we talked about not making use of quotes in RegEx and this is the reason as the sample snippet would return false.

let str = "He collected the apple";

let regex = /'apple'/;

let result = regex.test(str);

console.error(result);

Match a Literal String with Different Possibilities

You can search for multiple patterns using the alternation or OR operator: |. This operator matches patterns either before or after it.

let str = "I love JavaScript";

let regex = /java|php|JavaScript/;

let result = regex.test(str);

console.log(result);

Ignore Case While Matching

The flag that ignores case — the i flag. You can use it by appending it to the RegEx. An example of using this flag is /ignorecase/i.

let str = "Nigeria";

let regex = /niger/i;

let result = regex.test(str);

console.log(result);

Extract Matches

It is easy to extract the actual matches you find with the .match() method. To use it, apply the method on a string and pass in the RegEx inside the parentheses.

let str = "Learning to code in JavaScript is fun";

let regex = /javascript/i;

let result = str.match(regex);

console.log(result);

Find More Than the First Match

To search or extract a pattern more than once, you can use the gflag.

let str = "Hip Hip Hip Hurray";

let regex = /Hip/g;

let result = str.match(regex);

console.log(result);

NOTE: It’s also possible to have more than one flag on a RegEx.

let str = "Hip Hip Hip Hurray";

let regex = /hip/gi;

let result = str.match(regex);

console.log(result);

Match Search with Wildcard

The wildcard character .also called dot or period, will match any one character. You can use the wildcard character just like any other character in the RegEx.

let str = "Humpty Dumpty sat on a wall";

let regex = /.umpty/g;

let result = str.match(regex);

console.log(result);

Match Single Character with Multiple Possibilities

Searching for a literal pattern with some flexibility with character classes. Character classes allow you to define a group of characters you wish to match by placing them inside square brackets [ … ].

let str = "Beware of bugs in the above code; I have only proved it correct, not tried it.";

let vowelRegex = /[aeiou]/gi;

let result = str.match(vowelRegex);

console.log(result);

Match Number and Letters of the Alphabet

There is a built-in feature that makes specifying a group of characters to match short and simple. Inside a character set, you can define a range of characters to match using a hyphencharacter: -.

let str = "The value of PI is 3.14159 ";

let myRegex = /[a-z0-9]/gi;

let result = str.match(myRegex);

console.log(result);

Match Single Characters Not Specified

You could 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 caretcharacter ^ after the opening bracket and before the characters you do not want to match.

let str = "May is the 5th month";

let myRegex = /[^aeiou0-9]/gi;

let result = str.match(myRegex);

console.log(result);

Match Characters that Occur One or More Times

There might be a need to match a character (or group of characters) that appears one or more times in a row. This means it occurs at least once, and may be repeated. The + character is use check if that is the case.

let str = "Mississippi";

let myRegex = /ss+/g;

let result = str.match(myRegex);

console.log(result)

Match Characters That Occur Zero or More Times

There’s also an option that shows the below:

The characterasteriskorstar*matches characters that occur zero or more times..

let str = "Aaaaaaaaaaaaaaaarrrgh!";

let regex = /Aa*/; 

let result = str.match(regex);

console.log(result);

Match Beginning String Patterns

Outside of a character set, the caret is used to search for patterns at the beginning of strings.

let str = "I love to code";

let regex = /^I/; 

let result = regex.test(str);

console.log(result)

Match Ending String Patterns

You can search the end of strings using the dollar sign $ at the end of the RegEx.

let str = "The last month of year is december";

let lastRegex = /december$/;

let result = lastRegex.test(str);

console.log(result)

Match All Letters and Numbers

The shorthand character classes in JavaScript is \w. This shortcut is equal to [A-Za-z0-9_]. This character class matches upper and lowercase letters plus numbers.

NOTE: This character class also includes the underscore character _.

let str = "The five boxing wizards jump quickly.";

let regex = /\w/g; 

let result = str.match(regex).length;

console.log(result);

Match Everything but Letters and Numbers

You can search for the opposite of the \w with \W.

NOTE: The opposite pattern uses a capital letter, and the shortcut is the same as[^A-Za-z0-9_].

let str = "He was glad to have made the starting eleven for the match.";

let regex = /\W/g; 

let result = str.match(regex).length;

console.log(result);

Match All Numbers

The shortcut to look for digit characters is \d, with a lowercase d. This is equal to the character class [0-9], which looks for a single character of any number between zero and nine.

let str = "Nasra bride price will cost $100.00";

let regex = /\d/g;

let result = str.match(regex).length;

console.log(result);

Match All Non-Numbers

The shortcut to look for non-digit characters is \D. This is equal to the character class [^0-9], which looks for a single character that is not a number between zero and nine.

let numString = "Nasra bride price cost $100.00";

let noNumRegex = /\D/g;

let result = numString.match(noNumRegex).length;

console.log(result);

Match White Space

You can search for white space using\s, which is a lowercase s.

let whiteSpace = "Stew Stew everywhere!";

let spaceRegex = /\s/g;

let result = whiteSpace.match(spaceRegex);

console.log(result);

Match Non-White Space

And searching for non white space using \S, which is an uppercase S. This pattern will not match white space, carriage return, tab, form feed, and new line characters.

let sample = "Whitespace is important in separating words";

let countNonWhiteSpace = /\S/g; 

let result = sample.match(countNonWhiteSpace);

console.log(result);

Check for All or None

You can specify the possible existence of an element with a question mark?. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional.

let favWord = "favorite"; 

let favRegex = /favou?rite/; 

let result = favRegex.test(favWord); 

console.log(result);

Reuse Patterns Using Capture Groups

You can search for repeat substrings using capture groups. Parentheses, (… ), are used to find repeat substrings. You put the RegEx of the pattern that will repeat in between the parentheses.

To specify where that repeat string will appear, you use a backslash \, and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be \1 to match the first group.

let repeatNum = "52 52 52";

let reRegex = /^(\d+)\s\1\s\1$/; 

let result = repeatNum.match(reRegex);

console.log(result);

Use Capture Groups to Search and Replace

You can search and replace text in a string using .replace()on a string. The inputs for .replace()is first the RegEx pattern you want to search for. The second parameter is the string to replace the match or a function to do something.

let huhText = "This meal is delicious.";

let fixRegex = /delicious/;

let replaceText = "absolutely-delicious";

let result = huhText.replace(fixRegex, replaceText);

console.log(result);

A simple guide that was inspired by the freeCodeCamp curriculum will seek to improve and advance regular expression skills.

Happy Coding !!!

1
0
CategoriesTags
Sule-balogun Olanrewaju

Experienced software engineer with a passion for developing innovative programs that expedite the efficiency and effectiveness of organizational success. Well-versed in technology and writing code to create systems that are reliable and user-friendly. Skilled leader who has the proven ability to motivate, educate, and manage a team of professionals to build software programs and effectively track changes. Confident communicator, strategic thinker, and innovative creator to develop software that is customized to meet a company’s organizational needs, highlight their core competencies, and further their success.
Author @icodemag.com

Related Posts