Tengo esta función simple para buscar y reemplazar texto en mi mensaje de área de texto. El usuario podrá escribir en el área de texto y también podrá buscar y reemplazar palabras del área de texto que acaba de ingresar. Actualmente estoy tratando de usar un bucle while para reemplazar varias palabras iguales que se encuentran en el área de texto que el usuario ingresó. Pero cada vez que lo ejecuto, parece congelar toda la página html. ¿Alguna idea de por qué sucede esto?
buscar y reemplazar son cuadros de texto para que el usuario ingrese la palabra que desea buscar y reemplazar, el usuario también puede ingresar varias palabras para reemplazar.
function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message').value; var lmao = message.indexOf(find); while (message.indexOf(find) != -1) { document.getElementById("message").value = message.replace(find, replace); } }Reemplace el bucle while con un replaceAll .
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message').value; var lmao = message.indexOf(find); document.getElementById("message").value = message.replaceAll(find, replace); } <div>Find <input id="find" value="find" /></div> <div>Replace <input id="replace" value="replace" /></div> <div> <textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea> </div> <div> <button onclick="findText()">Submit</button> </div>Solo una adición en otra respuesta, puede usar g para la búsqueda global y para reemplazar donde encuentra esa palabra. Lea más sobre expresiones regulares y //g aquí
También puede dejar que la búsqueda
case-insensitivityusandoijunto congde esta manera:
message.replace(/find/g, replace)
De esta manera también reemplazará a Find finD FIND
Y en lugar de usar while puedes usar if loop
function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message').value; var lmao = message.indexOf(find); if(message.indexOf(find) != -1) { document.getElementById("message").value = message.replace(/find/g, replace); } } <div>Find <input id="find" value="find" /></div> <div>Replace <input id="replace" value="replace" /></div> <div> <textarea id="message" style="height: 100px">you can find and replace every words just by .replaceAll, example: find 1 find 2 find 3</textarea> </div> <div> <button onclick="findText()">Submit</button> </div>El problema es con su condición while . Cuando todos los campos de entrada están vacíos, su condición while es true . Entonces, dentro de la condición while, el valor de entrada continúa actualizándose a una cadena vacía nuevamente, lo que hace que el ciclo sea un ciclo infinito. Es por eso que tu interfaz de usuario se está rompiendo.
Escenario de problema
console.log(("").indexOf("") !== -1); Para solucionar esto, debe asegurarse de que sus valores de find y replace no sean los mismos. O bien, será un bucle infinito de nuevo.
Solución fija
function findText() { let find = document.getElementById('find').value; let replace = document.getElementById('replace').value; let message = document.getElementById('message'); while (find !== replace && message.value.indexOf(find) != -1) { message.value = message.value.replace(find, replace); } } <input type="text" id="find"> <input type="text" id="replace"> <textarea name="" id="message" cols="30" rows="10"></textarea> <button onclick="findText()">Check</button>