feat(curriculum): add interactive examples to JavaScript Regular Expressions (#65314)

Co-authored-by: Jeevankumar-S <jeevenkumar2003@email.com>

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.