Vanilla JS - 带有数组和循环的 .replace()

Question

我自己写了一个小脚本，可以将英语单词转换为精灵语单词。

var clickMe = document.querySelector('#button-7993f34d');

clickMe.addEventListener('click', function (event) {
  setTimeout(function() {
    var checkSelect = document.querySelector("select");
    // Lang
    checkSelect.innerHTML = checkSelect.innerHTML.replace('Tree', 'Adahl');
    checkSelect.innerHTML = checkSelect.innerHTML.replace('Forest', 'Adahlen');
    checkSelect.innerHTML = checkSelect.innerHTML.replace('Arrow', 'Assan');
  }, 0);
});

<select>
  <option>Tree</option>
  <option>Forest</option>
  <option>Arrow</option>
</select>
<button id="button-7993f34d">click me</button>

一切正常。但是，我想以数组的形式呈现单词。例如：

langs = [
  {"eng": "Tree", "elf": "Adahl"},
  {"eng": "Forest", "elf": "Adahlen"},
  {"eng": "Arrow", "elf": "Assan"}
]

不再重复：

 checkSelect.innerHTML = checkSelect.innerHTML.replace('Tree', 'Adahl');

此线程最接近我的解决方案： Using replace string method inside forEach 但是，我无法使其适应我的脚本。

在我的情况下可能吗？我试图用替换功能找到类似的解决方案。不幸的是，无济于事。能给点建议吗？

不过，我一直在努力，如果我在回答之前找到了解决方案，我一定会分享。

Answer 1

这是一个非常基本的功能，可以用精灵术语替换出现的英语术语。

function replaceText(text) {
  const langs = [
    {"eng": "Tree", "elf": "Adahl"},
    {"eng": "Forest", "elf": "Adahlen"},
    {"eng": "Arrow", "elf": "Assan"}
  ];
  let textToReturn = text;
  langs.forEach((word) => {
    textToReturn = textToReturn.replaceAll(word.eng, word.elf);
  });
  return textToReturn;
};

console.log(replaceText("My Tree is in the Forest")); 

Answer 2

您也可以使用 switch 语句来做到这一点。

switch(wordInEnglish) {

    case "Tree": return "Adahl";
    
    case "Forrest": return "Adahlen";

    case "Arrow": return "Assan";

}