Vanilla JS - .replace() with array and loop

Question

I wrote myself a little script that converts English words to Elvish words.

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>

Everything works fine. However, I would like to present the words in the form of an array. For example:

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

And not repeat it:

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

This thread was closest to my solution: Using replace string method inside forEach However, I was unable to adapt it to my script.

Is it possible in my case? I tried to find a similar solution with the replace function. Unfortunately, to no avail. Can you advise something?

Still, I keep trying, if I find a solution before answering, I will definitely share it.

"However, I was unable to adapt it to my script." - Where's that attempt? -> minimal reproducible example — Andreas
– Andreas, Commented Dec 15, 2021 at 11:39
Why is langs an array of objects with one object per word? Why not a single object with { <english word>: <elvish word> } -> { "Tree": "Adahl", "Forest": "Adahlen", ... } ? -> Object.entries() — Andreas
– Andreas, Commented Dec 15, 2021 at 11:40
Replacing the innerHTML is a bad idea, it makes a lot of internal work, and may lead to dataloss. You should consider to split the element text to textNodes, and overwrite the text content of the textNodes only. — Teemu
– Teemu, Commented Dec 15, 2021 at 11:50
Would you like to use a special tool for internationalization, such as i18next? This is a kind of versatile tool for both a small site and a major project. — A1exandr Belan
– A1exandr Belan, Commented Dec 15, 2021 at 12:37

Mario Varchmin · Accepted Answer · 2021-12-15 11:53:17Z

1

Here is a very basic function that replaces occurrences of your english terms with elvish terms.

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"));

answered Dec 15, 2021 at 11:53

Mario Varchmin

3,7924 gold badges21 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kamil Paciepnik Over a year ago

This solution helped me the most. Thank you Mario! Link to solve the problem: jsfiddle.net/n4x3dcwz

Sean Dillon · Accepted Answer · 2021-12-15 12:01:45Z

0

You could also do this with a switch statement.

switch(wordInEnglish) {

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

    case "Arrow": return "Assan";

}

answered Dec 15, 2021 at 12:01

Sean Dillon

2504 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vanilla JS - .replace() with array and loop

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related