For my first tutorial, the objective is to summarize the syntax and the different components that create a regex. For this tutorial, the regex example will be one that seeks to macth an email address. We will find out how this regex create a pattern, seeking to match any real life email address.
The regex that will be explained is the following:
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/This regex can be separated into different elements, such as anchors, quantifiers, constructors, expressions, classes, operators, flags and escapes. The following table of contents will help you navigate through the explanations of each element that was just mentioned. Without further ado, let's get started with the concepts!
- Anchors
- Quantifiers
- Grouping Constructs
- Bracket Expressions
- Character Classes
- The OR Operator
- Flags
- Character Escapes
For this example, the anchors would be the ^ and $ symbols. The function of these anchors is to delimit the start and ending points of the all the other elements that make up the regex and that seek to match the email address.
For the quantifiers, in the example given, the + symbol would be our quantifier. The purpose of quantifiers is to secure the use of characters in the sections in which is needed. For our example, the quantifiers are needed to be able to find the characters before the @ and . symbols.
The grouping constructors are the () symbols. These are used to group the different sections in which specific characters are needed. In our example, the () symbols are used at 3 sections. Before the @ to find the email user, before the . to find the email domain and after the . to find the email extension.
The bracket expressions are kinda similar to the grouping constructors. In our example, these would be the [] symbols and all the characters that are inside the brackets. The purpose of these is to declare the characters that are able to be used when creating an email address and also the characters that will be able to find a match. In our example, the characters that are permitted are:
- Lowercase letters
- Numbers
- Underscores
- Periods
- Hyphens
For our example, the chracter classes is declared with the \d symbol. Character classes are used to determine which characters are allowed to be used in a specific area of the email address. We can find this symbol at the beginning of the domain section. It's purpose is to find the decimal numbers that are allowed to be used in that section.
Even though we don't hace the OR operator in our example, this operator would look like | this symbol. The function of the OR operator is to enlarge the seeking and matching capacities of a REGEX. A good example could be if we want to find or match two or more different types of messages. For example, if we wanted to match either an email address or a phone number. With the | symbol we would be able to delimit where the regex is searching for an email and where it starts searching for a phone number.
As well as with the OR operator, we don't have this functionality in our REGEX example. The general functionality of a flag is to add new functionalities and more specific ones to REGEXs. An example of a flag would be the i symbol. This symbol would be used to make the REGEX case insensitive. Another example would be the u symbol, which enables the REGEX to match unicode characters like emojis.
In our example, the functionality of the \ symbol is to create an "escape" for the next character. In our REGEX, this enables the period to be used as a character and not as a punctuation mark. This is important when the messages, text or numbers we are trying to match use any type of punctuation that could be read with a different logical connotation.
Emilio Frías, the author of this tutorial, is a full-stack web developer that enjoys learning new technologies and abilities. His curiosity for coding began when he got invited to participate in a coding bootcamp at Tecnológico de Monterrey. He focuses on creating fluid and eye appealing designs. For more information, please refer to the following links:
LinkedIn Profile: https://www.linkedin.com/in/emiliofrias/
GitHug Profile: https://github.com/EmilioColds