A rabbit working with JS RegEx code

👋 Welcome Back, Code Adventurer!

Today, we’re diving into one of the most fascinating powers of JavaScript — Regular Expressions (RegExp). They’re like magical goggles that let you find, replace, or cut apart parts of a string with amazing precision.

Whenever you see strange symbols like /a-z/, /[0-9]+/, or /cat/gi, that’s RegExp in action!

JavaScript provides four powerful methods that work beautifully with these expressions:

  • 🔍 match() – find what fits the pattern
  • 🔄 replace() – swap what matches with something else
  • ✂️ split() – slice your string wherever the pattern appears
  • 🧭 search() – locate where the pattern begins

Let’s explore each of them in story form! 🚀

🧪 1. match() – Find Patterns in a String

The .match() method is your pattern detector.

It scans through your sentence and tells you what it found.

console.log("string".match(/[i-n]+/)); // → ["in"]

💬 Here’s what happens:

  • [i-n] means “match any letter from i to n”.
  • + means “one or more of them”.
  • "string" has "in", so .match() returns ["in"].

If you add capturing groups, .match() becomes even more insightful:

console.log("string".match(/(r)[i-n]+/)); // → ["rin", "r"]

It tells you:

  • "rin" → the full part it matched
  • "r" → the smaller captured piece inside parentheses

💡 Think of capturing groups like saying,

“Hey JavaScript, remember this small piece for me too!”

🛠️ 2. replace() – Replace Patterns with Something Else

When .match() finds something, .replace() says:

“Now that I found it, let’s change it!”

console.log("string".replace(/[i-n]+/, "foo")); // → strfoog

🧠 What’s happening?

  • [i-n]+ finds "in"
  • "in" is replaced with "foo"
  • "string" becomes "strfoog"

That’s how .replace() gives your text a makeover! ✨ You can even use regex flags like /g to replace all matches at once.

✂️ 3. split() – Split String by the Match

Now, what if you want to cut your string each time a pattern appears?

.split() does exactly that!

console.log("stringstring".split(/[i-n]+/)); // → ["str", "gstr", "g"]

Here’s the breakdown:

  • Every time it finds "in", it slices the string there.
  • "stringstring" gets split into three parts: ["str", "gstr", "g"]

🧩 Think of .split() as a scissor that cuts wherever the pattern appears.

🔍 4. search() – Find the Index of the Match

Finally, .search() is your navigator. It doesn’t show the match itself — just where it begins.

console.log("string".search(/[i-n]+/)); // → 3
console.log("string".search(/[o-q]+/)); // → -1

🎯 Explanation:

  • The first pattern finds "in" starting at index 3.
  • The second pattern finds nothing, so it returns -1.

When .search() says -1, it simply means:

“No match found!”

📋 Summary Table

🧰 Method 🎯 What It Does 💬 What It Returns
match() Finds and returns matching content Array of matches
replace() Replaces matched content with new text New string after replacement
split() Splits string by matched pattern Array of split parts
search() Finds index of the first match or -1 Number (position of match)

🧩 Think of It Like This:

Imagine your string is a long ribbon of words 🎀

  • 🧲 match() finds the beads that fit a pattern.
  • ✨ replace() swaps some beads for new ones.
  • ✂️ split() cuts the ribbon wherever a bead appears.
  • 📍 search() tells you where the first bead is.

Now you see how regex makes you a text sculptor! 🧑🏾‍💻

🧠 Practice Review – Fill in the Gaps

Let’s test your mastery! Fill in the missing words below 👇

  1. The .match() method is used to __ patterns in a string.
  2. [i-n]+ means match any letter from i to n, one or __ times.
  3. Capturing groups in regex are written inside __.
  4. The .replace() method replaces matched parts of a string with __.
  5. Using the g flag in regex allows .replace() to affect __ matches.
  6. .split() breaks a string into an __ of pieces wherever a pattern is found.
  7. The .search() method returns the __ where a match starts.
  8. If .search() can’t find a match, it returns __.
  9. In the example "string".match(/(r)[i-n]+/), the full match is "_____" and the captured group is "_____".
  10. Regular expressions are used in JavaScript to __, __, __, or __ inside strings.
<
Previous Post
🧠 Input and Output Devices: The Post Office Analogy
>
Next Post
My Journey From School Labs to Celebrated Tech Trainer ✨