Transcript
[00:00] A regular expression is a sequence of characters that we can use to define a pattern. Then we can use that pattern to find, replace, and match other elements in a string. I’m going to set us up with a string here. I’m going to say is this question mark, and make note of the capital I and the capital T. Now JavaScript gives us two ways to create a regular expression. And the first one is the constructor. So I say new regexp and I pass in our pattern. Now that’s a pattern. It’s not really a string. It is a lowercase i followed by a lowercase s in this case. Now the second way we can do that is called a regular expression literal. So we just wrap our pattern into forward slashes. So I’m going to name that one zero. And I’m just going to log these out to show that they are in fact the same. So if I log that out I get forward slash is forward slash. And if I log out zero, I get the exact same results. So these guys are the same. And there’s a method here that I probably should be using called to string. But either way you can see they are equivalent. Now I’m going to comment this one out for now. We’re going to stick with the literal version.
[01:21] So JavaScript gives us a bunch of different methods for interacting with these guys. And the easiest one is test. So we take a regular expression. We say test. And then we pass in our pattern or sorry, we pass in our string. So if I want to log this out, I save that we’re going to get true. So test only returns a true or false Boolean value. So if I change this to it, we get false.
[01:48] Now, another way we can do this is with execute. So execute works the same way. We’re going to pass in our value or string to the execute. And we get back this array of things. And it says it found is at the index of five. And if we come up here and look at this guy, one, two, three, four, five, there is our lowercase i s. Now it skipped this first one because we didn’t have a flag for, and I’m going to put two flags on here. One is global and the other one is case insensitive. So that’s the i. And if we wanted to do that in the constructor, we just pass it in as our second argument. So now when I run this, I get is at index of zero.
[02:35] And what’s interesting about regular expression execution is it’s state aware. So I’m going to run this twice. And what we’re going to see is that the first one is at zero. And the second one is at five. And if I run it a third time, it’s going to find another one at 10. So here’s our zero. Here’s our five. And then this is 10. So since we’re primarily working with strings, it makes a lot of sense that the JavaScript string prototype is super compatible with regular expression.
[03:04] So if we say string. So that’s our string that we’ve been working with. And actually I’m going to need to console log this out. So we’ll console log. We’ll say match. We’ll say string dot match. And we’ll pass in our regular expression. And we get each of those matches. So we get is, is, and is. We get a length on that guy. So that’s super helpful. Another one we can do is search. So if we run that, it returns the index of the first match. So if I change this guy to capital T, let’s say it finds it at index eight. And then the last one we can look at on the string prototype is going to be replace. So if I say I want to replace, let’s just do our regex. So it’s going to be, um, I followed by the lowercase. I follow or sorry. No, it’s, uh, we made it case insensitive. So I followed by us. And we’re going to replace that with an X. And you can see it replaced is, is, and is with an X.
[04:11] Now for the purposes of these videos, I’m going to create a little function that outputs this stuff to the screen. So here I am in my, uh, index HTML. It’s going to set up a pre. I’m going to set up some quick styles. We have our pre a line height of two, and we’re going to utilize span. So we’re going to end up wrapping the elements that we find in a span. So I’m just going to give that a background color of triple E padding of one pixel and an outline of one pixel solid. We’ll just do something a little darker there there. Okay. So there’s our pre. There’s how we’re going to style it. I’m going to jump back over here and create a new file. I’m going to call it output.js. Close this sidebar. And what we’re going to do here is we’re going to export by default little function. It’s going to take in our string and our regex. We’re going to use document.querySelector. Find our pre. We’re going to update its inner HTML to be our string.replace. Pass in our regex. And we’re going to have this taken. We’re going to call it m. So this is going to be a function. I’m calling it m for like the match that we found. And it’s going to return the span with our match in the middle. So I save that and format it. Okay. So that’s looking good. I’m going to jump back over to our app. We’re going to input our output function from our new file. And if I jump down here and say output. Pass in our string and our regular expression. And save that. You can see that our regular expression right now is I followed by us. With the global and the case insensitive flag. And it is wrapping each of those elements that it found in the span. So we’ll be able to use this to visualize how our regular expression is interacting with these strings going forward.
What IS a regular expression, and why should you care? In this first lesson of our 11-part series, we cover the fundamentals: what regex is, the two ways to create a regex in JavaScript (constructor vs. literal), and the core string methods that work with patterns — test(), exec(), match(), search(), and replace(). We also cover the global and case-insensitive flags, and why exec() is state-aware. By the end, you’ll have a working visualization tool to see regex matching in action.
base html
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>JS Regular Expressions: Introduction</title> <style> pre { line-height: 2; } span { background-color: #eee; padding: 1px; outline: 1px solid #999; } </style> </head> <body> <pre></pre> <script type="module" src="app.js"></script> </body></html>Our output helper
export default (str, regex) => { document.querySelector("pre").innerHTML = str.replace(regex, (str) => str ? `<span>${str}</span>` : "", );};Creating a regular expression
// JS Regular Expressions: Introductionimport output from "./output.js";let str = `Is this This?`;
// let regex0 = new RegExp("is", "gi");let regex = /is/gi;
// console.log(regex.test(str));// console.log(regex.exec(str));// console.log(regex.exec(str));// console.log(regex.exec(str));
// console.log("match", str.match(regex));
// console.log("search", str.search(/T/));
console.log("replace", str.replace(regex, "X"));output(str, regex);From here on out index.html and output.js will be referenced, but not shown, we are done with any changes there.