Regular Expressions in JavaScript

hello everyone in this video we're going to learn about regular expressions in JavaScript now before we even worry about what a regular expression is let's look at the four exercises that we're going to work through in this video in our first exercise we'll take a look at a situation where a traditional Find and Replace does not work for us so this is only two lines of text but imagine instead it was a hundred pages worth of text and imagine we wanted to find all instances of Dwight and replace it with a different name well tragically a traditional or simple Find and Replace will not take into account misspellings of that word however we can leverage the power of regular expressions to save us here in our second exercise we'll take a look at a list of pets that begins with the type of a pet and then a colon and then their last name comma first name this format feels a bit stuffy or boring so what if instead we want to display this text like this first name no comma then last name and then their species is in a blue rectangle well even if the original list was five thousand items long we can use regular expressions to automate that transformation for us in our third exercise we'll imagine a situation where you need to choose a username and it needs to be at least eight characters long but not more than thirty and the first character must be a letter not a number now there are many different ways that you could program this but we're going to learn how to use a regular expression to enforce that logic or those rules okay and finally in our fourth exercise we're going to take this block of text and you can see that it contains different phone numbers well we're going to write a regular expression that not only detects the phone numbers in this block of text but outputs how many there are and then actually lists them and you'll notice that up here they're all in a different form so dashes dots spaces but down in this list they're using a uniform format so the idea is that everything below this line was generated dynamically or on the fly or programmatically thanks to a regular expression okay at this point let's go ahead and jump into exercise number one which is just a simple find and replace if you'd rather type along with me instead of just watching the video then you can use this code pen link that I've set up you can either pause the video and type in this address or you can find a link to this in the description for this video okay but the idea is we're working with JavaScript and here we have a string of text okay and then at the moment I'm just outputting that bit of text on to the Dom or on to the web page now in terms of the actual exercise imagine that we wrote some things that are not very kind about Dwight and in order to spare White's feelings we've decided that we should find and replace all instances of Dwight with a different fictional name now before we worry about actually performing the replacement action we first want to focus on the finding all instances action because remember even though this is only two lines of text imagine if it was 200 pages worth of text in that case with that sort of volume of text it's safe to assume there's going to be a few misspellings of the words you're looking for so a simple traditional Find and Replace would fail it would leave behind one single twigged however this is an example of when a regular expression can be very helpful now before we write any code within code pen here we're first going to experiment with in our text editor this is because most modern text editors have real-time support for regular expressions to show you what I mean I want you to first copy this sample text into your clipboard it doesn't matter if you include the quotes or not either way is fine but just copy this block of text into your clipboard and then jump into your text editor I'm using vs code it's what I recommend but this will also work with sublime text or Adam or probably most other text editors as well anyways go ahead and paste in your clipboard and now if you press ctrl F or on Mac command F this is a traditional find window right so it's not rocket science you know that you could search for Dwight but notice it's only finding two examples because the other example is misspelled however let's go ahead and use a regular expression so look for this icon it's a dot and then an asterisk if you're not using vs code it might be located somewhere slightly different on your screen but take a moment to look for this icon as soon as you click on that you are now searching for a regular expression what in the world is a regular expression well think of it as a find tool but with superpowers so remember the common misspelling of twigged it's missing the H well let's just make the H optional so in our regular expression right after the letter H at a question mark within the context of a regular expression a question mark means the character or character set that comes right before it can happen zero or one time and notice that with the question mark in place our text editor is now finding three instances of this text right we can see on my screen that jigged is now selected it's a match now I realize at this point we have not learned hardly anything about regular expressions all we've learned is that a question mark makes the thing before it essentially optional however before we learn about any other superpowers that regular expressions have let's put this one into action right if we have this thing that will now find all of the instances that we're looking for how do we actually replace that with something else well at this point we can jump back over to code pen and get to work so right below this line where we have this string of text I'm going to create a new variable you can name anything but I'm going to name it my name 'search and set it to equal a regular expression now in JavaScript there's more than one way to create a regular expression but perhaps the simplest way is to just have two forward slashes now two forward slashes together like this is a comment but if we type in between these two slashes that will be a regular expression so here we can just say it's white and then right after the H let's include a question mark essentially saying that this can happen zero or one time okay so that's what we're looking for and then at the very end of this after the ending forward slash let's be sure to include G I G stands for global which means we're not just looking for the first instance of this match within this text we want to find all instances of it and the I means case insensitive right because we included an upper case D for Dwight but we would also want to match this lower case Dwight okay so now that we've created this regular expression how do we actually use it remember we want to replace all instances of Dwight well on a new line of code we could say let's create a new variable I will name it updated story equals and I would just begin with our original story right that's the name of this variable that stores the text and then in JavaScript all strings of text have access to a method so dot named replace now we give the replace method two arguments the first is a regular expression so in our case we named our regular expression my name search so my name search comma the second argument is what you want to replace it with so a pair of quotes and let's just choose a different fictional name why don't we go with Samuel okay and then we want to see this resulting text on the screen right we've saved it into this variable updated story so then down on this line of code at the very end of it instead of story here just updated story perfect we see all three instances were successfully replaced cool so that was our first taste of seeing a regular expression in action but we didn't actually learn very much about the different superpowers that a regular expression offers so let's jump into exercise number two in this example we're going to perform a find and replace again only this time it's a bit more advanced so we have this list of pets and the format is species and then a colon last name comma first name however what if instead we want it to look like this first name no comma last name and then the species is in a blue rectangle now since there's only three items in the list we could change these by hand but imagine if the list had five thousand pets right then we would need an automated or programmatic way of transforming the text so this is where a regular expression can save the day to get started let's copy and paste this list of pets into our text editor so we can experiment with regular expressions in real time so in the description for this video you can find a link to exercise number two and then down in the preview area here just copy these three lines okay back in our text editor I'll clear everything out and paste in okay and again before we worry about the replace or modify action we first need to focus on the find or match action so what we need to do is write a regular expression that matches this format or this pattern of a word and then a colon and then a space another word comma space another word once we've described this pattern in the form of a regular expression it's then a piece of cake to move around and modify and replace it however we want let's begin by trying to match this first chunk of the pattern write the word or words and then the : so control or command F make sure that your regular expression option is selected okay now if I look for cat : obviously that matches the first row or if I typed young dog but the question is how would we match all of these with one search or one regular expression well first let's just focus on the very first letter of these three pets so instead of only matching for the letter C or only matching for the letter Y in a regular expression if we have a pair of square brackets this will create a character set so inside these curly brackets let's include the first letter of cat the first letter of young dog and the first letter of rabbit so you can see that also matches the are in bark slot and the y and fluffy however after this character set let's open up another character set so square brackets and then let's include the second letter in cat the second letter and young dog and the second letter in rabbit well we don't need a twice so just a oh so now our regular expression is going to search for any of these characters directly followed by any of these characters so then after that you could include a letter like just T C and that would match cat or view and that would match the beginning of young or B and that would match the beginning of rabbit so a regular expression really works character by character but the idea is that with a character set you're allowing multiple characters for that placement in the search and that's great this can be very powerful except you and I are not psychics so in the real world we're not going to be able to hard code this to the specific first letters of the items because we don't know what they're going to be right there could be 5,000 pets so instead we can create a character set from A through Z now you can see that's going to match every letter so it matches everything except the colon the spaces and the commas okay then after that we could have another character set of a through Z then we could have a third one a through Z and then a : this is where things start to get interesting so now we can see it matches cat because that's three characters long and then a : the same thing is true for dog however rabbit is six characters long so it's only going to grab the last three characters before it finds the matching semicolon as well now our first instinct might be to just include six of these instead of only three right and then that would match rabbit now instead of typing this out six times what you can actually do is just type it out once and then directly following it we can have a pair of curly brackets and in between there you can include a number so if we want it to look for that three times in a row you can just say three or if we wanted four four five four six so this is going to look for any continuous six letters of the alphabet that is not being interrupted by a space or a comma or a colon or at the end of it we could add a colon and then that's only going to match the rabbit : but this still isn't flexible enough for us however the good news is that this curly bracket syntax that lets us find x or n number of occurrences is a bit more powerful than just accepting one option so check this out instead of six we could say one or two let's just say one and then still within those curly brackets say comma 4 before I explain what's going on here let's just visually see what's going on with the matches so that's going to match the last four letters and then the colon of rabbit if we change this four to a five AHA and if we change it to a six even better so this syntax is going to look for whatever came before it in this case this character said a minimum of one time and a maximum of six times in a row now in this case hard-coding this to a value of six made sense because we know the word rabbit in advance but if we want this to be truly flexible just don't include the six just say one comma and then nothing and then we can see even if we modified rabbit to be big fluffy rabbit it still matches all of the letters and then the : so this syntax says match this this many times or more now right now I want to show you a bit of a shortcut when you're interested in this exact scenario of one or more times we don't need to spell this out we can actually just say plus symbol a plus symbol is the exact same thing as the curly brackets 1 comma nothing right one or more times so there are these little shortcuts that can help us out in regular expressions there's the plus symbol in our first exercise we use the question mark after the H in white the question mark is equivalent to saying curly brackets 0 comma 1 so the question mark is shorthand for saying this can occur zero or one time okay but in this case we just want the plus symbol cool now back to the task at hand in terms of matching the first chunk of our pattern we're looking good except we're not matching young and then a space so within this character set after the Z you could just hit the spacebar on your keyboard or if I hit backspace we can say backslash lowercase s this will look for any whitespace character like a space or a tab so on and so forth the reason we need the backslash is because we are escaping BS because if you didn't have the backslash the regular expression would just think we're looking for the literal letter of lowercase s so we want backslash s cool so now you can see young space dog colon is a match now before we move on to the next chunks in the pattern write a space and then a word and then a comma let's review everything we have so far big picture we have a character set these square brackets we're looking for letters A through Z or we're looking for a whitespace character and we're looking for that one or more times right essentially as many times as it occurs before it's directly followed by a colon okay and now let's begin work the next chunk of the pattern so after the colon we would want to look for a space so backslash s okay then let's look for a character set so square brackets in between them let's look for a through Z after that character set let's include a plus symbol and then a comma okay and then if we look at our pattern there should be a space so again backslash s and then to match the first name let's just have another character set a through Z and after that character set a plus symbol to match it one or more times cool so at this point our regular expression matches the entire pattern or format for each pet however since we want to move or rearrange the way that this text is lined up right remember our goal is to format it like this first name last name blue rectangle for species well since that's our goal we want to use something called capturing groups essentially within our regular expression if we wrap a section in parentheses well it's almost like we're naming or labeling that section so we can access it later on let me show you what I mean so the first capturing group that we would want to set up is the species now we do not want the colon within this capturing group we just want to be able to access the actual species text so at the very start of our regular expression even before the opening square bracket I will have an opening parenthesis and then right before the colon so right after the plus symbol I would have a closing parenthesis okay now we don't need the colon or the space within our next capturing group which is the last name we also don't want the comma in the last name so right before the square bracket for this next character set I would have an opening parenthesis and then right after this plus and while I would have the closing parentheses okay and then in the final capturing group which will be the first name we don't need the comma or the space so right before the next character set opening parenthesis and then finally at the very end after the final plus symbol closing parentheses okay if the whole idea of capturing groups and the parentheses doesn't make sense right now I think it'll make sense in about 40 seconds from now so at this point we're ready to move this regular expression over to code pen and actually make the replacements or the modifications happen so I want you to select the entire regular expression that we just wrote and copy it into your clipboard okay and then let's jump over to code pen and up in the code section right below this variable where we have this array of the pet data right below that let's just create a new constant variable let's name it pet pattern you could name this variable anything that's just what I'm going with and set it to equal two forward slashes to create a regular expression and in between those slashes just paste in your clipboard okay and at the very end of this line even after that forward slash I want you to include an eye for case insensitive because we only included lowercase a through Z but we would also want to match the uppercase letters of their names now our text editor software will make our regular expression case insensitive by default but when we're programming for the web browser we do need to include this okay now down here we already have a bit of code that's going to look at the array of pets and output an unordered list where each pet gets an HTML list item so that's what we see down here so that's working with the original array of pets which is just named pets that's what we see up here so let's do this right below the line where we created our regular expression let's create a new constant variable let's name it pets updated and set it to equal and we just want to create a new array based on that original array so the original array was named pets so let's just say pets dot that map will call the function that we give it once for each item in the array so let's give it an arrow function with exactly one parameter so let's name the parameter pet and then an arrow symbol and for now just as a test let's literally just return the exact same incoming value only just as a test so we can see it down here let's say dot to uppercase okay now we would actually want to output this array to the webpage so down in this code when we're generating the HTML instead of working with the pets array we would want to work with the pets updated array cool so now down in the preview area you can see that they've been converted to uppercase now that's not what we actually want that was just a test so within our pets updated line get rid of the dot to uppercase and the parentheses to call that uppercase method okay so we're working with the original string of text and this is where we circle back to regular expressions we know that a string of text has access to the replace method so we give replace two arguments the first is the regular expression you want to use remember we named ours pet pattern so pet pattern comma the second argument is what you want to replace it with let's give it a pair of single quotes so that we can use double quotes inside them if we want to okay and remember our goal is to restructure the text so that it begins with the animals first name and remember the first name was the third capturing group that we set up so to access the capturing group it's just a dollar sign and then whatever number it is so the third capturing group there we see the first name then we would want a space and then their last name which was the second capturing group so dollar sign too okay and then we want it to end with the species which was the first capturing group so dollar sign one only remember we wanted to wrap the species in a blue rectangle so we can just set up a bit of HTML let's wrap dollar sign one with an HTML span tag and on the opening tag just give it a class of description perfect and that completes exercise number two now Before we jump into exercise number three I do want to say that if you're enjoying this video you might also enjoy my premium feature-length courses just last week I completely updated my workflow course to meet the trends and demands of the industry for 2019 and 2020 so we've ditched jQuery we've ditched gulp in favor of web pack and I've also added brand new chapters on how to use the net laughs I service as well as the very basics of cloud functions or AWS lambda functions another course that I think you might enjoy is my full stack JavaScript course that just came out a few months ago in addition to learning the JavaScript language itself we also learn node Express MongoDB and we create a super simple miniature little social network application in the description for this video you'll find heavily discounted coupon links to join either one of these courses okay having said that let's get back to regular expressions and let's jump in to exercise number three in this exercise we want to use a regular expression to enforce our rules or logic on the user names that a user can choose so you can only use alphanumeric characters you must begin with a letter not a number and the length of the username must be between 8 and 30 characters and the idea is that after every keystroke we will show an appropriate either error or success message right here so if we take a look at the existing code I've already set things up so that after every keystroke on this input javascript is going to call a function named user name change Handler and when that function gets called that's going to pass it whatever value the user has currently typed in as the argument so let's scroll down and find that function user name change handler you can see I've written a comment here use your regular expression here to test if user input is valid or not so if it is valid if it meets our rules then called the show good function if not called the show bad function okay and then up here I have a comment create a regular expression here that does the following and then I've explained the rules or logic for the username so right below that let's create a constant variable we could name it anything but let's name it username pattern and let's set it to equal a regular expression so in between these two forward slashes we want to make sure that the first character is a letter not a number so let's have a character set a druzy okay now after that first character you are allowed to include numbers so let's have another character set and I will say a through Z but also zero through nine okay now if we want the overall username to be at least eight characters long well we know that the first mandatory letter takes up one slot so then we would want this pattern to match at least seven times so after that character set I would have curly brackets and I would say seven and then we don't want the username to exceed 30 characters so I would say seven comma twenty-nine okay and then to make this case insensitive at the very end after this slash I would just include an eye okay so we've got our regular expression now let's actually apply it whenever the user types into this field so if we scroll down you'll find this empty function named user name change handler so within the body of this function let's say an if statement so if parentheses curly brackets for the condition inside the parentheses let's say if and then let's begin working with our regular expression so username pattern and in JavaScript regular expressions have access to a method named test so here we can include a string of text and if it's a match test we'll return with a value of true otherwise it will return with a value of false so in the test paren the seas just include user input right whatever value the user is typed into this field okay now within the if curly brackets in between those we can drop down after the closing curly bracket let's also have an else block okay now if this is true let's call a function named show good upper case G this function will just show the success message instead of this rule or error message in the else block just call show bad and that's an upper case B and that will just make sure that this red message is appearing okay now let's test things out so down in the preview if we start typing into this field you'll notice that as soon as I reach eight characters long we see a congrats or success message however we do need to make a couple of changes to our regular expression because right now once we make a match we are free to include whatever we want now these characters should absolutely not be allowed these are not alphanumeric characters they're not a through Z zero through nine the issue is that because this portion is a successful match our regular expression doesn't continue to look it just says yes I found a match the test was successful to get around this here's what we can do so scroll back up to where we are defining our regular expression and right after the curly brackets four seven comma twenty nine I want you to include the dollar symbol this way it will only be considered a match if this is coming at the end of the input so now if we try this it's a successful match but if I add non alphanumeric characters cool we see the error or rule message now on a related note we also want to pay attention to the fact that a user should not be able to add random bogus things at the beginning of the username right this is a problem as well this is considered a match because these are eight characters that match our rule so to fix this up in our regular expression we just want to begin with a caret symbol this way it's only can to match if this comes at the very beginning of the input so now if I try this that's valid but if I add something weird at the beginning it doesn't work perfect so you must begin with a letter but you are free to use numbers anywhere else but if we go over 30 characters long cool we see the error message as well that completes this example now let's move on to our fourth and final exercise in this example we have a block of text that contains different phone numbers and down in the preview area you can see that that's all that's being output is just that block of text however our goal is to have it look like this so we use a regular expression to dynamically count how many matches of phone numbers there are in this block of text and then also we output a list of them and you'll notice that I've cleaned up the formatting so instead of some of them using no separation or dots or dashes or spaces or parentheses around the area code you can see that this just uses one uniform format now I do want to address that in this example I'm approaching phone numbers from where I live in the world I realize there are different formats depending on where you live so if that's the case then just don't take this example so literally you can still take the same regular expression concepts and adapt them to meet your telephone format so big picture this exercise is not actually about phone numbers as much as it's just a chance to practice with regular expressions ok at this point let's get started so in the description for this video you can find this code pen link and I want us to get started by copying this block of text over to your text editors just copy over in vs code or whatever you're using just paste it in okay and then ctrl F or command F and let's start writing a regular expression now before we worry about the three-digit area code and the potential leading one let's start by looking for three digits and then an optional separator and then four more digits so for our regular expression let's begin with a character set so square brackets and we can say zero through nine we can see that matches every single number in the text block but then after that we can say curly brackets three now again I'm working with this selected part of the pattern I want to get this up and running and then we can backtrack and set up the one in the area code so we've just selected three digits in a row now let's add an optional space so it can be a whitespace character or a dot or a dash so I would include another character set square brackets and say dash dot or a whitespace character so backslash s okay now that is optional there might be nothing in between the three digits and the four digits so let's include a question mark after that character set and then we'd want to listen for four digits in a row so square brackets in between there we can say zero through nine after that curly brackets and we're looking for that happening four times in a row cool so you can see that's already matching all of the phone numbers but now we need to work on the area code and the potential leading one actually before we jump into that I want to show you a shortcut instead of defining a character set of zero through nine we can actually instead just say backslash D for digit so that's a nice little shortcut so not only do you not need the zero through nine you don't need these square brackets to create a character set so we can do that here as well get rid of the square bracket zero through nine just say backslash D so an escaped lowercase D is four digit and in our previous lesson instead of creating a character set for a through Z zero through nine we could have just said backslash lowercase W which is a shortcut for any alphanumeric character now even though I like working with in a text editor because you can see immediate visual feedback of what being matched I actually want to move over to code pen at this point because we still need to look for the area code any potential parentheses and the potential leading one and I'm not going to be able to fit the entire regular expression on my screen in this little input box so let's jump over to code pen so right now I want you to select your entire regular expression so far and copy it into your clipboard okay over in code pen below all of this existing JavaScript let's drop down and create a new constant variable we could name it anything but let's call it phone pattern equals and then two forward slashes to create a regular expression in between just paste at the very end of this line after this forward slash be sure to include a g4 global right we don't just want to match the first occurrence of that pattern we want to match all of them in this block of text okay now before we finish this regular expression to look for the area code the potential parentheses the leading one let's set things up so that we begin to output our results below this block of text let me show you how we would do that so below this line where we just created this regular expression let's create a variable this time I'm going to use let instead of Const I'll explain why in just a moment but let's say let results equal and then we want to begin working with this block of text so it's in a variable named story and in JavaScript strings of text have access to a method named match we only need to give it one argument and that is a regular expression so we named our phone pattern all right now match is going to return an array of all the matches that it found in the text however if it finds zero matches it doesn't return an empty array it returns null so what I like to do to make things really flexible and to make sure that I don't run into errors if I don't find any matches is this I like to say if parentheses curly brackets and for the condition I will just say exclamation results so if we don't find any matches in a block of text match is going to return null and no will evaluate to false within our if statement so without the exclamation we'd be saying if results evaluates to true and then the exclamation checks for the opposite so if results evaluates to false what do we want to do well if we stand one line of code here we don't even need the curly brackets we can just say results should now equal an empty array so square brackets this is why I created results using left instead of Const because I want it to be able to update its value if I needed to the reason I do this is so now we can use the array methods on results without worrying about an error popping up if it was null let me show you what I mean so at this point let's work on outputting the extra bit of text down here that says there are X number of phone numbers in this block of text so to do that we can save a bit of typing by just duplicating this line of code here this document query selector line just copy that into your clipboard and then down at the very bottom here paste it in and then at the end here instead of outputting story once again let's change story to a pair of back ticks this is the character right above the tab key or to the left of your one key now in between the back ticks you're free to drop down let's begin by outputting a horizontal rule write a line across the screen and then let's also output a paragraph element and say there are X phone numbers in this string of text only we don't actually want this to say X we would want this to be the count door however many numbers we found so instead of the X we can say dollar sign curly brackets and in between those brackets say results dot length right every array in JavaScript has a length property that counts how many items are in it so if we check the preview perfect there are eight phone numbers in this string of text and to make sure our code is flexible if our block of text didn't have any numbers in it you can see we don't run into any errors we just say there are zero phone numbers cool let me press ctrl or command Z to put that back and let's finish our regular expression because remember right now we are not finding the area code the optional parentheses or the leading one so we need to find that because if we look at our finished products we want to actually output the phone numbers down at the very bottom so right now jump back to this line of code where we define our regular expression and let's get our hands dirty so right after the opening forward slash to begin our regular expression let's look for an optional leading one at the very beginning even before the three-digit area code so just the number one and then a question mark because it's optional okay and then I would want to look for an optional separator after that leading one so character set or square brackets and I'm looking for either a dash or a dot or a whitespace character or none of these could be there because the separator character is optional so question mark after that character set okay now before we actually look for the three-digit area code I want to look for the potential parentheses surrounding the area code now within our regular expression we can't just type opening parenthesis because that's how you create a capturing group if we want to actually look for the opening parentheses character we need to escape it or include a backslash and then opening parenthesis okay but that opening parenthesis is optional so then a question mark next we'd want to look for the actual three-digit area code so just backslash D for digit and then we want that three times in a row so curly brackets in between that three after that closing curly bracket I now want to look for the optional closing parenthesis around the area code so backslash closing parenthesis and that's optional so then question mark okay then in between the area code and the next three digits is an optional separator so then I would create a character set square brackets and I'm looking for either a dash a dot or a whitespace character or there might be nothing so after that character set make it optional with a question mark okay that completes the regular expression for now at this point let's output the actual list of phone numbers below our count text down here so towards the very bottom of our JavaScript right below this P paragraph element let's drop down still within the closing back tick and let's create an unordered list in HTML and then inside it we want to do something once for each item in our array to do something dynamic let's say dollar sign curly brackets inside that let's say results dot map right after the parentheses to call map let's also say dot join and just give that an empty pair of quotes so not even a space in between the quotes just two quotes okay now in the map parentheses we want to give it an arrow function that it will run once for each item in the array so we want this arrow function to have exactly one parameter let's just call it X arrow symbol and then let's give it back ticks and we want to generate a bit of HTML so a list item element and in between the opening and closing tag do something dynamic with dollar sign curly brackets and just say that parameters of X if we take a look at the preview cool you'll know that you typed in the regular expression correctly if this list includes the area code and the optional one for this phone number at this point we only need to take care of one more detail and that is making these phone numbers use a uniform or standardized format to make this happen we're going to use capturing groups personally I don't want the leading one to be in my uniform list so I'm not going to include that in any of the groups so I'm going to create my first capturing group around the three-digit area code so right before the backslash before the I will include in opening parentheses and then to close that capturing group right after the three and then the closing curly brackets include a closing parenthesis ok let's create another capturing group around the next three digits so right before this backslash lowercase D opening parenthesis right after the three closing curly bracket closing parenthesis and then do the same thing for the final four digits so right before the backslash D opening parenthesis right after four closing curly brackets include a closing parenthesis okay now that alone won't change anything our preview will still look exactly the same but now we can use this to perform a replacement let me show you what I mean maybe right below these two lines of code where we say let results equal and if exclamation results let's drop down right below that and let's create one more new variable let's say Const results uniform should equal and then I just want to create a new array based on our results array so I would say results dot map in these parentheses I would just say X arrow symbol X is the original phone number from our original array it's a string so we can run dot replace and we know that replace takes two arguments the first is a regular expression which would be phone pattern comma the second argument is the way that we want to restructure it or modify it so let's just have a pair of single quotes and in between them this is just personal preference but in my uniform format maybe I want to wrap the area code in parentheses so parenthesis inside that say dollar signs one to get the first capturing group and then I want a space and then capture group number two and then again it's just personal preference but I want a dash and then I want capture group number three okay now let's actually output this results uniform so down towards the very bottom of our JavaScript when we're just counting how many items are in the array that can still be results but when it comes to actually outputting the items instead of results top map let's say results uniform dot map okay if we check the preview output area perfect now they're all using that exact same format that we just came up with and that's going to bring this exercise and to this video to a close really quick I do want to say that we've only covered about five to ten percent of what's possible with regular expressions if you want to learn more I recommend checking out this website if you google for JavaScript regular expression this should be the first result but you can also find this link in the description of this video towards the top here it mentions all of the different ways that you can leverage a regular expression and then if we scroll down a bit there's this super useful table the left-hand column has the different characters that you can use in a regular expression and then this side explains exactly what it is so you'll find the carrot the dollar sign the asterisk the plus symbol question mark you get the idea so we definitely did not cover everything that's possible with regular expressions in this video but the idea is that just scrolling through this documentation on your own can be very daunting so hopefully this video gave you an idea of where to start where to begin how to experiment and from there the sky is really the limit you can take it as far as you need to anyways that's gonna bring this to a close thank you so much for watching this video I hope you feel like you learn something and stay tuned for more web development tutorials and again if you enjoyed this video you might enjoy my premium full length courses there's links to them in the description of this video [Music]

Channel: LearnWebCode

Views: 11,760

Rating: 4.9540229 out of 5

Keywords: regular, expressions, javascript, find, replace

Id: dLj05Cqbblw

Length: 48min 28sec (2908 seconds)

Published: Tue Nov 26 2019