Let's debunk REGEX in JS

Admittedly, a lot of people hate regular expressions (regex) due to its syntax. I too used to until I decided to pay keen attention to it and here we are today. "Nothing is to be feared, it is only to be understood"- Marie Curie. Let me help you understand regex.

In this article we talk about what regex is, what it does, where you use it as a programmer and we go through a phone number validator regex code. Ready?

Regular expressions, commonly known as regex are a pattern of characters that help you match, search and replace functions on text. Let's see what some of the metacharacters do. You use \w to find a word character and \W to find a non-word character. \d to find a digit and \D to find a non-digit character. \n to find a new line character. There are many metacharacters each playing its role and we really cannot cover each in this article but here are some of them \s \S \b \B \f \r \t \v \n \0 . There are also modifiers which perform case insensitive and global searches. g for global search, i for case insensitive matching and m for multiline matching.

One thing about regex is you quickly realize that you will have to use a combination of the syntax most if not all the time for your strings. Don't let that worry you.

Lets carefully explain the below code used as a phone number validator. By the end you get to know how all this works. Before that, this code is solely used for explanation so it may not be applicable to all country codes and number formats....

let regex = /^+?\d{0,3}\s?(?\d{3})?[-.\s]?\d{3}[-.\s]?\d{4}?/;

We need a + sign in our number followed by the country code right? \d for digits (country's code) which could range from 0-3. \s for space and ? for space since the space may or may not be there. We then escape our parentheses by use of ( and a ? since the user might choose to add the parentheses to their number or not, \d and curly brackets since we then need 3 digits added. Remember, we escaped the parentheses so we do that again. Now, lets explain this part [-.\s]? …the user may decide to use a dash - for spacing or a dot . or a space so we put all that together as one using square brackets and added the ? sign since they may not all be there as well.. Here we used the square brackets instead of having it as -?.?\s? Then \d for 3 more digits, a dash, dot, space or neither, \d{4} 4 other digits are added. We then close all that with / and then you don't forget the comma ;

Remember if you were to use the dot without the square brackets you would have to add a backlash . as shown. Its also good to note that if you added 2 or more spaces it would be invalid because your regex did not account for that. Here's a link to my codepen account where you can view the same full code with HTML & CSS as well to see how it fully works here Incase you happen to click the link, carefully read through the JS so you also see how to bring all that to life.

I know this article somehow transitioned to be more of a tutorial but I hope it helped. It'd also be helpful if I noted that you don't need to be stressed about having all the syntax at your fingerprints. Right now focus on understanding what needs to be done and you can always look the characters up if need be.

There are also other code instances where you can use regex for email validation, ensuring a valid date format has been entered or even a password strength validation. Try that out too.

That its for today, see you in my tomorrow's article. Feel free to reach out to me incase of anything.