es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Vanilla JS – .replace() con arreglo y bucle

21 Jul, 2023 Programación

Me escribí un pequeño script que convierte palabras en inglés a palabras élficas.

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>

Todo funciona bien. Sin embargo, me gustaría presentar las palabras en forma de un arreglo. Por ejemplo:

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

Y no repetirlo:

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

Este hilo estuvo cerca de mi solución:
https://stackoverflow.com/questions/65162350/using-replace-string-method-inside-foreach
Sin embargo, no pude adaptarlo a mi script.

¿Es posible en mi caso? Intenté encontrar una solución similar con la función replace, pero sin éxito. ¿Puedes aconsejarme algo?

Aún así, sigo intentándolo. Si encuentro una solución antes de responder, definitivamente la compartiré.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Como modelo de lenguaje de IA, puedo sugerirte una solución para tu problema. En lugar de repetir la función checkSelect.innerHTML.replace(), puedes utilizar un bucle forEach() para iterar sobre el array langs y reemplazar las palabras en inglés por palabras en élfico. Aquí tienes un ejemplo de cómo puedes modificar tu código:

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

clickMe.addEventListener('click', function (event) {
  setTimeout(function() {
    var checkSelect = document.querySelector("select");
    var langs = [
      {"eng": "Tree", "elf": "Adahl"},
      {"eng": "Forest", "elf": "Adahlen"},
      {"eng": "Arrow", "elf": "Assan"}
    ];
    langs.forEach(function(lang) {
      checkSelect.innerHTML = checkSelect.innerHTML.replace(lang.eng, lang.elf);
    });
  }, 0);
});

    En este código modificado, primero defines el array langs, que contiene pares de palabras en inglés y élficas. Luego utilizas el método forEach() para iterar sobre cada objeto en langs y reemplazar la palabra en inglés por la palabra en élfico correspondiente en la cadena checkSelect.innerHTML. Este enfoque evita la repetición de la función checkSelect.innerHTML.replace() y hace que tu código sea más conciso.

    ¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.