1 00:00:00,000 --> 00:00:04,976 [MUSIC] 2 00:00:04,976 --> 00:00:09,770 Hi, I'm Joel, a JavaScript developer and teacher at Treehouse. 3 00:00:09,770 --> 00:00:13,080 Welcome to Regular Expressions in JavaScript. 4 00:00:13,080 --> 00:00:16,930 Have you ever wondered how search bars find the text you type in? 5 00:00:16,930 --> 00:00:18,910 Or maybe when you are filling out a form, 6 00:00:18,910 --> 00:00:22,870 it told you had entered an invalid email address. 7 00:00:22,870 --> 00:00:24,420 How did it know? 8 00:00:24,420 --> 00:00:27,080 Regular expressions is the answer. 9 00:00:27,080 --> 00:00:30,430 In this course, I'll show you what regular expressions are. 10 00:00:30,430 --> 00:00:32,780 And we'll get some practice using them. 11 00:00:32,780 --> 00:00:37,720 Then we'll build a form that uses regular expressions to validate the data typed in. 12 00:00:39,090 --> 00:00:41,300 What is a regular expression? 13 00:00:41,300 --> 00:00:46,020 A regular expression is a way to describe a pattern in a string. 14 00:00:46,020 --> 00:00:49,860 Let's look at a simple example using the browser's find feature. 15 00:00:51,580 --> 00:00:55,240 I'm on the Wikipedia page for regular expressions. 16 00:00:55,240 --> 00:01:00,680 It says here, Stephen Cole Kleene helped found the concept of regular expressions. 17 00:01:00,680 --> 00:01:02,800 I'll find his name on the page. 18 00:01:02,800 --> 00:01:07,270 I'll hit Cmd+F to open Chrome's find bar. 19 00:01:07,270 --> 00:01:10,000 As I type in Kleene's name, 20 00:01:10,000 --> 00:01:14,410 notice that Chrome highlights each place the word appears. 21 00:01:14,410 --> 00:01:17,950 These highlighted strings are called matches 22 00:01:17,950 --> 00:01:20,200 because they match the string I'm typing in. 23 00:01:21,270 --> 00:01:23,960 The matches are case insensitive. 24 00:01:23,960 --> 00:01:31,110 In other words, even though I didn't type a K, Chrome still matches the word Kleene. 25 00:01:31,110 --> 00:01:36,110 If I then type the space, this Kleene is no longer highlighted 26 00:01:36,110 --> 00:01:39,430 because it doesn't match what I'm searching for. 27 00:01:39,430 --> 00:01:45,440 If I backspace and type an apostrophe, this one deselects. 28 00:01:45,440 --> 00:01:49,140 What happens if I want to select both of these at once? 29 00:01:49,140 --> 00:01:53,230 You can do that using special characters in a regular expression. 30 00:01:53,230 --> 00:01:58,100 Because Chrome's simple search bar doesn't recognize regular expressions, 31 00:01:58,100 --> 00:02:01,750 let's use an online editor called RegexPal. 32 00:02:01,750 --> 00:02:04,350 The version I'm using has a long URL, so 33 00:02:04,350 --> 00:02:09,340 the best way to get to RegexPal is by clicking a link in the teacher's notes. 34 00:02:09,340 --> 00:02:13,710 Regex is a common way to shorten the term regular expression. 35 00:02:13,710 --> 00:02:18,780 On this page, we can test regexes and interactively learn how they work. 36 00:02:18,780 --> 00:02:22,140 Type the text you want to match into the lower window. 37 00:02:22,140 --> 00:02:26,140 This is kind of like the Wikipedia page, I'll type Kleene's name. 38 00:02:28,280 --> 00:02:30,270 In the upper field, I'll type Kleene. 39 00:02:31,760 --> 00:02:35,200 The top text field is like the find bar of the browser. 40 00:02:35,200 --> 00:02:38,570 In the bottom field, Kleene highlights, it's a match. 41 00:02:38,570 --> 00:02:41,505 You type the regular expression into the top field and 42 00:02:41,505 --> 00:02:44,900 any text you want to search into the bottom field. 43 00:02:44,900 --> 00:02:48,310 In the bottom field, I'll type Kleene again. 44 00:02:48,310 --> 00:02:51,300 And you can see that both instances are matched. 45 00:02:51,300 --> 00:02:55,270 Let's replicate the search we did earlier on the Wikipedia page. 46 00:02:55,270 --> 00:03:01,398 I'll put a space after one and an apostrophe after another. 47 00:03:01,398 --> 00:03:06,130 Now when I type a space in the upper field, we see a similar behavior. 48 00:03:06,130 --> 00:03:08,540 Only one of them is highlighted. 49 00:03:08,540 --> 00:03:12,840 When I type an apostrophe, instead, the other is highlighted. 50 00:03:12,840 --> 00:03:16,330 So far, I've just been putting strings into the top field. 51 00:03:16,330 --> 00:03:21,430 A string as a kind of regex that only matches exact duplicates. 52 00:03:21,430 --> 00:03:27,140 But we can use other special characters to create a more flexible regular expression. 53 00:03:27,140 --> 00:03:31,660 For example, I'll add a dot or period to the end of this. 54 00:03:31,660 --> 00:03:34,688 And you can see that both strings are matched. 55 00:03:34,688 --> 00:03:38,200 A dot has a special meaning in regular expression. 56 00:03:38,200 --> 00:03:42,800 It matches any single character, so it will match both the space and 57 00:03:42,800 --> 00:03:44,420 the apostrophe. 58 00:03:44,420 --> 00:03:49,070 I discuss this and other special regex characters in more detail later. 59 00:03:49,070 --> 00:03:51,640 So don't worry too much about it for now. 60 00:03:51,640 --> 00:03:54,740 I just wanted to give you a glimpse of what's possible. 61 00:03:54,740 --> 00:03:58,550 In the next video, I'll teach you more about special regex characters. 62 00:03:58,550 --> 00:04:01,040 And how you can use them to find patterns in text.