Post cover

3 Ways To Replace All String Occurrences in JavaScript

Updated January 27, 2023

In this post, you'll learn how to replace all string occurrences in JavaScript by splitting and joining a string, string.replace() combined with a global regular expression, and string.replaceAll().

Before I go on, let me recommend something to you.

The path to becoming good at JavaScript isn't easy... but fortunately with a good teacher you can shortcut.

Take "Modern JavaScript From The Beginning 2.0" course by Brad Traversy to become proficient in JavaScript in just a few weeks. Use the coupon code DMITRI and get your 20% discount!

1. Splitting and joining an array

If you google how to "replace all string occurrences in JavaScript", the first approach you are likely to find is to use an intermediate array.

Here's how it works:

  1. Split the string into pieces by the search string:

const pieces = string.split(search);

  1. Then join the pieces putting the replace string in between:

const resultingString = pieces.join(replace);

For example, let's replace all spaces ' ' with hyphens '-' in 'duck duck go' string:


const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split(search).join(replaceWith);
console.log(result); // => 'duck-duck-go'

Open the demo.

'duck duck go'.split(' ') splits the string into pieces: ['duck', 'duck', 'go'].

Then the pieces ['duck', 'duck', 'go'].join('-') are joined by inserting '-' in between them, which results in the string 'duck-duck-go'.

Here's a generalized helper function that uses splitting and joining approach:


function replaceAll(string, search, replace) {
return string.split(search).join(replace);
}
console.log(replaceAll('abba', 'a', 'i')); // => 'ibbi'
console.log(replaceAll('go go go!', 'go', 'move')); // => 'move move move!'
console.log(replaceAll('oops', 'z', 'y')); // => 'oops'

Open the demo.

This approach requires transforming the string into an array, and then back into a string. Let's continue looking for better alternatives.

2. replace() with a global regular expression

The string method string.replace(regExpSearch, replaceWith) searches and replaces the occurrences of the regular expression regExpSearch with replaceWith string.

To make the method replace() replace all occurrences of the pattern - you have to enable the global flag on the regular expression:

  1. Append g to the end of regular expression literal: /search/g
  2. Or when using a regular expression constructor, add 'g' to the second argument: new RegExp('search', 'g')

Let's replace all occurrences of ' ' with '-':


const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace(searchRegExp, replaceWith);
console.log(result); // => 'duck-duck-go'

Open the demo.

The regular expression literal /\s/g (note the g global flag) matches the space ' '.

'duck duck go'.replace(/\s/g, '-') replaces all matches of /\s/g with '-', which results in 'duck-duck-go'.

You can easily make case insensitive replaces by adding i flag to the regular expression:


const searchRegExp = /duck/gi;
const replaceWith = 'goose';
const result = 'DUCK Duck go'.replace(searchRegExp, replaceWith);
result; // => 'goose goose go'

The regular expression /duck/gi performs a global case-insensitive search (note i and g flags). /duck/gi matches 'DUCK', as well as 'Duck'.

Invoking 'DUCK Duck go'.replace(/duck/gi, 'goose') replaces all matches of /duck/gi substrings with 'goose'.

2.1 Regular expression from a string

When the regular expression is created from a string, you have to escape the characters - [ ] / { } ( ) * + ? . \ ^ $ | because they have special meaning within the regular expression.

Because of that, the special characters are a problem when you'd like to make replace all operation. Here's an example:


const search = '+';
const searchRegExp = new RegExp(search, 'g'); // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace(searchRegExp, replaceWith);

Open the demo.

The above snippet tries to transform the search string '+' into a regular expression. But '+' is an invalid regular expression, thus SyntaxError: Invalid regular expression: /+/ is thrown.

Escaping the character '\\+' solves the problem. Try the fixed demo.

2.2 replace() with a string

If the first argument search of string.replace(search, replaceWith) is a string, then the method replaces only the first occurrence of search:


const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace(search, replace);
console.log(result); // => 'duck-duck go'

Open the demo.

'duck duck go'.replace(' ', '-') replaces only the first appearance of a space.

3. replaceAll() method

Finally, the method string.replaceAll(search, replaceWith) replaces all appearances of search string with replaceWith.

Let's replace all occurrences of ' ' with '-':


const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.replaceAll(search, replaceWith);
console.log(result); // => 'duck-duck-go'

Open the demo.

'duck duck go'.replaceAll(' ', '-') replaces all occurrences of ' ' string with '-'.

string.replaceAll(search, replaceWith) is the best way to replace all string occurrences in a string

Note that browser support for this method is currently limited, and you might require a polyfill.

3.1 The difference between replaceAll() and replace()

The string methods replaceAll(search, replaceWith) and replace(search, replaceWith) work the same way, except 2 things:

  1. If search argument is a string, replaceAll() replaces all occurrences of search with replaceWith, while replace() replaces only the first occurence
  2. If search argument is a non-global regular expression, then replaceAll() throws a TypeError exception.

4. Key takeaway

The first approach to replacing all occurrences is to split the string into chunks by the search string and then join back the string, placing the replace string between the chunks: string.split(search).join(replaceWith). This approach works, but it's hacky.

Another approach is to use string.replace(/SEARCH/g, replaceWith) with a regular expression having the global flag enabled.

Unfortunately, you cannot easily generate regular expressions from a string at runtime, because the special characters of regular expressions have to be escaped.

Finally, the string method string.replaceAll(search, replaceWith) replaces all string occurrences.

I recommend using string.replaceAll() to replace strings.

What other ways to replace all string occurrences do you know? Please share in a comment below!

Like the post? Please share!

Dmitri Pavlutin

About Dmitri Pavlutin

Software developer and sometimes writer. My daily routine consists of (but not limited to) drinking coffee, coding, writing, overcoming boredom 😉. Living in the sunny Barcelona. 🇪🇸