Quiero buscar y reemplazar palabras específicas en un área de texto usando palabras clave especificadas por el usuario.
Así es como se ve mi documento HTML:
Message: </br> <textarea name="text" id="message" rows="3" col="20">Hello 202109</textarea> </br></br> Find: <input type="text" name="find" id="find" size="15"> Replace: <input type="text" name="replace" id="replace" size="15"> <br/> <button type="button" onclick="findAndReplace()">Find and Replace</button> <br/>Y estoy usando esto para mi función Javascript:
function findAndReplace() { let find = document.getElementById("find").innerHTML; let replace = document.getElementById("replace").innerHTML; let text = document.getElementById("message").innerHTML; document.getElementById("message").innerHTML = text.replace(find, replace); }Sin embargo, cuando abro mi página web y trato de hacer clic en el botón "Buscar y reemplazar", no sucede nada y no se reemplaza ningún texto. La inspección de la página web tampoco muestra ningún error.
¿Qué estoy haciendo mal? Cualquier ayuda sería apreciada.
Eso es porque estás usando .innerHTML en lugar de .value . .innerHTML obtiene el marcado interno del elemento y no se puede usar en entradas y áreas de texto. .value es la propiedad que está buscando.
Esta es la solución a tu problema :)
function findAndReplace() { let find = document.getElementById("find").value; let replace = document.getElementById("replace").value; let text = document.getElementById("message").value; document.getElementById("message").value = text.replace(find, replace); } <textarea name="text" id="message" rows="3" col="20">Hello 202109</textarea> </br></br> Find: <input type="text" name="find" id="find" size="15"> Replace: <input type="text" name="replace" id="replace" size="15"> <br /> <button type="button" onclick="findAndReplace()">Find and Replace</button> <br />También existe esta interesante guía: https://superuser.com/questions/1037389/innerhtml-vs-value-when-and-why