Digamos que tengo un documento HTML con el siguiente body :
<style> .highlighted { color: red; background-color: yellow; } </style> <article>My text in an element</article> Tengo el desafío de diseñar la letra i de la palabra in de la etiqueta <article> con javascript, y estoy obligado a hacerlo por su index [8]. De momento solo se me ocurre empezar con esto...
<script> const article = document.querySelector('article').innerText console.log(article[8]); </script>Rendimiento esperado:
<article>My text <span class="highlighted">i</span>n an element</article> // Console >>>> "i"... aunque nunca antes había probado algo como esto, así que estoy un poco perdido con los siguientes pasos.
Supongo que necesito insertar una etiqueta <span> en este índice, pero no estoy seguro de cómo configuraría la etiqueta de cierre </span> o actualizaría el DOM.
¿Cuál sería una buena manera de lograr este tipo de estilo?
const HIGHLIGHT_IDX = 8; const article = document.querySelector('article').innerText; const words = article.split(' '); let highlightCheck = words[0].length; let wordToHighlight = words[0].length >= HIGHLIGHT_IDX && '0'; let wordIdx = 1; while (!wordToHighlight) { highlightCheck += 1 + words[wordIdx].length; if (highlightCheck >= HIGHLIGHT_IDX) { wordToHighlight = wordIdx; } else { wordIdx += 1; } } words[wordToHighlight] = `<span class="highlight">${words[wordToHighlight]}</span>`; document.querySelector('article').innerText = words.join(' ');//get text of article const article = document.querySelector('article').innerText; //find index of word 'in' const index = article.indexOf('in'); //opening and closing tags const openingTag = '<span style="color:red">' const closingTag = '</span>' //insert tags into article const newHTML = article.slice(0, index) + openingTag + 'in' + closingTag + article.slice(index + 2); document.querySelector('article').innerHTML = newHTML; Este código aplica estilo a la primera aparición de la palabra "en" configurando el color del texto en rojo. Si desea hacer algo más, cambie el atributo de style de la etiqueta de apertura.
article.slice(0, index) devuelve todo antes de la palabra "in". En su ejemplo, esto se evaluaría como 'My text ' . article.slice(index + 2) devuelve todo después de la palabra "in" porque "in" tiene 2 letras. En su ejemplo, esto se evaluaría como ' an element' . Cuando todas las cadenas se concatenan juntas, el resultado es 'My text <span style="color:red">in</span> an element' .