Regular Expressions, or more commonly referred to as Regex, is a way to use characters to match a pattern in a string. These can be useful for user input validation or implementing a find and replace feature in your app.
The use case I will be showing is validating a user's email.
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
I know this might look like egyptian writing, but don't worry, I will go through each character and how it works and how they all work together to validate an email.
/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ The \ matches the a character in its literal form; for example, the _.- in an email address. So that it doesnt reject an email that has characters besides a-z,0-9.
/^([a-z0-9_\.-]+)
The ^ anchor matches the starting position of the string. So it's just looking for matching characters in the beginning of the tested string.
([a-z\.]{2,6})$/
The $ anchor matches the end position of the email string; for example, the .com,.net etc.
Now there is a couple of examples of quantifiers here. There are a variety of quantifiers that you can use. The characters you can use ar *,+,? and {}.
Lets start with the first little bit of the regex right before the @ symbol.
/^([a-z0-9_\.-]+)
You can see that + right there at the end. That means that it will match any of the preceding elements one or more times.
There is also another similar instance in the second part of the regex ([\da-z\.-]+)
The last one that we can find is {2,6} this simply means that the preceding characters can 2 to 6 characters long.
There is some character classes that appear here as well. The best way to portray character classes are just by examples.
You can find a perfect example of character classes in the statement right after the @ symbol ([\da-z\.-]+)\
\d is telling the regex to match a character that is a digit.
a-z and 0-9 is a character class that is used to specify that the string will be lowercase a-z and number 0-9.
In the expression, you can see a set of ()these are an example of grouping. Grouping means that its capturing a group of items. In this expression /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/ you can see that its grouping the email in three different parts.
Lets take the email zion@email.com for example
The inital part, ([a-z0-9_\.-]+) is checking the inital part of the email, zion.
The second group, ([\da-z\.-]+) is checking the domain of the email, so the email part in our example.
The final part, ([a-z\.]{2,6}) is checking for a .com,.net, etc.
Bracket notation is showing that the characters inside can be matched. So in the first group of expressions ([a-z0-9_\.-]+) is saying that characters of a-z,0-9 and _.- are valid characters.
Written by Bryce