Replace multiple strings with multiple other strings

Replace multiple strings with multiple other strings

I’m trying to replace multiple words in a string with multiple other words. The string is “I have a cat, a dog, and a goat.”
However, this does not produce “I have a dog, a goat, and a cat”, but instead it produces “I have a cat, a cat, and a cat”. Is it possible to replace multiple strings with multiple other strings at the same time in JavaScript, so that the correct result will be produced?
var str = “I have a cat, a dog, and a goat.”;
str = str.replace(/cat/gi, “dog”);
str = str.replace(/dog/gi, “goat”);
str = str.replace(/goat/gi, “cat”);

//this produces “I have a cat, a cat, and a cat”
//but I wanted to produce the string “I have a dog, a goat, and a cat”.


Solution 1:

Specific Solution

You can use a function to replace each one.

var str = "I have a cat, a dog, and a goat.";
var mapObj = {
str = str.replace(/cat|dog|goat/gi, function(matched){
  return mapObj[matched];

jsfiddle example

Generalizing it

If you want to dynamically maintain the regex and just add future exchanges to the map, you can do this

new RegExp(Object.keys(mapObj).join("|"),"gi"); 

to generate the regex. So then it would look like this

var mapObj = {cat:"dog",dog:"goat",goat:"cat"};

var re = new RegExp(Object.keys(mapObj).join("|"),"gi");
str = str.replace(re, function(matched){
  return mapObj[matched];

And to add or change any more replacements you could just edit the map. 

Related:  how to generate Excel through Javascript [closed]

fiddle with dynamic regex

Making it Reusable

If you want this to be a general pattern you could pull this out to a function like this

function replaceAll(str,mapObj){
    var re = new RegExp(Object.keys(mapObj).join("|"),"gi");

    return str.replace(re, function(matched){
        return mapObj[matched.toLowerCase()];

So then you could just pass the str and a map of the replacements you want to the function and it would return the transformed string.

fiddle with function

To ensure Object.keys works in older browsers, add a polyfill eg from MDN or Es5.

Solution 2:

This may not meet your exact need in this instance, but I’ve found this a useful way to replace multiple parameters in strings, as a general solution. It will replace all instances of the parameters, no matter how many times they are referenced:

String.prototype.fmt = function (hash) {
        var string = this, key; for (key in hash) string = string.replace(new RegExp('\\{' + key + '\\}', 'gm'), hash[key]); return string

You would invoke it as follows:

var person = '{title} {first} {last}'.fmt({ title: 'Agent', first: 'Jack', last: 'Bauer' });
// person = 'Agent Jack Bauer'

Solution 3:

This worked for me:

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.replace(new RegExp(search, 'g'), replacement);

function replaceAll(str, map){
    for(key in map){
        str = str.replaceAll(key, map[key]);
    return str;

var str = "bat, ball, cat";
var map = {
    'bat' : 'foo',
    'ball' : 'boo',
    'cat' : 'bar'
var new = replaceAll(str, map);
//result: "foo, boo, bar"

Solution 4:

Use numbered items to prevent replacing again.

let str = "I have a %1, a %2, and a %3";
let pets = ["dog","cat", "goat"];


str.replace(/%(\d+)/g, (_, n) => pets[+n-1])

How it works:-
%\d+ finds the numbers which come after a %. The brackets capture the number.

Related:  How to get base64 encoded data from html image

This number (as a string) is the 2nd parameter, n, to the lambda function.

The +n-1 converts the string to the number then 1 is subtracted to index the pets array.

The %number is then replaced with the string at the array index.

The /g causes the lambda function to be called repeatedly with each number which is then replaced with a string from the array.

In modern JavaScript:-


Solution 5:

user regular function to define the pattern to replace and then use replace function to work on input string,

var i = new RegExp('"{','g'),
    j = new RegExp('}"','g'),
    k = data.replace(i,'{').replace(j,'}');

Solution 6:

Just in case someone is wondering why the original poster’s solution is not working:

var str = "I have a cat, a dog, and a goat.";

str = str.replace(/cat/gi, "dog");
// now str = "I have a dog, a dog, and a goat."

str = str.replace(/dog/gi, "goat");
// now str = "I have a goat, a goat, and a goat."

str = str.replace(/goat/gi, "cat");
// now str = "I have a cat, a cat, and a cat."