1 00:00:00,840 --> 00:00:05,370 All right guys so in this video and the next couple of videos we're going to be talking about something 2 00:00:05,370 --> 00:00:07,170 called regular expressions. 3 00:00:07,170 --> 00:00:12,300 Now this is a topic that can get very very complicated so we're going to be staying on the beginner 4 00:00:12,300 --> 00:00:17,700 to intermediate level and even with that said we're still going to be taking up three or four videos 5 00:00:17,700 --> 00:00:19,300 on the subject. 6 00:00:19,470 --> 00:00:24,720 You could probably create Well you could create an entire course on regular expressions. 7 00:00:24,720 --> 00:00:30,210 Now we're going to create a form validation project at the end of this small series of videos to show 8 00:00:30,210 --> 00:00:32,700 you how we can use them in action. 9 00:00:32,700 --> 00:00:33,020 All right. 10 00:00:33,030 --> 00:00:38,440 Now there's a lot of different symbols and Medak characters that mean a lot of different things. 11 00:00:38,520 --> 00:00:43,320 And even for someone like me that's been programming for quite a while I still need to look up a lot 12 00:00:43,320 --> 00:00:48,630 of these things when it comes to regular expressions now regular expressions are not something that 13 00:00:48,660 --> 00:00:50,560 only exist in javascript. 14 00:00:50,600 --> 00:00:55,890 They're possible and just about every language that I've ever used which is about seven or eight different 15 00:00:55,890 --> 00:00:56,970 languages. 16 00:00:56,970 --> 00:01:03,330 Now each language has their own flavor but they're very similar and most things work the same way. 17 00:01:03,600 --> 00:01:10,060 OK so a regular expression is basically used to describe a pattern of characters. 18 00:01:10,140 --> 00:01:13,950 So it's used for pattern matching or pattern searching. 19 00:01:13,950 --> 00:01:20,640 They're commonly used for validation as well as pulling things out of a body of text or a body of characters. 20 00:01:20,670 --> 00:01:27,150 So e-mail addresses phone numbers social security numbers things that have certain patterns in their 21 00:01:27,150 --> 00:01:28,400 formatting. 22 00:01:28,410 --> 00:01:28,700 All right. 23 00:01:28,710 --> 00:01:35,010 Now in this particular video and part one instead of jumping right into regular expressions and looking 24 00:01:35,010 --> 00:01:37,030 at special characters and all that. 25 00:01:37,080 --> 00:01:42,150 I just want to show you the different functions and javascript that are used to evaluate these regular 26 00:01:42,150 --> 00:01:43,680 expressions. 27 00:01:43,680 --> 00:01:47,810 All right so we just have our index h team out here nothing in it just starting out. 28 00:01:47,820 --> 00:01:53,090 J s are linking that app J.S. file which is completely empty at the moment. 29 00:01:53,790 --> 00:02:00,420 And what I want to do is just initialize a variable called R E for regular expression. 30 00:02:00,420 --> 00:02:00,750 All right. 31 00:02:00,750 --> 00:02:06,420 And then we're going to set that variable a regular expression literal in the way that we do that is 32 00:02:06,420 --> 00:02:10,750 via and closing it in two forward slashes. 33 00:02:10,750 --> 00:02:13,500 All right so in here I'm going to put the word Hello. 34 00:02:13,500 --> 00:02:17,030 Now this itself is actually a regular expression. 35 00:02:17,070 --> 00:02:17,400 All right. 36 00:02:17,400 --> 00:02:22,150 Now each one of these characters is a is is a literal character. 37 00:02:22,260 --> 00:02:28,500 So it's going to be taken at face value it's going to be taken as what it is an actual h in E and Al 38 00:02:28,500 --> 00:02:29,700 and Alan and oh. 39 00:02:29,850 --> 00:02:30,260 All right. 40 00:02:30,260 --> 00:02:34,430 So this is the pattern that we're using in this regular expression. 41 00:02:34,470 --> 00:02:45,120 So if we were to console Daut log R E and save we're going to get the expression with the with the slashes 42 00:02:45,120 --> 00:02:46,130 around it. 43 00:02:46,140 --> 00:02:54,690 Now if we console Daut log arigato source it's going to disregard the slashes and just give us the actual 44 00:02:54,690 --> 00:02:56,470 expression that's inside. 45 00:02:56,720 --> 00:02:57,380 OK. 46 00:02:58,890 --> 00:03:05,790 So we're going to look at some functions that are used to to evaluate expressions so the first one is 47 00:03:05,790 --> 00:03:08,000 going to be exec. 48 00:03:08,010 --> 00:03:09,630 All right so exec 49 00:03:12,080 --> 00:03:17,650 will return the result in an array. 50 00:03:18,240 --> 00:03:21,480 If there's a match or it'll return. 51 00:03:21,480 --> 00:03:22,020 No. 52 00:03:22,170 --> 00:03:24,300 If there's no match so me give you an example. 53 00:03:24,300 --> 00:03:31,890 So we're going to create a variable called result and we're going to set it to that r e variable which 54 00:03:31,890 --> 00:03:35,230 has our expression which is just literally the word Hello. 55 00:03:35,490 --> 00:03:42,420 And then we're going to say Daut exec and then we want to pass in here whatever we want to match it 56 00:03:42,420 --> 00:03:42,750 to. 57 00:03:42,750 --> 00:03:47,940 So let's pass in Hello space world. 58 00:03:47,970 --> 00:03:48,300 All right. 59 00:03:48,300 --> 00:03:49,420 So we'll go ahead and do that. 60 00:03:49,440 --> 00:03:51,930 And then let's console log the result 61 00:03:56,170 --> 00:04:02,530 and save and let's actually comment these two out and save and look at what we get. 62 00:04:02,530 --> 00:04:10,740 So we have this array and inside of it we have hello which is the actual expression. 63 00:04:10,960 --> 00:04:12,340 Then we have the index. 64 00:04:12,340 --> 00:04:14,650 Now the index is where it starts at. 65 00:04:14,650 --> 00:04:22,750 So when you think of evaluating some kind of string like we have here for the expression it starts from 66 00:04:22,750 --> 00:04:24,580 the left end goes to the right. 67 00:04:24,760 --> 00:04:30,360 So it's reading from here over and seeing the word Hello. 68 00:04:30,370 --> 00:04:35,310 Which matches this regular expression here which is just the literal word. 69 00:04:35,340 --> 00:04:35,680 All right. 70 00:04:35,680 --> 00:04:42,370 Now that starts at index 0 the K the first character here is index 0. 71 00:04:42,370 --> 00:04:48,180 If I were to say I don't know I will just put anything will say Brad hello world and save. 72 00:04:48,340 --> 00:04:57,650 Now you can see it's still a match but the index is at five so it's at 0 1 2 3 The space is 4 and then 73 00:04:57,640 --> 00:04:58,360 5. 74 00:04:58,420 --> 00:05:03,160 OK so it starts at 5 and then the input which is Bradd Hello world. 75 00:05:03,160 --> 00:05:04,960 So that's what we're matching. 76 00:05:04,960 --> 00:05:10,670 All right so the three things we get are the expression the index that it starts at. 77 00:05:10,780 --> 00:05:13,780 And then the actual string that we're matching. 78 00:05:14,110 --> 00:05:14,440 All right. 79 00:05:14,440 --> 00:05:22,720 Now if we make this fail so if we just put in HI world and say we're gonna get. 80 00:05:22,720 --> 00:05:23,420 No. 81 00:05:23,620 --> 00:05:23,950 OK. 82 00:05:23,950 --> 00:05:26,690 Because that that does not it's not a match. 83 00:05:26,770 --> 00:05:32,500 It's starting here and it's going over and it's looking for the literal word Hello. 84 00:05:32,920 --> 00:05:35,580 All right which can be anywhere. 85 00:05:36,040 --> 00:05:40,010 If we put the word hell in there it's not going to match it has to be how long. 86 00:05:40,320 --> 00:05:41,200 All right. 87 00:05:41,200 --> 00:05:47,530 And even if we put something like right after it it's still going to match because again it's looking 88 00:05:47,530 --> 00:05:48,880 for the word Hello. 89 00:05:48,880 --> 00:05:54,250 Now there's different Medich characters we're going to get into later that you can specify if you only 90 00:05:54,250 --> 00:05:57,440 want to look for the word without anything attached to it. 91 00:05:57,640 --> 00:05:57,970 All right. 92 00:05:57,970 --> 00:06:02,320 And there's just all kinds of stuff that we can do that we're going to get into. 93 00:06:02,530 --> 00:06:08,320 Now if you wanted to log or do something with just certain parts of this result you could do that. 94 00:06:08,320 --> 00:06:18,030 So for example we can say console the log result and then the first value in the array is just hello. 95 00:06:18,070 --> 00:06:26,740 OK sort of be this here if you want to get the index value you just go ahead and copy this down if you 96 00:06:26,740 --> 00:06:30,110 want to get the index you could say result dog index. 97 00:06:30,430 --> 00:06:33,760 And that will give you zero or whatever the index is. 98 00:06:33,970 --> 00:06:38,050 And then if you wanted to get the search string you could do 99 00:06:41,140 --> 00:06:45,300 Daut input and that gives this hello world. 100 00:06:45,300 --> 00:06:48,570 So whatever we passed in so you can get any of these things. 101 00:06:48,590 --> 00:06:51,720 All right so that's the exact function. 102 00:06:51,740 --> 00:06:57,340 Next one we're going to look at is test OK. 103 00:06:57,350 --> 00:07:05,510 So what test does is it returns very simple returns true or false if there's a match. 104 00:07:05,510 --> 00:07:05,860 All right. 105 00:07:05,870 --> 00:07:16,660 So what we'll do is we'll say contest results equals and let's get this to re which is our X are the 106 00:07:16,720 --> 00:07:22,590 expression dot test and then we'll pass in whenever we want to match. 107 00:07:22,850 --> 00:07:25,410 Let's pass in. 108 00:07:25,760 --> 00:07:26,830 Hello. 109 00:07:27,170 --> 00:07:27,710 All right. 110 00:07:27,710 --> 00:07:37,220 Now we'll go ahead and console log and let's log result let's save and we get false. 111 00:07:37,220 --> 00:07:41,980 Now the reason we're getting false is because we have an upper case h here. 112 00:07:41,990 --> 00:07:49,250 If I were to do a lowercase and see if we get true now you may want to make this case insensitive and 113 00:07:49,250 --> 00:07:51,600 this is where the flag comes in. 114 00:07:51,680 --> 00:07:57,580 So there are certain flags that regular expressions use and I is one of them and flags go after for 115 00:07:57,620 --> 00:07:59,520 using a literal like this. 116 00:07:59,600 --> 00:08:01,200 The eye goes right here. 117 00:08:01,310 --> 00:08:02,950 OK a lower case. 118 00:08:03,290 --> 00:08:04,360 So if we save that. 119 00:08:04,370 --> 00:08:05,370 Now it's true. 120 00:08:05,380 --> 00:08:10,690 Even though this is upper case and this is lowercase k makes a case insensitive. 121 00:08:10,940 --> 00:08:14,930 Let me just write that so I equals case 122 00:08:17,540 --> 00:08:18,440 insensitive. 123 00:08:18,500 --> 00:08:19,430 I didn't write that right. 124 00:08:19,430 --> 00:08:22,600 Do I sense it. 125 00:08:23,600 --> 00:08:24,320 All right. 126 00:08:24,320 --> 00:08:31,540 I also just want the regular expression here as well like that the regular regular expression. 127 00:08:31,640 --> 00:08:31,940 All right. 128 00:08:31,940 --> 00:08:37,520 And then there's another flag called Global or our slash A-G and it's not going to matter much in what 129 00:08:37,520 --> 00:08:44,600 we're doing but this is a global search meaning that I can't type. 130 00:08:44,600 --> 00:08:50,030 Meaning that it's going to look at your whole if you over an entire paragraph it's going to search the 131 00:08:50,030 --> 00:08:55,370 entire thing for all instances of hello not just the first one it finds. 132 00:08:55,430 --> 00:08:55,760 All right. 133 00:08:55,760 --> 00:08:57,840 So that's what she does. 134 00:08:58,340 --> 00:09:03,400 So let's continue with some of these functions and I'm just going to comment that. 135 00:09:03,710 --> 00:09:06,820 So we have to we have exact We have test. 136 00:09:07,190 --> 00:09:12,780 The next one I want to look at is match. 137 00:09:12,860 --> 00:09:17,120 All right so match will return. 138 00:09:17,150 --> 00:09:22,690 I will say return result array or no. 139 00:09:23,020 --> 00:09:28,760 OK which is very similar to two Exec. except it works a little bit different. 140 00:09:28,760 --> 00:09:35,840 So instead of running it off of the regular expression like doing Ari Daut something we're going to 141 00:09:35,840 --> 00:09:39,150 create a string that we want to match. 142 00:09:39,150 --> 00:09:47,630 We'll just say hello there and then we're going to create a result and we're going to set that to the 143 00:09:47,630 --> 00:09:53,330 string dot match and then we want to pass in the regular expression. 144 00:09:53,330 --> 00:09:58,760 So it's kind of it kind of works the opposite of how exact works where we repasts a string in to the 145 00:09:58,760 --> 00:10:02,840 regular expression method and then we can Konsole dot log 146 00:10:05,790 --> 00:10:14,340 the result and save and you can see it gives us basically the same thing gives us the initial expression. 147 00:10:14,350 --> 00:10:19,410 Or I shouldn't say the initial expression it's what it matches the initial expression was lowercase 148 00:10:19,440 --> 00:10:20,120 H. 149 00:10:20,190 --> 00:10:24,250 But since what we're matching is case insensitive. 150 00:10:24,330 --> 00:10:28,670 It picks up from here what it matches which is upper case a cello. 151 00:10:28,710 --> 00:10:36,150 Now if we put something here to say hello actually that will still work but let's remove the 0 from 152 00:10:36,150 --> 00:10:42,140 the end Hell there and we get no ok because it's not it's not finding Hello. 153 00:10:42,570 --> 00:10:45,020 All right so that is match. 154 00:10:45,150 --> 00:10:53,870 Now the next one we have we have two more the next one is search so this is the search function and 155 00:10:54,420 --> 00:11:03,740 let's see so this will return returns the index of the first match. 156 00:11:04,040 --> 00:11:10,450 And if not found it returns a negative one. 157 00:11:10,520 --> 00:11:13,070 OK so it works kind of like index of. 158 00:11:13,070 --> 00:11:17,460 So for this let's say Konst as TR. 159 00:11:17,780 --> 00:11:25,370 So what we want to match and we'll put in a low there and then we'll just call or create a variable 160 00:11:25,370 --> 00:11:31,820 called result set it to s t r dot search 161 00:11:34,290 --> 00:11:40,860 and then pass in the regular expression and console log. 162 00:11:41,780 --> 00:11:47,570 The result is you can see most of these work kind of the same way so it just gives us the index where 163 00:11:47,570 --> 00:11:48,140 it starts. 164 00:11:48,140 --> 00:11:55,550 Now if I were to say Brad Hello there and save it gives this index five because it starts at index 5 165 00:11:55,550 --> 00:11:57,030 which is right here. 166 00:11:57,050 --> 00:11:59,540 All right so that's how search works. 167 00:11:59,540 --> 00:12:06,730 And then we also have replace. 168 00:12:06,990 --> 00:12:23,430 All right so replace will return a new string with some or all of or all matches of a pattern. 169 00:12:23,430 --> 00:12:32,960 And I know that seems a little confusing so let's give you an example say Conte's string set that too. 170 00:12:33,960 --> 00:12:45,570 Hello there and let's go ahead and create a new string and set that equal to a string dot replace and 171 00:12:45,570 --> 00:12:51,630 then pass in the regular expression and then let's also pass in what we want to replace it with. 172 00:12:51,630 --> 00:12:54,170 So we'll say hi. 173 00:12:55,390 --> 00:12:56,040 OK. 174 00:12:56,040 --> 00:13:02,790 And then we'll go ahead and cons. dog log the new string and save and we get high there. 175 00:13:02,790 --> 00:13:07,980 OK so not only does it look for the regular expression and match it but it will replace it with something 176 00:13:07,980 --> 00:13:09,190 else. 177 00:13:09,210 --> 00:13:16,890 All right so those are the basic functions that you can use with regular expressions and of course you 178 00:13:16,890 --> 00:13:22,920 can create your own functions using these to give you a more custom result. 179 00:13:22,930 --> 00:13:27,420 And that's kind of what we're going to do in the next video we're also going to start to look at some 180 00:13:27,420 --> 00:13:33,490 of the mega characters and some of the special symbols associated with regular expressions in javascript.