5 Simple Ways to Replace All String Occurrences in JavaScript

Have you ever been in a situation where you had a string of text and wanted to replace all of its occurrences with something else? It is often a challenge for beginners, especially in JavaScript.

Whether you are developing an application, working on a website or writing a script, here are five simple ways you can replace all string occurrences in JavaScript.

Each method has its own set of use cases and benefits. No matter the situation, you'll be sure to find the right approach for your project.

I will show you how to use the built-in methods from the String object and from external libraries like lodash, apart from more creative methods like using Regular Expressions.

So without further ado, let's get started on replacing all string occurrences in JavaScript.

Using the String.prototype.replace() Method

Do you often find yourself needing to replace all occurrences of a word or phrase in a string? Then you've come to the right place.

JavaScript has multiple methods for replacing strings, one of which is the String.prototype.replace() method.

This method has two compulsory parameters—the substring which needs to be replaced, and what it needs to be replaced with—and two optional ones—one that limits the number of replacement occurrences and another that captures matches into an array.

Let's look at an example: You can use this method to replace all instances of "cat" in the sentence "I like cats" with "dog":

const newSentence = 'I like cats'.replace('cat', 'dog');
console.log(newSentence) // Output: I like dogs

If you want to replace more than one word in a sentence, then simply add them both into the first parameter with a regular expression, like so:

const newSentence = 'I like cats'.replace(/cat|cats/, 'dog');
console.log(newSentence) // Output: I like dog

Using the String.prototype.replace() with a function

One simple and straightforward way to replace all string occurrences in JavaScript is to use the String.prototype.replace() call. This method takes in two parameters, a target substring (the string you want to find and replace) and the replacement string (which is what you want the target substring to be replaced with).

In some cases, you may also need to pass in a function as the second parameter instead of a simple string.

This is useful for cases where the replacement string needs to be “dynamic” or dependent on the context of the target substring.

For example, let's say you were writing a program that had a lot of references to outdated APIs that needed updating.

Instead of changing each reference by hand, you could use String.prototype.replace() with a function that would check each reference against an API list and update it accordingly.

The syntax looks something like this: stringVar.replace(targetSubstring,(substring) => {return //your code here}, ).

As you can see, this is an incredibly powerful way to replace all string occurrences in JavaScript with relative ease!

Using the String.prototype.replaceAll()

When it comes to making such replacement, the String.prototype.replaceAll() method is one of the simplest and most efficient way to do it.

It's a handy tool for searching and replacing a sub-string or character patterns in a larger string.

Using this method, you can easily replace all occurrences of a character or string within a larger one.

Here's an example of how to use String.prototype.replaceAll():

let str = 'My name is John.';
// Replacement using replaceAll() method
str = str.replaceAll('John', 'Alice');
// Prints 'My name is Alice.'
console.log(str);

So all you need to do is pass two parameters in the function — the sub-string you want to replace in the original string and the replacement sub-string (which can be another word, character or phrase).

The replaceAll() replaces all occurrences of “John” with “Alice”, so that ‘My name is John’ gets replaced with ‘My name is Alice’!

Using the JavaScript's Regular Expression Syntax

When the pattern you want to match is a bit more complex, you might want to consider using the JavaScript's Regular Expression syntax. This is incredibly powerful and it can help you to easily replace all occurrences of a certain string in one go.

Let's take a look at how it works.

You can use the String replace() method with a regular expression specified as its first argument. This regular expression uses what are called capturing groups, denoted by parentheses ( ), which allow you to match multiple strings and then access them individually later on.

The second argument of replace() will be the replacement string, which will use the captured strings from the regular expression — in this case we'll be using the $1 and $2 syntax for access them.

So let's say that you wanted to replace all occurrences of 'JavaScript' in some text with 'ECMAScript', then your code would look like this:

str = str.replace(/javascript/i, 'ECMAScript');

Here, we've used /javascript/i as our pattern - notice the forward slashes (/) at either end - which means that we're matching any instance of 'JavaScript', regardless of its case (the i flag denotes that).

In our replacement string we've used ‘ECMAScript’ so that it replaces any occurrences of ‘JavaScript’ wherever it appears in our text.

Using String.prototype.split() and Array.prototype.join()

The fifth option for replacing all string occurrences is to use the String.prototype.split() and Array.prototype.join() methods:

let str = 'hello world';
let newStr = str.split('o').join('O');
console.log(newStr); // hellO wOrld

The split() method will create an array, and the join() method will join all elements in the array with a chosen character or string.

The string passed into the split() method is a delimiter, which specifies how many pieces or segments to split a string into.

It works by scanning through each element of the array, and when it finds a character (or characters) that match the one specified in thesplit(), it divides that array into separate elements based on these characters, then removes them from the string altogether.

The output created by using this method can easily be used to chain other methods as well, allowing you to do more creative things with your strings:

let str = 'Hello World';
let newStr = str.split('l').join('').toUpperCase();
console.log(newStr); // HEO WORD

Conclusion

In conclusion, when it comes to replacing strings in JavaScript, there are a few different approaches you can take. Whether you are looking for a straightforward solution to a simple task, or a more complex regex problem—you have the ability to build a robust program that can handle any string replacement logic you need.

With these five simple ways to replace all string occurrences in JavaScript, you can now confidently tackle any string replacement task that comes your way. So get out there and start coding!

Read More

• Data Binding in React
• join() - MDN
• Polymorphism in JavaScript