feat(curriculum): add interactive examples to regex methods lesson (#63617)

Co-authored-by: VAMSHIDHAR <vamshianjireddy@gmail.com>

curriculum/challenges/english/blocks/lecture-working-with-regular-expressions/6733aad43b3ebff588a26fb5.md

@@ -5,7 +5,7 @@ challengeType: 19
 dashedName: what-are-regular-expressions-and-what-are-some-common-methods
 ---
 
-# --description--
+# --interactive--
 
 Regular expressions, or regex, are a feature supported by many different programming languages.
 
@@ -25,22 +25,24 @@ That brings us to our first method – the `test()` method. The `test()` method
 
 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`:
 
+:::interactive_editor
+
 ```js
 const regex = /freeCodeCamp/;
 const test = regex.test("e");
 console.log(test);
 ```
 
-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:
+:::
 
-```js
-console.log(test); // false
-```
+You can see we've called the `test()` method on our new regex, and passed the string `e` as the argument. 
 
 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.
 
 Let's take a look at a few more examples. Take a moment to consider these:
 
+:::interactive_editor
+
 ```js
 const regex = /freeCodeCamp/;
 console.log(regex.test("freeCodeCamp"));
@@ -53,21 +55,9 @@ console.log(regex.test("code"));
 console.log(regex.test("camp"));
 ```
 
-What do you think each line will print? Well, here's the result:
+:::
 
-```js
-const regex = /freeCodeCamp/;
-console.log(regex.test("freeCodeCamp")); // true
-console.log(regex.test("freeCodeCamp is great")); // true
-console.log(regex.test("I love freeCodeCamp")); // true
-console.log(regex.test("freecodecamp")); // false
-console.log(regex.test("FREECODECAMP")); // false
-console.log(regex.test("free")); // false
-console.log(regex.test("code")); // false
-console.log(regex.test("camp")); // false
-```
-
-Did that surprise you? Notice how the first three strings returned `true`. These strings all contain the text, `freeCodeCamp`, exactly, somewhere in the string. 
+Notice how the first three strings returned `true`. These strings all contain the text, `freeCodeCamp`, exactly, somewhere in the string. 
 
 Lines 5 and 6 return `false`. While they contain the text `freecodecamp`, the case does not match. Regular expressions are case-sensitive by default.
 
@@ -88,7 +78,6 @@ console.log(match);
 If we run this, we get an array back! But it's a strange looking array. It's got some extra properties:
 
 ```js
-console.log(match);
 // [
 //   'freeCodeCamp',
 //   index: 0,
@@ -140,6 +129,8 @@ Now, strings have a `replace()` method which accepts two arguments: the regular
 
 So if we wanted to replace our `freecodecamp` with the proper casing:
 
+:::interactive_editor
+
 ```js
 const regex = /freecodecamp/;
 const str = "freecodecamp is rly kewl";
@@ -147,11 +138,7 @@ const replaced = str.replace(regex, "freeCodeCamp");
 console.log(replaced);
 ```
 
-And we'll peek at the result:
-
-```js
-console.log(replaced); // freeCodeCamp is rly kewl
-```
+:::
 
 You can see that `replace()` returns the updated string with the matching pattern `replaced`.