Skip to content

Commit 31c0eb2

Browse files
scissorsneedfoodtooDario-DCjdwilkin4
authored
feat: add video ids and transcripts for working with regex lectures (freeCodeCamp#58349)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Co-authored-by: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
1 parent 6f8c6ae commit 31c0eb2

File tree

8 files changed

+755
-73
lines changed

8 files changed

+755
-73
lines changed

‎curriculum/challenges/_meta/lecture-working-with-regular-expressions/meta.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
{
2626
"id": "6733c5dc74176e4c496d09e6",
27-
"title": "What Are Lookaheads and Lookbehind Assertions, and How Do They Work?"
27+
"title": "What Are Lookahead and Lookbehind Assertions, and How Do They Work?"
2828
},
2929
{
3030
"id": "6733c5e54e3a154c8078ed48",

‎curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md

Lines changed: 155 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,161 @@ dashedName: what-are-regular-expressions-and-what-are-some-common-methods
88

99
# --description--
1010

11-
Watch the video lecture and answer the questions below.
11+
Watch the video or read the transcript and answer the questions below.
12+
13+
# --transcript--
14+
15+
What are regular expressions, and what are some common methods?
16+
17+
Regular expressions, or regex, are a feature supported by many different programming languages.
18+
19+
A regular expression is a special syntax to create a "pattern", which you can then use to check against a string, extract text, and more.
20+
21+
Let's take a look at a basic regular expression:
22+
23+
```js
24+
const regex = /freeCodeCamp/;
25+
```
26+
27+
Notice how, in JavaScript, you define a regular expression by creating your pattern between two forward slashes (`/`). Try not to confuse this with a comment, where the text comes after both forward slashes.
28+
29+
This particular regular expression will match the text `freeCodeCamp`, with capital `C`s, anywhere in a string. But how can you actually do that?
30+
31+
That brings us to our first method – the `test()` method. The `test()` method is present on `RegExp` objects, which are objects representing a regular expression (such as the one we just defined).
32+
33+
The `test()` method accepts a string, which is the string to test for matches against the regular expression. For example, let's try testing the string `e`:
34+
35+
```js
36+
const regex = /freeCodeCamp/;
37+
const test = regex.test("e");
38+
console.log(test);
39+
```
40+
41+
You can see we've called the `test()` method on our new regex, and passed the string `e` as the argument. We've also logged the result:
42+
43+
```js
44+
console.log(test); // false
45+
```
46+
47+
The `test()` method returned `false` because the string `e` does not match the pattern `freeCodeCamp`. Even though the pattern `freeCodeCamp` includes the letter `e`, that's the opposite direction of how regular expressions work.
48+
49+
Let's take a look at a few more examples. Take a moment to consider these:
50+
51+
```js
52+
const regex = /freeCodeCamp/;
53+
console.log(regex.test("freeCodeCamp"));
54+
console.log(regex.test("freeCodeCamp is great"));
55+
console.log(regex.test("I love freeCodeCamp"));
56+
console.log(regex.test("freecodecamp"));
57+
console.log(regex.test("FREECODECAMP"));
58+
console.log(regex.test("free"));
59+
console.log(regex.test("code"));
60+
console.log(regex.test("camp"));
61+
```
62+
63+
What do you think each line will print? Well, here's the result:
64+
65+
```js
66+
const regex = /freeCodeCamp/;
67+
console.log(regex.test("freeCodeCamp")); // true
68+
console.log(regex.test("freeCodeCamp is great")); // true
69+
console.log(regex.test("I love freeCodeCamp")); // true
70+
console.log(regex.test("freecodecamp")); // false
71+
console.log(regex.test("FREECODECAMP")); // false
72+
console.log(regex.test("free")); // false
73+
console.log(regex.test("code")); // false
74+
console.log(regex.test("camp")); // false
75+
```
76+
77+
Did that surprise you? Notice how the first three strings returned `true`. These strings all contain the text, `freeCodeCamp`, exactly, somewhere in the string.
78+
79+
Lines 5 and 6 return `false`. While they contain the text `freecodecamp`, the case does not match. Regular expressions are case-sensitive by default.
80+
81+
Finally, while the last three contain a portion of the pattern, the strings do not contain the entire pattern.
82+
83+
The `test()` method returns a `boolean`, indicating whether the string matches the regular expression at all.
84+
85+
But what if you wanted more information than that? Well, strings have a `match()` method. This method accepts a regular expression, although you can also pass a string which will be constructed into a regular expression.
86+
87+
`match()` returns the match array for the string. What's a match array? Well, let's take a look:
88+
89+
```js
90+
const regex = /freeCodeCamp/;
91+
const match = "freeCodeCamp".match(regex);
92+
console.log(match);
93+
```
94+
95+
If we run this, we get an array back! But it's a strange looking array. It's got some extra properties:
96+
97+
```js
98+
console.log(match);
99+
// [
100+
// 'freeCodeCamp',
101+
// index: 0,
102+
// input: 'freeCodeCamp',
103+
// groups: undefined
104+
// ]
105+
```
106+
107+
The `groups` property would show any captured groups. You will learn what that means in a future lecture.
108+
109+
The `index` property tells you at what character in the string the match was found. In our case, it was found at the beginning of the string.
110+
111+
The `input` property tells you the string the `match()` method was called on.
112+
113+
Let's try a few more again, and see how the result changes:
114+
115+
```js
116+
const regex = /freeCodeCamp/;
117+
console.log("freeCodeCamp".match(regex)); // ['freeCodeCamp', index: 0, input: 'freeCodeCamp', groups: undefined]
118+
console.log("freeCodeCamp is great".match(regex)); // ['freeCodeCamp', index: 0, input: 'freeCodeCamp is great', groups: undefined]
119+
console.log("I love freeCodeCamp".match(regex)); // ['freeCodeCamp', index: 7, input: 'I love freeCodeCamp', groups: undefined]
120+
console.log("freecodecamp".match(regex)); // null
121+
console.log("FREECODECAMP".match(regex)); // null
122+
console.log("free".match(regex)); // null
123+
```
124+
125+
We know already that the first three strings should produce a match, so let's take a look at those:
126+
127+
```js
128+
// ['freeCodeCamp', index: 0, input: 'freeCodeCamp', groups: undefined]
129+
// ['freeCodeCamp', index: 0, input: 'freeCodeCamp is great', groups: undefined]
130+
// ['freeCodeCamp', index: 7, input: 'I love freeCodeCamp', groups: undefined]
131+
```
132+
133+
Is that what you expected? You can see how the `input` and `index` have changed depending on the string provided, and the location of the match in the string.
134+
135+
The other three lines, which do not match, return `null` instead of an array.
136+
137+
Now that we can test and match strings with our regular expression, what if we want to replace the content of a string? Maybe someone has written `freecodecamp` in all lowercase, and we want to automatically fix the casing for them.
138+
139+
First, we need to update our regular expression to match the lowercase form of `freecodecamp`, and create our test string:
140+
141+
```js
142+
const regex = /freecodecamp/;
143+
const str = "freecodecamp is rly kewl";
144+
```
145+
146+
Now, strings have a `replace()` method which accepts two arguments: the regular expression to match (or a string, if you don't need all of the features of regex), and the string to replace the match with (or a function to run against each match).
147+
148+
So if we wanted to replace our `freecodecamp` with the proper casing:
149+
150+
```js
151+
const regex = /freecodecamp/;
152+
const str = "freecodecamp is rly kewl";
153+
const replaced = str.replace(regex, "freeCodeCamp");
154+
console.log(replaced);
155+
```
156+
157+
And we'll peek at the result:
158+
159+
```js
160+
console.log(replaced); // freeCodeCamp is rly kewl
161+
```
162+
163+
You can see that `replace()` returns the updated string with the matching pattern `replaced`.
164+
165+
Regular expressions, and all of the methods associated with them, can seem complex and overwhelming. But you'll get the chance to explore them further in this next set of lectures.
12166

13167
# --questions--
14168

‎curriculum/challenges/english/25-front-end-development/lecture-working-with-regular-expressions/6733c5ba834ded4bb067e67c.md

Lines changed: 214 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,220 @@ dashedName: what-are-some-common-regular-expression-modifiers-used-for-searching
88

99
# --description--
1010

11-
Watch the video lecture and answer the questions below.
11+
Watch the video or read the transcript and answer the questions below.
12+
13+
# --transcript--
14+
15+
What are some common regular expression modifiers used for searching?
16+
17+
Modifiers, often referred to as "flags", modify the behavior of a regular expression. Let's recall our example from an earlier lecture:
18+
19+
```js
20+
const regex = /freeCodeCamp/;
21+
console.log(regex.test("freeCodeCamp")); // true
22+
console.log(regex.test("freeCodeCamp is great")); // true
23+
console.log(regex.test("I love freeCodeCamp")); // true
24+
console.log(regex.test("freecodecamp")); // false
25+
console.log(regex.test("FREECODECAMP")); // false
26+
console.log(regex.test("free")); // false
27+
console.log(regex.test("code")); // false
28+
console.log(regex.test("camp")); // false
29+
```
30+
31+
If you remember, the all-lowercase and all-uppercase `freeCodeCamp` strings failed to match the pattern. This is because, by default, regular expressions are case-sensitive.
32+
33+
But what if we could tell the regular expression to be case-insensitive? Well, there's a modifier for that. The `i` flag makes a regex ignore case. How can we use it? Flags go after the closing forward slash in a regular expression:
34+
35+
```js
36+
const regex = /freeCodeCamp/i;
37+
```
38+
39+
Notice the change to the regular expression on the first line. Now we can check how this changes things:
40+
41+
```js
42+
console.log(regex.test("freeCodeCamp")); // true
43+
console.log(regex.test("freeCodeCamp is great")); // true
44+
console.log(regex.test("I love freeCodeCamp")); // true
45+
console.log(regex.test("freecodecamp")); // true
46+
console.log(regex.test("FREECODECAMP")); // true
47+
console.log(regex.test("free")); // false
48+
console.log(regex.test("code")); // false
49+
console.log(regex.test("camp")); // false
50+
```
51+
52+
Because our regular expression is now case-insensitive, the all-lowercase and all-uppercase strings have "passed" the test. This can also work for a string with a random mix of uppercase and lowercase letters:
53+
54+
```js
55+
console.log(regex.test("dO yOu LoVe fReEcOdEcAmP?")); // true
56+
```
57+
58+
There are quite a few other flags that you can use. The `g` flag, or global modifier, allows your regular expression to match a pattern more than once.
59+
60+
Let's see how that affects our code. You'll notice we kept the `i` flag – a regular expression can use multiple flags (as many as needed) to achieve your desired behavior:
61+
62+
```js
63+
const regex = /freeCodeCamp/gi;
64+
```
65+
66+
Wait a second... what's this? It would seem that the global modifier is making some of our strings that should be passing fail instead:
67+
68+
```js
69+
console.log(regex.test("freeCodeCamp")); // true
70+
console.log(regex.test("freeCodeCamp is great")); // false
71+
console.log(regex.test("I love freeCodeCamp")); // true
72+
console.log(regex.test("freecodecamp")); // false
73+
console.log(regex.test("FREECODECAMP")); // true
74+
console.log(regex.test("free")); // false
75+
console.log(regex.test("code")); // false
76+
console.log(regex.test("camp")); // false
77+
```
78+
79+
Why? Well, the global modifier makes your regular expression stateful. This means it keeps track of where it has previously matched a pattern. So when it matches the first `freeCodeCamp` string, it remembers that it found a match starting at index `0`.
80+
81+
We then test it against `freeCodeCamp is great`, but it doesn't start at index `0`. The regular expression "knows" it found a match at index `0` already, so even though this is a different string, it starts from the end index of the match.
82+
83+
`freeCodeCamp` is `12` characters long, so a match at `0` ends at index `11`. The matching will resume at index `12`. And since `is great` does not match `freeCodeCamp`, it returns `false`.
84+
85+
Then, because it fails to find a match, it "loses" its state and starts the following match back at `0`.
86+
87+
If we switch our logs around so that a string with the match at `0` is followed immediately by a string that has a match later than index `11`:
88+
89+
```js
90+
console.log(regex.test("freeCodeCamp")); // true
91+
console.log(regex.test("I loooooooove freeCodeCamp")); // true
92+
```
93+
94+
When a regular expression is global, it gets a new property called `lastIndex`. Grabbing our previous code, let's see how this property works:
95+
96+
```js
97+
console.log(regex.lastIndex); // 0
98+
console.log(regex.test("freeCodeCamp")); // true
99+
console.log(regex.lastIndex); // 12
100+
console.log(regex.test("freeCodeCamp is great")); // false
101+
console.log(regex.lastIndex); // 0
102+
console.log(regex.test("I love freeCodeCamp")); // true
103+
console.log(regex.lastIndex); // 19
104+
console.log(regex.test("freecodecamp")); // false
105+
console.log(regex.lastIndex); // 0
106+
console.log(regex.test("FREECODECAMP")); // true
107+
console.log(regex.lastIndex); // 12
108+
console.log(regex.test("free")); // false
109+
console.log(regex.lastIndex); // 0
110+
console.log(regex.test("code")); // false
111+
console.log(regex.lastIndex); // 0
112+
console.log(regex.test("camp")); // false
113+
```
114+
115+
Looking at this example, you can see how the state of the regular expression changes with each test call using the `lastIndex` to track its previous matches.
116+
117+
The global flag is great when you need to get multiple matches from a single string. But if you're testing multiple strings with the same regular expression it's best to leave the `g` flag off.
118+
119+
Before learning about the next flag, you need to learn about anchors. The carrot (`^`) anchor, at the beginning of the regular expression, says "match the start of the string":
120+
121+
```js
122+
const start = /^freecodecamp/i;
123+
```
124+
125+
The dollar sign (`$`) anchor, at the end of the regular expression, says "match the end of the string":
126+
127+
```js
128+
const end = /freecodecamp$/i;
129+
```
130+
131+
Take a moment to compare the outputs on the right:
132+
133+
```js
134+
const start = /^freecodecamp/i;
135+
const end = /freecodecamp$/i;
136+
console.log(start.test("freecodecamp")); // true
137+
console.log(end.test("freecodecamp")); // true
138+
console.log(start.test("freecodecamp is great")); // true
139+
console.log(end.test("freecodecamp is great")); // false
140+
console.log(start.test("i love freecodecamp")); // false
141+
console.log(end.test("i love freecodecamp")); // true
142+
console.log(start.test("have met freecodecamp's founder")); // false
143+
console.log(end.test("have met freecodecamp's founder")); // false
144+
```
145+
146+
See how the start anchor only matches at the beginning of the string, and the end anchor only matches at the end of the string? But what about matching across multiple lines? Let's take a look at that:
147+
148+
```js
149+
const start = /^freecodecamp/i;
150+
const end = /freecodecamp$/i;
151+
const string = `I really love
152+
freecodecamp
153+
it's my favorite`;
154+
console.log(start.test(string)); // false
155+
console.log(end.test(string)); // false
156+
```
157+
158+
Even though `freecodecamp` is in there on its own line, it fails both tests. This is because, by default, anchors look for the beginning and end of the entire string.
159+
160+
But you can make a regex handle multiple lines with the `m` flag, or the multi-line modifier. Let's add that to our regular expressions to see what we get:
161+
162+
```js
163+
const start = /^freecodecamp/im;
164+
const end = /freecodecamp$/im;
165+
const string = `I really love
166+
freecodecamp
167+
it's my favorite`;
168+
console.log(start.test(string)); // true
169+
console.log(end.test(string)); // true
170+
```
171+
172+
Now they both match! Because the `freecodecamp` is entirely on its own line, the start anchor matches the beginning of that line, and the end anchor matches the end of that line.
173+
174+
Finally, you have the `d` flag, or indices modifier. Remember that the `i` flag is for case-insensitivity, so the indices modifier needed a different flag.
175+
176+
The `d` flag expands the information you get in a match object. Let's add it to our regular expression:
177+
178+
```js
179+
const regex = /freecodecamp/di;
180+
const string = "we love freecodecamp isn't freecodecamp great?";
181+
console.log(string.match(regex));
182+
```
183+
184+
And the result is:
185+
186+
```js
187+
// [
188+
// 'freecodecamp',
189+
// index: 8,
190+
// input: "we love freecodecamp isn't freecodecamp great?",
191+
// groups: undefined,
192+
// indices: [
193+
// 0: [8, 20],
194+
// groups: undefined
195+
// ]
196+
// ]
197+
```
198+
199+
Our match object gets a new `indices` property! This property is an array of two numbers, the first being the index in the original string where the match starts, and the second being the index after the match ended. This array also has an extra `groups` property, which is also for named capture groups.
200+
201+
There are a few other flags that you should know are available to you, but are less common in typical code.
202+
203+
The first is the unicode modifier, or `u` flag. This expands the functionality of a regular expression to allow it to match special unicode characters.
204+
205+
You'll learn more about character classes in a later lecture, but the `u` flag gives you access to special classes like `Extended_Pictographic` to match most emoji:
206+
207+
```js
208+
const regex = /🍎/u;
209+
210+
const str = "I have an apple 🍎";
211+
console.log(regex.test(str)); // true
212+
```
213+
214+
There is also a `v` flag, which further expands the functionality of the unicode matching.
215+
216+
The second is the sticky modifier, or the `y` flag. The sticky modifier behaves very similarly to the global modifier, but with a few exceptions.
217+
218+
The biggest one is that a global regular expression will start from `lastIndex` and search the entire remainder of the string for another match, but a sticky regular expression will return `null` and reset the `lastIndex` to `0` if there is not immediately a match at the previous `lastIndex`.
219+
220+
And the last is the single-line modifier, or the `s` flag. Remember that the multiline modifier allows start and end anchors to match the start and end of a line, instead of the entire string.
221+
222+
The single-line modifier allows a wildcard character, represented by a period (`.`) in regex, to match linebreaks – effectively treating the string as a single line of text.
223+
224+
There are quite a few of these modifiers, but the `i` and `g` flags are the ones you'll use most frequently, and are the most important to remember.
12225

13226
# --questions--
14227

0 commit comments

Comments
 (0)