JS实现逐词文本拆分动画时如何保留原有<br>换行标签

• 原代码使用innerText读取元素内容时，会自动将DOM中的<br>标签转换为纯文本换行符，标签结构直接丢失。
• 后续split(/\s|<br>/g)的拆分逻辑会把作为分隔符的空格、<br>直接丢弃，不会存入拆分结果数组，最终拼接的HTML里自然没有换行标签。
• 直接清空元素重写innerHTML的逻辑，会抹除元素内原有的所有非文本节点，不止<br>，后续如果有<strong>、<em>等行内格式也会全部丢失。

调整内容处理逻辑，直接遍历元素原始子节点而非读取innerText拆分：遇到文本节点就按空格拆分单词生成动画容器，遇到<br>标签则直接保留到结果中，同时保持动画延迟的递增计数不中断。
修复后完整代码：

let $delayTime;
const $textAreas = document.querySelectorAll('.stagger-text');

function setDelayValue(curCount) {
  $delayTime = 0.075;
  return parseFloat(curCount * $delayTime).toFixed(3);
}

function createStaggerContainers($textArea) {
  const childNodes = Array.from($textArea.childNodes);
  const result = [];
  let wordIndex = 0;

  childNodes.forEach(node => {
    // 原样保留br换行标签
    if (node.nodeName === 'BR') {
      result.push('<br>');
      return;
    }
    // 处理文本节点，拆分单词生成动画结构
    if (node.nodeType === Node.TEXT_NODE) {
      const text = node.textContent.trim();
      if (!text) return;
      const words = text.split(/\s+/).filter(Boolean);
      words.forEach((word, i, arr) => {
        const delayValue = setDelayValue(wordIndex);
        result.push(`<span class="stagger__container">
              <span class="stagger__text" style="animation-delay: ${delayValue}s">${word}${i !== arr.length - 1 ? '&nbsp;' : ''}</span>
            </span>`);
        wordIndex++;
      });
    }
  });

  $textArea.innerHTML = result.join('');
}

if ($textAreas.length) {
  $textAreas.forEach(($textArea) => {
    createStaggerContainers($textArea);
  });
}

• 原有逐词动画的stagger__container、stagger__text结构完全保留，每个单词的animation-delay按顺序递增，动画效果不受影响
• 原DOM中的<br>标签会被原样保留，换行效果正常显示
• 扩展性更强，后续如果需要兼容<strong>、<em>等行内格式标签，只需要在节点判断逻辑中新增对应处理规则即可

内容的提问来源于stack exchange，提问作者Bagseye