How to Replace All Occurrences of a Word in a JavaScript String?

Let's assume we have the following string in which we wish to replace all occurrences of the word "foo" with "moo":

const str = 'foobar, foo bar, Foo bar, Foobar';

Using String.prototype.replaceAll()

Introduced in ES12, the replaceAll() method returns a new string with all matches replaced by the specified replacement. Similar to String.prototype.replace(), replaceAll() allows a string or a regular expression to find matches.

It is important to note that when using a regular expression to find matches with replaceAll(), you have to set the global ("g") flag; otherwise, it will throw a TypeError: "replaceAll must be called with a global RegExp".

Since replaceAll() was added in ES2021/ES12, it is only supported in modern browsers. If that is a concern for you, then you may use String.prototype.replace() instead (as it works in the same way and has great browser support). You must remember though, that by default replace() only replaces the first occurrence of a word. To ensure you replace all occurrences of a word, you must use it with the global ("g") flag.

Replace Any Occurrence of the Word:

If you wish to replace any occurrence of the word, even if it's a part of another word, then you can simply do something like the following:

// ES12+
const result = str.replaceAll('foo', 'moo');

// in older browsers
// const result = str.replace(/foo/g, 'moo');

console.log(result); // output: 'moobar, moo bar, Foo bar, Foobar'

To do the same in a case-insensitive way, you can simply use the word as a regular expression pattern with the "i" flag like so:

// ES12+
const result = str.replaceAll(/foo/gi, 'moo');

// in older browsers
// const result = str.replace(/foo/gi, 'moo');

console.log(result); // output: 'moobar, moo bar, moo bar, moobar'

Replace Only the Exact Matches of the Word:

If you wish to replace only the exact matches of the word (i.e. excluding matches where it is a part of another word), then using a regular expression, you can simply surround the string with a word boundary (\b) like so:

// ES12+
const result = str.replaceAll(/\bfoo\b/g, 'moo');

// in older browsers
// const result = str.replace(/\bfoo\b/g, 'moo');

console.log(result); // output: 'foobar, moo bar, Foo bar, Foobar'

To do the same in a case-insensitive way, you can simply add the "i" flag to the regular expression like so:

// ES12+
const result = str.replaceAll(/\bfoo\b/gi, 'moo');

// in older browsers
// const result = str.replace(/\bfoo\b/gi, 'moo');

console.log(result); // output: 'foobar, moo bar, moo bar, Foobar'

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

You can use split() and join() together to:

1. Split the string into an array by the word you wish to replace, and;
2. Join it back into a string with a replacement.

Replacing All Matches With a Case-Sensitive Search:

const result = str.split('foo').join('moo');

console.log(result); // output: 'moobar, moo bar, Foo bar, Foobar'

Replacing All Matches With a Case-Insensitive Search:

const result = str.split(/foo/i).join('moo');

console.log(result); // output: 'moobar, moo bar, moo bar, moobar'