The Beauty of JavaScript Regular Expressions (RegEx)

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/.

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.

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

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.

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.

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.

Find More Than the First Match

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

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

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.

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 [ … ].

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: -.

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.

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.

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..

Match Beginning String Patterns

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

Match Ending String Patterns

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

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 _.

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_].

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.

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.

Match White Space

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

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.

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.

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.

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.

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

Happy Coding !!!


Related Posts