Mi objetivo es reemplazar cada palabra en las etiquetas P de un documento con un elemento de intervalo. Si bien el siguiente código funciona bien para el primer caso, los siguientes se superponen y comienzan a destruir completamente la estructura HTML de nuestra etiqueta P. Ver imagen para salidas no deseadas
¿Se pregunta si mi enfoque es incorrecto o necesitaría alguna brujería para afectar solo el HTML interno entre las etiquetas?
const runBionic = (node: ChildNode, paragraph: HTMLElement):HTMLElement => { if (node.textContent === null) return paragraph; const originalWords:string[] = node.textContent.split(" "); const filteredWords: string[] = originalWords.filter(word => word!=="" && word !== "\n"); console.log("Filtered words: ", filteredWords); //replace each word with a span element filteredWords.forEach(word => { const modifiedWord = `<span style='font-weight: bold;'>${word}</span>`; console.log("REPLACING ", word, "WITH ", modifiedWord); paragraph.innerHTML = paragraph.innerHTML.replaceAll(word,modifiedWord); }); return paragraph;};Con el objetivo de construir eventualmente una extensión de Chrome que resalte la primera mitad de los caracteres de cualquier palabra en cualquier página. Esto ayudará a las personas disléxicas a leer la web más rápido. Adjuntar un enlace a todo el repositorio en github para el contexto.
De acuerdo, terminé reemplazando todo el TextNode con un nuevo elemento de intervalo. De esta manera puedo preparar todo el elemento y agregarlo a su padre. Funciona perfectamente, no se necesita expresión regular....
const replaceNode = (node: ChildNode)=>{ if (node.textContent === null) return node; const newChild = document.createElement("span"); const words: string[] = node.textContent.split(" ").filter(word => word!=="" && word !== "\n"); const HTMLstring: string = spannify(words); newChild.innerHTML = HTMLstring; return newChild;}; const spannify = (words : string[]) : string=>{ let HTMLstring = ""; words.forEach(word =>{ const span = `<span> ${word} </span>`; HTMLstring += span; }); return HTMLstring;};