hey guys so today we're gonna talk about regular expressions or some people call
it regeX I call it rejeX it's all the same thing it's a very little thing
which is very useful so I think we should start calling it special
expression not a regular expression the jokes apart it's a way to describe
patterns in a string and it has a lot of usage so we're gonna look at all the
rules on how to define it and we're gonna look at some practical examples
like how to do it in an input validation how to split string into multiple
strings how to replace a particular word inside a string by you know looking at
pattern and in JavaScript it's pretty much same as the other programming
languages it has a few nuances but if you know regular expressions in one language
you would know in another language as well hey and guys if you if you're
enjoying my channel don't forget to subscribe and like this video and just a
reminder and welcome to techsith tutorials all right so let's first learn
how to define your regular expression so in JavaScript you can simply do this let
when I call it the Reg equal to and I'm gonna have a forward slash and I'll put
my pattern in between so let's say 'a' that's my pattern and I would close it
that's all I need to do don't put quotes around it otherwise it
wouldn't make it a string or I can also do it this way let's say reg1 equal
to I can use a constructor regex and in that case I don't really have to use
before a slash around my pattern I can just simply use write my pattern inside
so we're just gonna use the first way which is very simple let's also test it
so all I can do is what does this mean it means match if you find a character 'a'
we can test it by the this reg.test and I can pass some
string that would try to match if there is 'a' in there or not
so will I just use a here and I'm just gonna console.log it so now if I run
this I would get true which means it did find a inside this string a obviously
what if I put B here that in that case you should not find it so if I run it it
would say false so basically it tries to match the pattern that I have in the
variable red and it tries to match it inside the test string now let's say if
I have multiple A's here a series of A's it should still find it because you can
find one a or multiple it should match the pattern right so if I run it it will
be true this is really case sensitive so if I use a capital A and run it it would
be false so what if I want to say that also match in capital a as well so I can
use a flag called I and I should use it after the the last forward slash when I run
it it would be true what if I want to match more than one a so let's say if I
have that's how many three four five six seven eight nine I have nine eight here
if I want to match them here I would I can literally drive right like nine A's
or I can say here within the curly brackets I can say how many minimum is I
want or maximum ace so I want at least minimum 1a or I can match up to nine A's
this would pass because it has nine A's now again if I have more ace it you're
still pass but if I have one only minimum at least number I can say I
don't have to provide the last number I can say let's say four I need to be I
need to have at least four 'a's in my pattern in that case I can
let's say if I have only three a's it should not match so when I run it would
say false on the upper limit there is no limit so it should match any number
of A's so if I want to know exactly what is matching I can go to this website
regXtester.com and here I can see exactly what's this match away which I
cannot see in the jsfiddle so here let's say I can try a four here at the bottom
I'm gonna provide multiple ace and it's matching everything because it's
open-ended but instead if I had let's say hey that's match a a then it's
matching multiple of these as you can see so it has eleven matches but instead
if I do a and two which means two or more then it only has one match so
that's the main difference and if I do let say one it's the same thing or I can
say Plus this is the same thing which means one time or infinite amount of
time so plus sign it presents that but if I put a question mark next to it then
it would match every single one of them or it would match if I do a question
mark then it would match even an empty string and you could send an infinite
matches okay what if I want to match anything that is begins with A and ends
with C and there's a one character in between and it could be any character so
for that I can just simply use dot dot means match any character except it
doesn't match any new line or tab things like that so now if I say a 1 C it
matches a B C it also matches now what if I want to say I want to know
I want to match anything that starts with a and ends with C but there is no
limitation of how many characters are in between so all I have to do is just
simply put plus here the only problem here is it would let's say if I have
something where I have bunch of ones inside and so it's supposed to match
twice first here and second here but it it matches the whole thing because the
first letter is a and then the last letters is C so if I want to avoid that
I can simply put question mark here now it has two matches ALC and ABC let's
say if I want to match only specific characters in the string so like x y and
z and i can put a square bracket around it and if I do any other characters
doesn't match X matches or Y matches or X Y so it only matches x y and z now I
don't really have to if it's a consecutive characters I don't really
have to say x y&z I can simply use - and it reads which means match can all the
continuous characters in an alphabet from X to Z so it would match the same
thing if I say A to Z which means it's gonna match all the characters from A to
Z so it doesn't matter what I type in here except if I type numbers its and
match or any other special characters let's say if I want to also match the
numbers then I would simply do 0 to 9 here and now I can have also numbers and
they're matching as well now what if I want to have a square bracket as part of
the match then escape it so skip square bracket is considered as
a matter character just like a curly bracket a dot it
special meaning in and regular expression so you have to exceed them in
most cases if I'm doing inside here then I don't have to really escape it as you
can see it's fine I think this is for the square if I'm using curly bracket
inside here I don't have to escape it I can use it and it's fine I can use even
dot here and I don't have to escape it figures out that I am putting range here
so it's it's not a matter character it's actually a dot but if I'm using here dot
then I have to probably escape it so that it works so instead of putting the
range there is a short form for it so instead of saying a to z and z to 0 to 9
which is alphanumeric characters I can simply use W this also is the same thing
but if I use any special characters it doesn't really match but if I use
capital means opposite of alphanumeric which means not alphanumeric. other
things it would match but it would not match any ABC or numbers similarly I can
say all the digits but I can match all the digits with slash d so I can say 1 2
3 4 they are all matching but the characters won't match
and if I say capital T which means the other side of spectrum which means non
numbers if I want to match any white space that I would say as slash as so it
would match any white space a capital S which means it's not going to match any
white space but match anything else what if I have an input field in a form where
I have to enter some sort of date for a date
we usually have two digit month depends where you live
two digit day and usually four digit year right so if I want to match this I
can a simple way to do it is I can say D means the first word first is a digit
then I need to have a digit then I need to needs to follow by a date and then it
has to have a digit another digit and another - four more of these
okay then it would match this now let's build an example where we can actually
use an input validation to validate this now there is actually more you should be
able to do a little bit more validation for example here I should not be
accepting any day like I 90 would be an invalid month so I can actually have
some logic so the pattern would not allow me to do more than 12 months or 0
want things like that but we're not gonna worry about it we simply make sure
that there has to be a two-digit month two-digit day four-digit year with
dashes in between okay so let's build it all right so let's have some div and
inside the div I can have let's say and I can have an input form and so if I run
it it should render something like this so here I can enter my birthday now how
to enter a validation so here I can actually in HTML tag there's a property
or attributes I say call pattern and here I can actually define my pattern
but I want what I want to do is when somebody enters something that is that
doesn't match this pattern that I should have the text of this should turn red
when they start matching if it's matching then it should not do
anything so for that we can write some CSS and we can say input and in this
case I'm just generically saying input usually you would have some sort of
class or something so it's not all the input but here I'm just gonna say type
equal to text and if it's invalid then I want color to be red so right now if I
enter let's say a and it's not matching so it should be red but instead if I
enter let's say for once I enter the full birthday then it should validate
and 2018 now it turns black so this is this is how you can use a native HTML
pattern attribute to validate your input all right what if you want to say I want
your my pattern has to start with some my string has to start with a specific
character let's say if I want to have my word starts with T then in that case if
I start with any other character then it doesn't match and if I have T at some
other position it does not match right but if I do if I start with T that it
matches and if I want us to do the same thing for ending with that I would use a
dollar sign which means it has to end with T as well if I do T it's matching
so now this case it's saying it starts with T and in enmity and there's a one
character in between so if I say cat it matches if I do plus which means let's
say Asia then if I type tech set it should match because it starts with T
and ends with H and it can have infinite number of character
in between all right let's say if I want to match zero one two or or zero to one
okay either of these then the zero is common
here so I would use parentheses and then put one two and then pipe it to one that
means I can match so your one two four zero two one and I can keep piping as
much as I would like I'd say three one so that would match zero three one as
well okay what if I have a string like this I am great and so I want to match
however I replace this I am with we are so in that that case I want to make
sure that I am is followed by great right so that's the first thing and then
it should only match I am so the way I should do is I can say I am then
question mark equal to great when I do that it only matches I am but let's say
if I type something in then it doesn't match it so it has to be followed by
great now let's say I want to replace I am with something else we are so what I can
do here is so I can have I great dot I can use a place string mother in
JavaScript first I need to provide a pattern so I would say the pattern that
we used which is this and the name next we need to provide the replacement so I
would should say we are so let's say the resulting variable is let's say let X
dot and I'm just gonna console log X so when I run it it would say we are great
I just put some space and when I run it it would say we are great so it actually
replacing I am with we are but it's finding wherever I have I am followed by
great all right folks so that's a good
introduction to a regular expressions and I hope you learned something from this
tutorial and if you did please like don't forget to Like subscribe and
provide a nice comment and you can actually hop this channel we are patreon
by donating some money and you can also translate this video
for me I'll provide the detail in the description and thank you