How to Efficiently Replace Multiple Strings in JavaScript?

Mass Replacement of Strings in JavaScript

The task of replacing multiple words in a string with different ones arises frequently in programming. Consider the following scenario:

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

We want to transform this string into "I have a dog, a goat, and a cat" by replacing "cat" with "dog", "dog" with "goat", and "goat" with "cat".

Problem: Consecutive Replacements Lead to Incorrect Output

A naive approach would involve using the replace() method multiple times:

str = str.replace(/cat/gi, "dog");
str = str.replace(/dog/gi, "goat");
str = str.replace(/goat/gi, "cat");

Unfortunately, this code produces the incorrect result: "I have a cat, a cat, and a cat". This is because the second and third replacements overwrite the changes made by the previous ones.

Solution: Using a Map and a Custom Replacement Function

To address this issue, we need a more comprehensive approach that replaces all the target words simultaneously. This can be achieved by defining a map object that contains the replacements and using a custom replacement function:

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

const str = str.replace(/cat|dog|goat/gi, (matched) => {
  return mapObj[matched];
});

Dynamically Generating the Regex Pattern

To make the solution more generalizable, we can dynamically generate the regular expression pattern based on the keys of the map object:

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

const str = str.replace(re, (matched) => {
  return mapObj[matched];
});

Reusable Function for Mass String Replacement

Finally, we can encapsulate this approach into a reusable function:

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

  return str.replace(re, (matched) => {
    return mapObj[matched.toLowerCase()];
  });
};

This function takes a string and a map of replacements and returns the transformed string.

In summary, there are several ways to replace multiple strings with multiple other strings in JavaScript. The solution presented here uses a map object and a custom replacement function to ensure that all replacements are performed simultaneously, resulting in the desired output accurately.

The above is the detailed content of How to Efficiently Replace Multiple Strings in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!