From 1fc9a057f4124e2bb1585d3f2e5b27ff47a99d62 Mon Sep 17 00:00:00 2001 From: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com> Date: Tue, 20 Jan 2026 16:33:53 +0530 Subject: [PATCH] feat(curriculum): add interactive examples to JavaScript Regular Expressions (#65314) Co-authored-by: Jeevankumar-S --- .../6723cdfa4ae237bf6b7e32eb.md | 51 ++++++++++++++++++- 1 file changed, 49 insertions(+), 2 deletions(-) diff --git a/curriculum/challenges/english/blocks/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md b/curriculum/challenges/english/blocks/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md index 2391aba950c..2e269b18397 100644 --- a/curriculum/challenges/english/blocks/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md +++ b/curriculum/challenges/english/blocks/review-javascript-regular-expressions/6723cdfa4ae237bf6b7e32eb.md @@ -5,7 +5,7 @@ challengeType: 31 dashedName: review-javascript-regular-expressions --- -# --description-- +# --interactive-- ## Regular Expressions and Common Methods @@ -17,22 +17,32 @@ const regex = /freeCodeCamp/; - **`test()` Method**: This method accepts a string, which is the string to test for matches against the regular expression. This method will return a boolean if the string matches the regex. +:::interactive_editor + ```js const regex = /freeCodeCamp/; const test = regex.test("e"); console.log(test); // false ``` +::: + - **`match()` Method**: This method accepts a regular expression, although you can also pass a string which will be constructed into a regular expression. The `match` method returns the match array for the string. +:::interactive_editor + ```js const regex = /freeCodeCamp/; const match = "freeCodeCamp".match(regex); console.log(match); // ["freeCodeCamp"] ``` +::: + - **`replace()` Method**: This method accepts two arguments: the regular expression to match (or a string), and the string to replace the match with (or a function to run against each match). +:::interactive_editor + ```js const regex = /Jessica/; const str = "Jessica is rly kewl"; @@ -40,16 +50,24 @@ const replaced = str.replace(regex, "freeCodeCamp"); console.log(replaced); // "freeCodeCamp is rly kewl" ``` +::: + - **`replaceAll` Method**: This method is used to replace all occurrences of a specified pattern with a new string. This method will throw an error if you give it a regular expression without the global modifier. +:::interactive_editor + ```js const text = "I hate JavaScript! I hate programming!"; const newText = text.replaceAll("hate", "love"); console.log(newText); // "I love JavaScript! I love programming!" ``` +::: + - **`matchAll` Method**: This method is used to retrieve all matches of a given regular expression in a string, including capturing groups, and returns them as an iterator. An iterator is an object that allows you to go through (or "iterate over") a collection of items. +:::interactive_editor + ```js const str = "JavaScript, Python, JavaScript, Swift, JavaScript"; const regex = /JavaScript/g; @@ -61,27 +79,39 @@ for (let match of iterator) { } ``` +::: + ## Regular Expression Modifiers - **Definition**: Modifiers, often referred to as "flags", modify the behavior of a regular expression. - **`i` Flag**: This flag makes a regex ignore case. +:::interactive_editor + ```js const regex = /freeCodeCamp/i; console.log(regex.test("freecodecamp")); // true console.log(regex.test("FREECODECAMP")); // true ``` +::: + - **`g` Flag**: This flag, or global modifier, allows your regular expression to match a pattern more than once. +:::interactive_editor + ```js const regex = /freeCodeCamp/gi; console.log(regex.test("freeCodeCamp")); // true console.log(regex.test("freeCodeCamp is great")); // false ``` +::: + - **Anchor Definition**: The `^` anchor, at the beginning of the regular expression, says "match the start of the string". The `$` anchor, at the end of the regular expression, says "match the end of the string". +:::interactive_editor + ```js const start = /^freeCodeCamp/i; const end = /freeCodeCamp$/i; @@ -89,8 +119,12 @@ console.log(start.test("freecodecamp")); // true console.log(end.test("freecodecamp")); // true ``` +::: + - **`m` Flag**: Anchors look for the beginning and end of the entire string. But you can make a regex handle multiple lines with the `m` flag, or the multi-line modifier.flag, or the multi-line modifier. +:::interactive_editor + ```js const start = /^freecodecamp/im; const end = /freecodecamp$/im; @@ -100,17 +134,22 @@ it's my favorite `; console.log(start.test(str)); // true console.log(end.test(str)); // true - ``` +::: + - **`d` Flag**: This flag expands the information you get in a match object. +:::interactive_editor + ```js const regex = /freecodecamp/di; const string = "we love freecodecamp isn't freecodecamp great?"; console.log(string.match(regex)); ``` +::: + - **`u` Flag**: This expands the functionality of a regular expression to allow it to match special unicode characters. The `u` flag gives you access to special classes like the `Extended_Pictographic` to match most emoji. There is also a `v` flag, which further expands the functionality of the unicode matching. - **`y` Flag**: The sticky modifier behaves very similarly to the global modifier, but with a few exceptions. 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. - **`s` Flag**: The single-line modifier allows a wildcard character, represented by a `.` in regex, to match linebreaks - effectively treating the string as a single line of text. @@ -206,19 +245,27 @@ const regex = /free(?:code)camp/i; - **Backreferences**: A backreference in regular expressions refers to a way to reuse a part of the pattern that was matched earlier in the same expression. It allows you to refer to a captured group (a part of the pattern in parentheses) by its number. For example, `$1` refers to the first captured group. +:::interactive_editor + ```js const regex = /free(co+de)camp/i; console.log("freecoooooooodecamp".replace(regex, "paid$1world")); ``` +::: + - You can use backreferences within the regex itself to match the same text captured by a previous group with a backslash and the capture group number. For example: +:::interactive_editor + ```js const regex = /(hello) \1/i; console.log(regex.test("hello hello")); // true console.log(regex.test("hello world")); // false ``` +::: + # --assignment-- Review the JavaScript Regular Expressions topics and concepts.