Vanilla JS – .replace() con arreglo y bucle
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é.
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 bucleforEach()
para iterar sobre el arraylangs
y reemplazar las palabras en inglés por palabras en élfico. Aquí tienes un ejemplo de cómo puedes modificar tu código:En este código modificado, primero defines el array
langs
, que contiene pares de palabras en inglés y élficas. Luego utilizas el métodoforEach()
para iterar sobre cada objeto enlangs
y reemplazar la palabra en inglés por la palabra en élfico correspondiente en la cadenacheckSelect.innerHTML
. Este enfoque evita la repetición de la funcióncheckSelect.innerHTML.replace()
y hace que tu código sea más conciso.¡Espero que esto te ayude! Avísame si tienes alguna otra pregunta.