Update:
It's somewhat late for an update, but since I just stumbled on this question, and noticed that my previous answer is not one I'm happy with. Since the question involved replacing a single word, it's incredible nobody thought of using word boundaries [\b
]
'a cat is not a caterpillar'.replace[/\bcat\b/gi,'dog'];
//"a dog is not a caterpillar"
This is a simple regex that avoids replacing parts of words in most cases. However, a dash -
is still considered a word boundary. So conditionals can be
used in this case to avoid replacing strings like cool-cat
:
'a cat is not a cool-cat'.replace[/\bcat\b/gi,'dog'];//wrong
//"a dog is not a cool-dog" -- nips
'a cat is not a cool-cat'.replace[/[?:\b[[^-]]]cat[?:\b[[^-]]]/gi,'$1dog$2'];
//"a dog is not a cool-cat"
Basically, this question is the same as the question here: Javascript replace " ' " with " '' "
@Mike, check the answer I gave there... regexp isn't the only way to replace multiple occurrences of a subsrting, far from it. Think flexible, think split!
var newText = "the cat looks like a cat".split['cat'].join['dog'];
Alternatively, to prevent replacing word parts -which the approved answer will do, too! You can get around this issue using regular expressions that are, I admit, somewhat more complex and as an upshot of that, a tad slower, too:
var regText = "the cat looks like a cat".replace[/[?:[^|[^a-z]]][[[^a-z]*][?=cat]cat][?![a-z]]/gi,"$1dog"];
The output is the same as the accepted answer, however, using the /cat/g
expression on this string:
var oops = 'the cat looks like a cat, not a caterpillar or coolcat'.replace[/cat/g,'dog'];
//returns "the dog looks like a dog, not a dogerpillar or cooldog" ??
Oops indeed, this probably isn't what you want. What is, then? IMHO, a regex that only replaces 'cat' conditionally. [ie not part of a word], like so:
var caterpillar = 'the cat looks like a cat, not a caterpillar or coolcat'.replace[/[?:[^|[^a-z]]][[[^a-z]*][?=cat]cat][?![a-z]]/gi,"$1dog"];
//return "the dog looks like a dog, not a caterpillar or coolcat"
My guess is, this meets your needs. It's not fullproof, of course, but it should be enough to get you started. I'd recommend reading some more on these pages. This'll prove useful in perfecting this expression to meet your specific needs.
//www.javascriptkit.com/jsref/regexp.shtml
//www.regular-expressions.info
Final addition:
Given that this question still gets a lot of views, I thought I might add an example of .replace
used with a callback function. In this case, it dramatically simplifies the expression and provides even more flexibility, like replacing with correct capitalisation or replacing both cat
and cats
in one go:
'Two cats are not 1 Cat! They\'re just cool-cats, you caterpillar'
.replace[/[^|.\b][cat][s?\b.|$]/gi,function[all,char1,cat,char2]
{
//check 1st, capitalize if required
var replacement = [cat.charAt[0] === 'C' ? 'D' : 'd'] + 'og';
if [char1 === ' ' && char2 === 's']
{//replace plurals, too
cat = replacement + 's';
}
else
{//do not replace if dashes are matched
cat = char1 === '-' || char2 === '-' ? cat : replacement;
}
return char1 + cat + char2;//return replacement string
}];
//returns:
//Two dogs are not 1 Dog! They're just cool-cats, you caterpillar
There's no easy way to replace all string occurrences in JavaScript. Java, which had served an inspiration for JavaScript in the first days, has the replaceAll[]
method on strings since 1995!
In this post, you'll learn how to replace all string occurrences in JavaScript by splitting and joining a string, and string.replace[]
combined with a global regular expression.
Moreover, you'll read about the new proposal string.replaceAll[] [at stage 4] that brings the replace all method to JavaScript strings. This is the most convenient approach.
1. Splitting and joining an array
If you google how to "replace all string occurrences in JavaScript", most likely the first approach you'd find is to use an intermediate array.
Here's how it works:
- Split the
string
intopieces
by thesearch
string:
javascript
const pieces = string.split[search];
- Then join the pieces putting the
replace
string in between:
javascript
const resultingString = pieces.join[replace];
For example, let's replace all spaces ' '
with hyphens '-'
in 'duck duck go'
string:
javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.split[search].join[replaceWith];
result; // => 'duck-duck-go'
'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:
javascript
function replaceAll[string, search, replace] {
return string.split[search].join[replace];
}
replaceAll['abba', 'a', 'i']; // => 'ibbi'
replaceAll['go go go!', 'go', 'move']; // => 'move move move!'
replaceAll['oops', 'z', 'y']; // => 'oops'
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:
- Append
g
after at the end of regular expression literal:/search/g
- Or when using a regular expression constructor, add
'g'
to the second argument:new RegExp['search', 'g']
Let's replace all occurrences of ' '
with '-'
:
javascript
const searchRegExp = /\s/g;
const replaceWith = '-';
const result = 'duck duck go'.replace[searchRegExp, replaceWith];
result; // => 'duck-duck-go'
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:
javascript
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:
javascript
const search = '+';
const searchRegExp = new RegExp[search, 'g']; // Throws SyntaxError
const replaceWith = '-';
const result = '5+2+1'.replace[searchRegExp, replaceWith];
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.
Nevertheless, does it worth escaping the search string using a function like escapeRegExp[] to be used as a regular expression? Most likely not.
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
:
javascript
const search = ' ';
const replace = '-';
const result = 'duck duck go'.replace[search, replace];
result; // => 'duck-duck go'
'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 '-'
:
javascript
const search = ' ';
const replaceWith = '-';
const result = 'duck duck go'.replaceAll[search, replaceWith];
result; // => 'duck-duck-go'
'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 currently, the method support in browsers is 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, expect 2 things:
- If
search
argument is a string,replaceAll[]
replaces all occurrences ofsearch
withreplaceWith
, whilereplace[]
only the first occurence - If
search
argument is a non-global regular expression, thenreplaceAll[]
throws aTypeError
exception.
4. Key takeaway
The primitive approach to replace all occurrences is to split the string into chunks by the search string, the join back the
string placing the replace string between 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. And dealing with a regular expression for a simple replacement of strings is overwhelming.
Finally, the new string method
string.replaceAll[search, replaceWith]
replaces all string occurrences. The method is a proposal at stage 4, and hopefully, it will land in a new JavaScript standard pretty soon.
My recommendation is to use string.replaceAll[]
to replace strings.
What other ways to replace all string occurrences do you know? Please share in a comment below!