JavaScript - 从优化的 Angular 来看，应该如何用不同的字符串替换字符串中的多个子字符串？

Question

在我开发和维护的代码中遇到了一个问题。

我有一个函数，它接受查询(类型字符串)并用不同的字符串替换该字符串的子字符串。例如，如果用户输入字符串“我有一只猫”，它会将其替换为“我有一只狗”。

我的代码可以工作，但问题是我有数百个这样的子字符串需要用不同的子字符串替换。从美观 Angular 来看，它看起来也很糟糕。

var myString;
myString = myString.replace('cat','dog')
                   .replace('elephant','zebra')
                   .replace('bird','fish')
                   // Goes on for hundreds of lines

这一切都在一个函数内，每次调用它时都会经历数百次 replace 调用。

我可以尝试做的一件事是创建一个对象数组并迭代它。代码看起来像这样。

var animalsArray = [
                       {'a':'cat','b':'dog'},
                       {'a':'elephant','b':'zebra'},
                       {'a':'bird','b':'fish'}
                   ];

然后在我的函数中

function stringReplace(string) {
    for (var i = 0; i < animalsArray.length; i++) {
        if (string.indexOf(animalsArray[i]['a']) > -1) {
            sting = string.replace(animalsArray[i]['a'],animalsArray[i]['b']);
        }
    }
}

但我不确定这是否会改进我目前将数百个替换调用链接在一起的做法。

我基本上是在寻求优化我当前的代码。最佳实践是什么？

Answer 1

您可以使用一堆 or 语句来创建 regaur 表达式。 (dog|elephant|bird|...) 这将允许您运行一项检查。替换会为您提供匹配的文本，您可以使用它来查找要替换的单词。

因此，创建一个要替换的字符串对象，它们的值就是要替换的单词。您只需通过匹配的键查找替换即可。

const animals = {
  cat: 'dog',
  elephant: 'zebra',
  bird: 'fish',
}

// build the or sting with a simple join
const keysString = Object.keys(animals).join("|")
// generate the regular expression to match the words
var animalRE = new RegExp(`\\b(${keysString})\\b`,'g');

// a sample string to match
const myString = "I like to pet a cat that looks like an elephant that moves like a bird."

// the replacement step. The function takes the matched text (aka key) and looks it up in the object
const updated = myString.replace(animalRE, key => animals[key] || key)

// display the new string
console.log(updated)