JavaScript RegEx

You may have encountered an error while filling out a form, which could be due to an incorrect email address or an invalid password. This error-checking mechanism uses a regular expression, or RegEx in JavaScript, to validate the input. With the help of a regular expression, we can examine a series of characters to determine whether they meet specific criteria. RegEx is short for regular expressions. Regular expressions can be found in many programming languages used today and are used to perform various functions. In this article, we are going to be looking at regular expressions in JavaScript.

REGEX (Regular Expressions)

Regular expressions are a powerful tool used to define patterns in a string. With regular expressions, you can specify patterns like a letter preceded by a hyphen, a symbol followed by a number, or a sequence of characters in a particular order. Regular expressions are supported in many programming languages and share similar concepts, meaning that an expression in one language will likely produce the same result in another language. However, slight differences may exist depending on the programming language or the Regex engine running the expression. Additionally, multiple regular expressions can be used for different patterns. Overall, regular expressions are an effective way to define patterns in a string.

Why Regular Expressions?

Regular expressions have become very useful in programming; they can be used to achieve the following:

1. Regular expressions can be used to find the parts of a string that match a pattern. It can be used to search for a match in a particular piece of content.

2. They are also used to validate that a string follows a pattern. e.g., to verify that an email string is valid.

3. Regular expressions can also be used to verify if a password meets certain criteria.

How Regular Expressions Work

Programming languages are equipped with RegEx engines that execute regular expressions defined by the user. These engines are in charge of locating and returning the components of a string that match the user's regular expression. When applying the regular expression, the engine searches through the string from left to right using the backtracking regex engine method.

RegEx Syntax

Regular expressions are objects that can be created using the RegExp constructor or by enclosing a pattern in forward slash (/) characters and writing it as a literal value. Both literal notations and the RegExp constructor can be used to create regular expressions.

const regExpStr = 'Hi Everyone! hi everyone';

// Syntax: /pattern/flags
const regExpLiteral = /Hi/gi;

console.log(regExpStr.match(regExpLiteral));

// Output: ['Hi', 'hi']

The RegExp constructor accepts two arguments

let RegExp = (pattern, flags)

Terms used in RegEx

When using Regular Expressions, you may encounter various terminologies. In this article, we will explore the commonly used terminologies in Regular Expressions.

• String: A string is a combination of characters; this can be a letter, a word, or a sentence. When a pattern is applied to a string, you can get the parts of that string (substring) that match the defined pattern. Substring refers to specific parts of the whole string. A string can be made up of different characters.

• Letters: The letter casing—which can be either uppercase or lowercase—is largely responsible for this.

• Symbols: A symbol is a character or a sign; they are special characters that have meanings. examples include: $ , ^ , & ,* , @ ,!, etc.

• Whitespace: This refers to the horizontal or vertical space between characters. Horizontal space can be obtained by clicking on the single and tab spaces, while vertical is the newline space, which is the space between one line and the other, or line break.

• Character: Characters refer to digits, letters, symbols, or whitespace. All of these are classified as characters.

• Pattern: In simple terms, it is what can match a combination of characters in a string.

• Flags: Most regular expressions have some default behaviors; these flags are optional characters that can be added at the end of your pattern to change some of those default behaviors.

Flags

Flags, also known as modifiers, are additional parameters that can be passed to regular expressions to alter their default behavior. These modifiers can be used to specify how you want to match the expression. In literal notation, these modifiers are added to the end of the last forward slash (/) used in the expression.

There are four common modifiers in Regex.

1. gGlobal: By default, a regular expression only matches the first set of characters in a string. However, using the global flag g returns all matches.

2. icase-insensitive: The case-insensitive flag removes all case restrictions in the matches. By default, regular expressions are case-sensitive; to change the pattern, use the flag.

3. sNewline flag: By default, the dot sign. is a special character that matches any kind of character except a newline. To remove the default, you can add the s flag.

4. mmultiline match flag: The symbol /m is used for multiline matches. The symbol ^, which is used at the beginning of a regular expression, matches the beginning of a string. Similarly, the symbol $, which is used at the end of a regular expression, matches the end of a string.

Regular Expression Methods

There are various methods used in regular expression, which include:

• The test() Method

The simplest one is the test() method. Thetest() method compares the target text with the regex pattern and returns a Boolean telling you if the string contains a match for the pattern in the expression.

const regExp = /hello/i;

console.log(regExp.test('hello')); // Output: true

console.log(regExp.test('peace')); // Output: false

Also, there are other methods that accept regular expressions. They include;

Method	Description
.split()	splits the string into an array using the match(es) as a delimiter
.match()	returns an array with the matches
.matchAll()	method returns an iterator of results after matching a string
.search()	Returns the index of the first match in a string
.replace()	replaces a match in the string with a given substring

Conclusion

In this article, we have explored the workings of regular expressions, including RegEx syntax, terms commonly used in RegEx, flags, and popular methods used in regular expressions. However, it is important to note that regular expressions are a vast topic, and there is much more to learn beyond what we have covered in this article. To further your understanding of regular expressions, I recommend that you refer to additional resources and continue reading up on the topic.

I hope you found this post insightful.

I'd love to connect with you on Twitter LinkedIn GitHub

I'll see you in my next blog post. Take care!