RegEx is a very important tool in the lives of programmers. It is used to search for and manipulate text strings in a search pattern. It is not language specific, so it cuts across all programming languages, both frontend and backend.
In JavaScript, there are 2 ways you can create a Regular Expression:
The RegEx literal: In this method, the search pattern is enclosed in slashes /. Like this:
const regexExample = /toby/The RegExp() constructor: Here, you use the RegExp() constructor function to create a search pattern:
const regexExample = new RegExp('toby')
Understanding RegEx is understanding that you have to deal with a lot of special characters used in between strings to define a pattern. These special characters are of several types and they are called Metacharacters.
Metacharacters are special characters interpreted by the RegEx engine itself. These are characters that help us set the tone for our RegEx patterns. There are several metacharacters in RegEx and I will mention them below and what they do.
Below is an example of a combination of these metacharacters in defining a pattern:
let regexExample = 'Welcome to the house of cards' let regexPattern = /c.r/g let regexMatch = regexExample.match(regexPattern)
The result of this will be car.
Before explaining the expression, I'll like to clarify the g flag at the end of the regexPattern. The g stands for global, and it is one of the flags in RegEx. I'll explain Flags sometime later in the article below.
So, from the above example, the regexPattern is the pattern that needs to be searched for in our variable; regexExample. The expression in the pattern says, 'Let's look for strings that start with c, has just one character in between, and ends with an r in regexExample'. Also let the search be global /g. That means searching all the sentences and looking for such strings.
Let's talk about some of the metacharacters.
The Caret symbol (^): This symbol is used to check if a string starts with the preceding character after it. Let's try this symbol with an example.
The Dollar symbol($): This symbol is used to check if a string ends with the preceding character after it. Let's see how it works with an example.
The Square bracket([]): This is used to specify the characters that needs to be matched. It is also used to state the range of an expression.
[a-f] is the same as [a,b,c,d,e,f] [2-7] is the same as [2.3.4.5.6.7]
When you use the Caret in the Square bracket, you are doing the opposite of what was intended.
[^a-f] means any other character other than [a,b,c,d,e,f]
The Star symbol(*): This is used to match zero or more preceding characters.
/hel*o/ matches hellllo and helo
The Question mark(?): This symbol is used to test if or not a character exists. It is more like an optional symbol that passes the string in question. It is unopinionated about the pattern. It is used to match zero or one preceding pattern.
favou?r matches favour and favor
The Period symbol(.): This symbol matches all characters.
The Addition symbol(+): This symbol works like the Star symbol, but it used to match one or more preceding pattern.
There are still a few more other metacharacters. You can check them out on the MDN documentation.
Now let's talk about Flags. Flats are used as delimiters to patterns. They are used to give a pass to the search patterns. Examples of flags are the following:
Global: Denoted by g, this flag is used to set a search pattern. By global, it means the pattern can be ran through to get more than one match.
Multiline: Denoted by m, t*his flag is used to run a multiline match. It is not limited to a line of code or string.*
Case-sensitive: Denoted by i, this flag is used to run a case-insensitive search.
RerEx also has search methods. Like an object, it has methods that can be called on strings.
match(),
search(),
test()
exec()
If you think this was helpful, you can Follow me and like the article. It will encourage me to write more articles like this.
Have a great day friends.