Quiero resaltar una palabra en una página sin involucrar document.body.innerHTML ya que esto altera totalmente la funcionalidad de la página.
¿Hay alguna otra forma de hacerlo?
En este momento estoy usando este código para resaltar
document.body.innerHTML= document.body.innerHTML.replace(/TEST/g, function(m){ return '<span style="background-color:YELLOW">'+m+'</span>' }Gracias
Si entiendo su problema correctamente, sugeriría recuperar los elementos DOM con el contenido relevante, obtener el contenido y finalmente rodearlo con un elemento de span con estilo.
const $matchedElements = document.querySelectorAll("p"); $matchedElements.forEach(($element) => { if ($element.innerHTML.match("SampleCollected")) { const $mySpan = document.createElement("span"); $mySpan.style = "background-color:yellow"; $mySpan.innerHTML = $element.innerHTML; $element.innerHTML = "" $element.appendChild($mySpan) } }); <!DOCTYPE html> <html> <head> <title>Example</title> <meta charset="UTF-8" /> </head> <body> <p> SampleCollected </p> <p> SampleNotCollected </p> <p> SampleCollected </p> <script src="src/index.js"></script> </body> </html>