Let me start off this regular expression discussion with a famous quote from Jamie Zawinski.
He's just a famous programmer, by the way.
He said "Some people, when confronted with a problem, think 'I know I'll use regular expressions'. But
now they have two problems."
Haha ðŸ¤£.
Oh, I guess what this is trying to say is that regular expressions are both terribly awkward and extremely
useful at exactly the same time.
They are awkward because their syntax is kind of cryptic and the programming interface JavaScript provides
us is kind of a little bit clumsy, but they're useful.
They are a powerful tool for inspecting and processing strings.
So properly understanding regular expressions will make you a more effective programmer.
And that's why this course wouldn't be complete if I didn't just mention it, at least at a high level.
So what are they and how do they work?
Well, firstly, a regular expression is just a way to create and read patterns. At the crux,
that's all a regular expression is.
And regex forms part of the standard library of many programming languages, including Java and Python.
And it's built into the syntax of others, including Perl and ECMAScript.
But unfortunately, regular expression syntax varies slightly across languages.
The good news, though, is that the core details are the same.
Now let's take a look at how each of these different languages match and extract data using regular
expressions.
In Java, the String class has a method called matches and it'll return true if it does match.
Java also has a few helper classes, namely the Java.util.regex.Pattern helper, which helps to create
the patterns.
And they've got a matcher function which is a helper for navigating and keeping the state of various
matches.
Python provides regular expressions to, through the re module and provides a way to avoid the double
escaping by prefixing your string with an R for "raw". Ruby allows you to create a regular expression object
by surrounding a pattern with forward slashes.
This is known as a regular expression literal,
by the way. PHP has a function called preg_match and despite what the name sounds like, it's not
a paternity test result function ðŸ¤£! But, especially if you're anything like me, JavaScript is what we
really, really care about.
And in JavaScript a regular expression is a type of object. And we can create a regular expression in
a few ways.
It can either be constructed with the regexp constructor or it can be written as a literal value by
enclosing a pattern in forward slash characters, the same as in Ruby that we just saw.
But let's look at this in a bit more detail and see how it works.
Okay, well, let's see both of these methods in more detail.
Let's see them in action.
So there we go.
The first variable we define here is "regex1".
We've used the constructor, the RegExp() constructor. And of course in the second case we've literally
just used the literal approach.
But very importantly, my dear students, both of these regular expression objects represent the same
pattern - an "a" character followed by a "b" character, followed by a "c" character.
Here we are defining a pattern.
Got it.
Okay, cool.
You might be thinking we've created a pattern and this pattern is an object.
It's a regular expression object.
But why does it need to be in an object?
What's the benefit of that?
Well, the main benefit of having it as an object is that with objects we get a number of useful methods.
And the simplest, and one of the most useful methods, is test().
And this test() is a method on the object provided to us by JavaScript.
It's not something we've written ourselves.
And if you pass this method a string, it's going to return a boolean telling you whether the string
contains the match of the pattern in your regular expression.
Okay.
I know ... it's just words on a screen.
Let me jump over to Visual Studio Code and show you an example.
Actions speak louder than a thousand words.
So here we are.
I've just got a JavaScript file open.
I just happened to call it app.js.
Now, let me just write a comment here.
Let's say the user inputs data that we're saving into a variable called data.
Okay?
So let's just pretend this is a real life scenario, and we get the data from the form.
Okay, here we're just going to have a whole lot of characters and then "abc" right,
and then we can have a whole lot of, you know, x's following that.
So there we go.
That's data that the user's typed in whatever form widget we're dealing with.
And now I want to show you regex.
So let's start off with method 1.
And this can
be using the constructor function.
Very simple.
And we've seen already how to do this.
We're just going to define a variable called "regex1".
We're going to use the new keyword in JavaScript and they have a constructor function called RegExp(),
a regular expression.
And what is it that we're going to create?
What pattern do we want to create?
The pattern we want to create is the character "a" followed by the character "b" followed by the character
"c". Now what I want to do is I want to test whether our pattern is matched within the data variable,
whatever the user typed in the form or the widget.
How can we do that?
Well, all we need to do is call that test() function that I told you about in the lecture, and then console
log it out. And I don't want to go to the browser, so I want to use Quokka.
So I'm going to start Quokka.
That's how you spell it.
Quokka on the current file.
And if you've done my JavaScript courses, you'll know a lot about Quokka.
It's basically just a runtime JavaScript interpreter.
Okay, so we can see the results of JavaScript in real time - very, very handy and saves a lot of time.
So here we just want to console log out the result and here we're going to call our variable.
And remember how I said that there's lots of properties and methods.
The one that we want is test(). And we are wanting to test whether our data matches the A, B, C pattern.
And here you can see that we're being logged out,
true âœ….
So it passes the test.
If, for example, we didn't have an "a", it's going to be false.
So you can see how easy it is to work with regex.
And method two is just as easy.
We're going to be using the literal approach.
Let's define a new variable called "regex2".
Here, we just need to use forward slashes, right?
We don't need that constructor function.
It's just a shortcut, if you will.
And again, we're going to define the pattern as "a" followed by the character "b", followed by the character
"c", and we can do exactly the same thing. We can console log, we can call our regular expression. On there, we have
a method called test() and we're wanting to test the data. And there we go.
We literally have true âœ….
It's passed the test.
If we put the "b" in front of the "a", of course it's all going to be false.
It has to be A followed by B, followed by C.
Is this starting to make more sense?
I hope so.
But you may be thinking, "why did we need to use a regex in this example?
Clyde?"
Couldn't we have just used JavaScript's indexOf() method, for example?
Let me show you what I mean.
So method 3: using indexOf.
What is indexOf()?
Don't stress.
It's just a prototype on the String object in JavaScript.
What's important to us is that it will return a -1 if the value is not found within the object.
Let me show you what I mean.
So all I want to do is console log.
I want to grab our string, which is data.
We've defined it above. On this string, we have a method called indexOf() and this is provided to us by
JavaScript. And we are wanting to test the string "abc" and here we return the number 7 because
it's telling us where in that sequence of characters that pattern starts at.
In other words, we've got 7 x's before the "abc". Of course, if we don't have an A, everything
is going to return false, and the indexOf() method is going to return -1.
I know we've covered it a lot in a very short space of time, but let's jump back to the lecture.
Finding out whether a string contains "abc" could just as well have been done with a call to
indexOf.
But ... drumroll ...
regular expressions allow us to express more complicated patterns than just the one we looked at
now. We saw when we were looking at MailChimp, we've got uppercase, lowercase, we've got numbers, minimum
of eight characters,
etc
etc.
So with regex, we can really, really define the exact requirements we need.
And we're going to be seeing more examples of this throughout the course.
But for now, I just wanted to stop and give you a high level overview of what
a regular expression is.
Hopefully it's helped you, and I'll see you in the next lecture.