Hello guys, today i'll be writing about regex (you don't need to be afraid, if you are a noob like me).
Over the months i never liked regex cos it looked like gibberish to me (laughs!). I was like what the hell is this crap, So i had to check for basic materials which aided me in understanding regex.
Regex stands for regular expressions. Regular expressions are patterns used to match character combinations in strings. In JavaScript, regular expressions are also objects. These patterns are used with the exec and test methods of RegExp, and with the match, matchAll, replace, search, and split methods of String.
Below is a basic a regular expression pattern
const regex = new regExp(/hello world/);
const regex2 = /hello world/;
//it starts and ends with a forward slash
//then the pattern we want to match should be in between the slashes
//in the example i am testing for the string hello world.
that was simple right!! You could test the expression on regex101 .
Special characters in regular expression
This is where the gibberish signs (. , *, +, ^, $ e.t.c) we all see in regex would be more glaring and understandable, i would touch a bit on some of them, for more on regex MDN got you covered.
- Caret character(^): this character makes sure it matches the beginning of an input .
const regex = /^hello/;
// it matches the hello string in small letters at the beginning,
//even if we have other strings at the end
- Dollar character($): this character matches the end of the input,
const regex = /hello$/;
// it checks to see if the hello string is at the end of the expression
//even if we have other strings at the beginning
now we would use both characters to create a strict expression to match the string so we don't have other characters at the beginning or at the end
const regex = /^hello$/;
//this would throw and error if we don't type in the required string --hello--
i hope you're beginning to get comfortable with regex (smiles)
- Plus character(+): this is the "one or more quantifier", this allows us to input one or more string of that particular string.
const regex = /^hello+$/;
//we'd keep adding o's till infinity (laughs)
- Escape character ( \ ) : this escapes certain characters with special abilities e.g + , ? , . , * e.t.c
const regex = /^hello\.$/;
console.log(regex); //logs out hello.
//it escapes the period sign cos it has a special
// ability of allowing any character except the newline character
- Character set ( [ ] ) : this actually allows us to stretch our ability in using regex. In the previous examples we actually used a particular string which restricts us to inputting other values except the specified value,but with character set we can type more.
const regex = /^[a-z A-Z 0-9]+$/;
//this allows us to type multiple character with the in both uppercase and lowercase
//also numbers, **remember the one or more quantifier
- negate character set (^): this caret sign can also be used for exempting certain strings in the square bracket [ ].
const regex = /[^l ]odging$/;
// dodging, podging e.t.c.
// it disallows the l string, but any other string is allowed
- repeating character set ( { } ) : this allows to set the length of a string , minimum and maximum length.
const regex = /^[a-z A-Z 0-9]{11}$/;
const regex2 = /^[a-z A-Z 0-9]{11, 20}$/;
// regex accept only 11 characters while regex2 accepts a minimum of 11 and a maximum 20 characters
Meta characters This characters come with backslashes and they have their special abilities
- \d : this matches a digit character [0-9], it is an improvised way of writing the former.
const regex = / \d{11}/;
//accepts a length of eleven digit. so you might not need to write [0-9]
- \w : matches any word character (equal to [a-zA-Z0-9_ ])
const regex = / \w{11}/;
//accepts any character also an underscore
i hope i was able to give you a leverage on regex so you dont think its trash anymore. so each time u see any character you could tell what it meant. In my next lecture we would try and build a simple regex validator form for email. KEEP LEARNING