Probablemente quieras usar replaceAll ver documentos

 function replace() { var f = document.getElementById('find').value; var r = document.getElementById('replace').value var text = document.getElementById('text'); text.textContent = text.textContent.replaceAll(f, r); return null; }

 <div id="text">foo</div> find <input id="find"> <div></> replace <input id="replace"> <button onclick="replace()">Replace</button><br>

Necesita crear funciones separadas para lo que está haciendo. Cada botón llamará a la funcionalidad que desea.

A continuación, tengo un párrafo con un texto de identificación. Podemos acceder a él usando document.getElementById o document.querySelector . Debido a que es un elemento de texto, accedemos al valor usando innerHTML .

Para la entrada, necesitamos un elemento de entrada que tenga la entrada id. Se accede al valor usando value .

El reemplazo es sencillo, establezca el HTML interno del párrafo al valor de la entrada.

El hallazgo, no estoy seguro exactamente de lo que quería, pero podemos usar string.includes() para averiguar si el valor en la entrada aparece en el código HTML interno del párrafo.

Finalmente, está buscar y reemplazar, que se puede resolver con string.replace para reemplazar la primera ocurrencia, o puede cambiar a string.replaceAll para reemplazar todas las ocurrencias.

 const find = function() { let str = document.getElementById('text').innerHTML; let inp = document.getElementById('findInput').value; let matched = str.includes(inp) ? 'was' : 'was not'; alert(`${inp} ${matched} found in the sentence.`); }; const replace = function() { document.getElementById('text').innerHTML = document.getElementById('replaceInput').value; }; const findAndReplace = function() { let str = document.getElementById('text').innerHTML; let f = document.getElementById('findInput').value; let r = document.getElementById('replaceInput').value; document.getElementById('text').innerHTML = str.replace(f, r); };

 <p id="text">She sells sea shells on the sea shore.</p> <label for="findInput">Find:</label> <input id="findInput" type="text"><br> <label for="replaceInput">Repalce:</label> <input id="replaceInput" type="text"><br> <button type="button" onclick="find()">Find</button><br> <button type="button" onclick="replace()">Replace</button><br> <button type="button" onclick="findAndReplace()">Find and Replace</button><br>

Parece que el problema es que replace() solo reemplaza la primera aparición en la string , lo que está causando el problema.

Hay dos soluciones para este problema, que son muy similares.

La primera solución es usar String.replaceAll() . Esta es una nueva característica introducida en ES2021, lo que significa que no es compatible con navegadores antiguos (por ejemplo, Internet Explorer).

Para usarlo, simplemente use el código a continuación.

 const rep = str.replaceAll(f, r); // This line has been modified document.getElementById("text").innerHTML = rep;

Utilizará el nuevo método ( replaceAll() ), que reemplazará todas las apariciones de f con r .

La segunda solución usa una función similar, pero más antigua, llamada String.replace() . Es la misma función que estás usando, pero vamos a usar una técnica diferente.

Para reemplazar todas las ocurrencias, debe usar RegExp para modificar el comportamiento.

Use el siguiente código para reemplazar todas las apariciones con replace() .

 const rep = str.replace(new RegExp(`${f}`, "g"), r); // This line has been modified document.getElementById("text").innerHTML = rep;

Esto usa el new RegExp para crear una nueva instancia de RegExp. Esto se debe a que queremos pasar una variable.

El segundo parámetro es donde ocurre la magia. La g significa global . Esto hace que el método replace replace() reemplace todas las ocurrencias.

En resumen, ambos métodos deberían funcionar. Aquí hay algunas circunstancias de cuál debe usar.

• Opción 1: use cuando se dirija a navegadores más nuevos y se centre en la legibilidad.
• Opción 2: usar cuando se dirija a navegadores más antiguos.