Regular Expressions in JavaScript Tutorial | RegEx

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

Channel: techsith

Views: 26,520

Keywords: regular expressions, regular expression, regex, regex javaScript, regular expression javaScript, regular expressions in javaScript., techsith

Id: rPNGB0ZLvdw

Length: 18min 7sec (1087 seconds)

Published: Wed Apr 11 2018