La siguiente función en JavaScript agrega a cada palabra coincidente una etiqueta <mark> en el cuerpo del documento.
var words = ["apple", "banana", "carrot", "pear"]; for (var i=0; i < words.length; i++) { var replace = new RegExp(words[i],"g"); var page = document.body.innerHTML; var newPage = page.replace(replace, `<mark>${words[i]}</mark>`); document.body.innerHTML = newPage; } De esta forma, resalta una palabra dentro del <body> si es un elemento dentro del arreglo words .
El problema que tengo es que document.body.innerHTML se reemplaza en cada iteración. ¿Sabe cómo puedo reemplazar las palabras coincidentes en la página limitando el número de document.body.innerHTML = newPage a 1?
¡Gracias de antemano por sus respuestas!
Obtenga innerHTML before loop y configure innerHTML after loo. puede usar replaceAll para cambiar todas las palabras coincidentes
var words = ["apple", "banana", "carrot", "pear"]; var page = document.body.innerHTML; words.forEach((word) => { page = page.replaceAll(word, `<mark>${word}</mark>`); }); document.body.innerHTML = page; <div> apple abc banana cd apple </div>Lea la cadena antes del bucle, modifíquela en el bucle y cambie el cuerpo del documento después del bucle.
const words = ["apple", "banana", "carrot", "pear"]; let page = document.body.innerHTML; for (const word of words) { page = page.replaceAll(word, `<mark>${word}</mark>`); } document.body.innerHTML = page; "apple", "banana", "carrot", "pear" O puede usar reduce :
const words = ["apple", "banana", "carrot", "pear"]; document.body.innerHTML = words.reduce((page, word) => page.replaceAll(word, `<mark>${word}</mark>`), document.body.innerHTML); "apple", "banana", "carrot", "pear"