7.3 Regular Expressions

Hi folks, in this lesson we're going to start looking at regular expressions. Regular expressions are a feature of many programming languages. So if you come into JavaScript from another language, you've probably at least heard of them, if not used them before. Regular expressions are extremely powerful and allow us to match patterns of characters within other strings. It sound really simple, but just like destructuring assignments, regular expressions can get very, very complicated very, very quickly depending on the pattern that we want to match. Like most of the different data types in JavaScript, we can either create regular expressions as literals or as objects using the regular expression constructor. And as usual, the literal syntax is generally preferred and is used most of the time. So first of all let's create a regular expression. A literal regular expression is created by adding the pattern of characters that we want to match within forward slashes. In this case, we specify that we want to match the @ symbol. So we can now test strings to see if they contain this symbol. We can do that using the test method, which is one of several different methods that can be used with regular expressions. It's probably the most simple method, and we're going to be using it throughout most of this lesson. So let's take a look in the browser's output. In this case we see true, because the string that we're testing, which is what we passed to the test method, does contain an @ sign. If we remove that and then go back to the browser, this time we see false. This isn't the regular expression that you should use if you actually want to test for an email address, by the way. The actual regular email address expression is much, much more complicated than that. So in this case, the pattern that we wanted to search for is a simple, literal character search. Regular expressions can match literal strings, such as in this example, but they can also use special characters and groupings of characters to match patterns in a much more flexible way. Let's say that we want to validate that a string contains only letters and no numbers. In this case, we could do something like this. So even this regular expression is exponentially more complex than the first regular expression that we looked at. Let's just look at what all of these different characters mean. So the hat character matches the start of the string. So we're saying here that we want to begin searching from the very beginning of the input string. The dollar character in a regular expression matches the end of the pattern. So in this case, we're saying that we want to stop searching at the end of the input string. These square brackets denote a group of characters. And in this case, the group of characters is any uppercase letter between A and Z or any lowercase letter between a and z. So let's put our pattern to the test. In this case, the test method returns true. And it returns true because the string that we are testing, an uppercase X, does contain uppercase or lowercase letters between A and Z. If we change this to a number, then the expression fails. At the moment, our regular expression pattern is only good for testing single characters. If we try to test a whole word, even if that word only contains upper and lowercase letters, the expression moves to fail. As you can see, it has returned false. So what we need to do in order to get this string to match is to say that we want to match any number of uppercase or lowercase letters. We can do that using small special characters. So now the test method returns true because our test string contains one or more uppercase or lowercase letters between A and Z. So that's what the plus symbol signifies within a regular expression. It means one or more occurrences of the pattern. We can also test for zero or more occurrences of the pattern, and we do that using a star character instead of plus character. And we can test for zero or one occurrence of the pattern using a question mark. So we're saying that our pattern should match any number of uppercase or lowercase letters. So what happens if we add a number into the middle of our string? In this case, the test failed because the string is not comprised solely of uppercase or lowercase letters. If we do want to allow numbers in the string as well, we can add a character set that matches any number between 0 and 9. And now the expression passes. So we saw that the plus character means one or more. And we also learned that the star character means 0 or more and the question mark means 0 or 1. So what if we want to match a specific number of occurrences? In this case, we can use curly brackets inside the regular expression. And curly brackets, just like square brackets, have meaning within a regular expression. So before we actually pass the test string into our regular expression, let's just go over the syntax of the expression. So we're using the hat and the dollar characters to mark the start and the end of the string. We understand that already. This time, then, we're saying that the test string should consist of three numbers between 0 and 9, followed by a hyphen, followed by six numbers between 0 and 9, followed by another hyphen followed, lastly, by three numbers between 0 and 9. So we're checking for a very specific format of a number. This could be a telephone number or some kind of order number or something like that. So in order to get the test method to return true, we need to pass it a string that matches this format. So this string is in the expected pattern, and the test method should return true, and as you can see it does. But if we deviate from that pattern at all, it then returns false. Backslashes within regular expressions also have special meaning. They can be used in a number of different ways depending on how they're used. So for example, in this number format example, instead of using hyphens as part of this string, we could use star characters instead. Now the star character also has special meaning in regular expressions, as we saw earlier. So in order to actually match a literal star character, we need to escape it. And that's one of the uses for a backslash in a regular expression, to escape another character that has special meaning. So now our regular expression should fail. This is because we're still using hyphens. So let's go back and update it to use the star character as a separator instead. And now the pattern matches once again. Backslashes are also used to create special codes which match different groups of characters. For example, the \d code matches any digit or number, and so is a much shorter way of specifying the numeric character set. So instead of using these square brackets with 0 to 9 in our number format expression, we can change that to use \d instead. And we find that the expression is still passing. So \d is a special code that means match any digit between 0 and 9. It's a shortcut for using 0-9 within square brackets. There are a lot of other backslash letter combinations as well as some additional special character combinations for matching different things. We're gonna come back in the next lesson and continue looking at some more regular expressions. So in this lesson, we started looking at regular expressions. We saw that they are a flexible and powerful way of matching different characters within strings. We saw that the forward slash is the delimiter that specifies the start and end of a regular expression literal. We then moved on to look at some special characters. We saw that the hat and the dollar have special meaning. And they mean the starts and the end of a string, respectively. We saw that the plus character means one or more occurrences of a particular pattern. We saw that the star means zero or more occurrences of a particular pattern. And we saw that the backslash has several different meanings depending on how it's used. We saw that it can be used as either an escape character to escape other characters that have special meaning like the star character. And we also saw that the backslash can be used in conjunction with other characters to specify a special group of characters like \d, which means any digits between 0 and 9. We also looked at how square brackets are used to create character sets and how curly brackets are used to specify an exact number of occurrences. In the next lesson then, as I mentioned, we're going to continue looking at regular expressions. Thanks for watching.