Creé una función que mapea una oración (proporcionada por un CMS) y agrega contenedores a cada palabra. Dividir cada palabra en espacios.
Ahora, algunas palabras requerirán saltos de línea, pero mi función los está borrando, y no estoy muy seguro de cómo voy a retener los saltos de línea en este caso.
La siguiente demostración muestra el problema que tengo. El segundo, aunque originalmente tiene un salto de línea, lo elimina cuando se ejecuta la función.
Cualquier idea o consejo de cómo retener los frenos será apreciado. A los efectos de mis animaciones, cada palabra requerirá el marcado en el valor de retorno de $reformatedText
let $textAreaContent; let $splitText; let $reformatedText; let $delayTime; let $delayValue; let $textAreas = document.querySelectorAll('.stagger-text'); function setDelayValue(curCount) { $delayTime = 0.075; return parseFloat(curCount * $delayTime).toFixed(3); } function createStaggerContainers($textArea) { $textAreaContent = $textArea; $splitText = $textAreaContent.innerText.split(/\s|<br>/g); $reformatedText = $splitText.map((item, i, arr) => { $delayValue = setDelayValue(i); return `<span class="stagger__container"> <span class="stagger__text" style="animation-delay: ${$delayValue}s">${arr.length - 1 === i ? item : `${item} `}</span> </span>`; }).join(''); $textAreaContent.innerText = ''; $textAreaContent.innerHTML = $reformatedText; } if ($textAreas && $textAreas.length) { $textAreas.forEach(($textArea) => { createStaggerContainers($textArea); }); } <div class="stagger-text">Some text here</div> <div class="stagger-text">This has line<br> breaks</div>