Necesito extraer algunas palabras de una cadena de texto, insertar cada carácter de esas palabras dentro de un elemento de intervalo y luego reemplazar las palabras extraídas con los elementos de intervalo. He podido convertir caracteres en elementos de intervalo, pero no sé cómo reemplazar las palabras extraídas con los elementos de intervalo sin eliminar las otras palabras.
<h1 class="title">Lorem ipsum dolor sit amet</h1> const title = document.querySelector('.title'); // Extract required words and split them into single character const firstWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('L')).toString().split(''); const secondWord = title.textContent.split(' ').filter(wrd => wrd.startsWith('a')).toString().split(''); // Return a new array with every character inside a span element const spanCharacters = arr => { return arr.map(char => { const span = document.createElement('span'); span.textContent = char; return span; }); }; const spanFirstWord = spanCharacters(firstWord); // return [<span>L</span>, <span>o</span>, <span>r</span>, <span>e</span>, <span>m</span>] const spanSecondWord = spanCharacters(secondWord); // return [<span>a</span>, <span>m</span>, <span>e</span>, <span>t</span>]Ahora, lo que me gustaría hacer es esto:
<!-- before --> <h1 class="title">Lorem ipsum dolor sit amet</h1> <!-- after --> <h1 class="title"><span>L</span><span>o</span><span>r</span><span>e</span><span>m</span> ipsum dolor sit <span>a</span><span>m</span><span>e</span><span>t</span></h1>¿Cómo podría reemplazar las palabras extraídas con los lapsos generados manteniendo las otras palabras donde están?
Aquí hay una manera de hacerlo:
const ttl=document.querySelector("h1.title"), txt=ttl.textContent; function spanifyWords(beginsArr,txt){ return txt.split(" ").map(w=>{ if (beginsArr.some(b=>w.startsWith(b))) w="<span>"+w.split("").join("</span><span>")+"</span>"; return w }).join(" "); } ttl.innerHTML=spanifyWords(["a","L"],txt); span {color: green; border:1px solid red} <h1 class="title">Lorem ipsum dolor sit amet</h1> en lugar . filter() -ing Yo uso .map() para revisar cada palabra. Dentro de la función de devolución de llamada, verifico con .some .some() en relación con algunos beginsArr si la palabra actual comienza con uno de los caracteres en cuestión. Si es así, "expongo" la palabra; de lo contrario, devuelvo la palabra tal como está. Al final, vuelvo a unir todo con .join() .