The Replacements JavaScript Algorithm

Picture from The New Yorker

In previous posts, I shared how I Seek and Destroy. I also shared how to use a Regex to change syllables and do a Pig Latin game on the computer. This time, I’d like to share how to do replacements on a string of data. Let’s do the replacement algorithm, two different ways.

Solution 1 — Using .replace()

In this solution, we’ll code the .replace() algorithm using the .indexOf() and .charAt() and manipulate the characters on the string with .toUpperCase() and .toLowerCase().

const index = str.indexOf(before);

We start by creating a variable that will look for the index where ‘before’ is in the string.

if (str[index] === str[index].toUpperCase()) {
  after = after.charAt(0).toUpperCase() + after.slice(1) ||     after.charAt(0).toLowerCase()
}

In this conditional statement, if the ‘before’ word starts with the upper case character, we change the ‘after’ word’s first letter to the upper case character.

return str.replace(before, after);

Then, we’ll ask the computer to return us the replacement.

Here’s the full version:

function theReplacement1(str, before, after) {
   const index = str.indexOf(before);
   
   if (str[index] === str[index].toUpperCase()) {
       after = after.charAt(0).toUpperCase() + after.slice(1) ||     after.charAt(0).toLowerCase()
}
   return str.replace(before, after);
};

If we run the code with the following string.

theReplacement1("The Replacements: Punk Rock band from Minnesota.", "Punk", "alternative")

Will return this information about a band’s leaving their DIY roots.

The Replacements: Alternative Rock band from Minnesota.

This is such a jam!

Solution 2 — Using .split and .join

What if I tell you there are other ways to do this? Though .replace looks very straightforward, you’ll never know if you come across a code using the .split() method for cutting the string into pieces and then using .join() to get that word they’ll replace in that string. Using these methods is way more common than we might think.

const index = str.indexOf(before);
if (str[index] === before[0].toUpperCase()) {
   after = after[0].toUpperCase() + after.slice(1)
}

Like the previous solution, we’re locating the index of the before word. Followed by the conditional statement, it’s a shorter version of the one we did before, which does the same thing with the capital letters.

return str.split(before).join(after);

We’ll return the string calling it with the split and join methods for the computer to return that string with the changes we want.

Here’s a complete function. Look at how beautiful JavaScript can look.

function theReplacement2(str, before, after) {
   const index = str.indexOf(before);
   
   if (str[index] === before[0].toUpperCase()) {
      after = after[0].toUpperCase() + after.slice(1)
   }
   return str.split(before).join(after);
}

So if I run this function writing this statement in the string:

theReplacement2(“The Replacements is the best band to ever come out of Minnesota.”, “The Replacements”, “hüsker Dü”);

The computer will fix it for me:

Hüsker Dü is the best band to ever come out of Minnesota.

I do apologize, but Hüsker Dü is the best band.

As you can see, these are only two ways to do it. But like many other algorithms, there are more ways to replace and do changes on strings. There’s the mighty .replaceAll(), which can you can use to replace spaces for dashes and other activities.

I hope you liked these two solutions and learned something new to practice codes or implement in your projects.

Happy coding!

Summary

1. Intro to the Replace algorithm.
2. Solution using .replace()
3. Solution using .split() and .join()
4. Conclusion

References

1. MDN Web Docs, String