实现逐词动画时如何按单词拆分字符串并保留展示换行符

原逻辑的核心问题 #

• 原有仅按空格拆分的方式，会将单词末尾内嵌的\n和单词绑定为同一个数组元素，既导致逐词动画的单元混杂了换行符号、动画逻辑混乱，也无法独立控制换行的渲染。
• 需注意white-space: wrap是浏览器默认值，会将文本中的\n识别为普通空格，无法还原原有换行结构，需搭配pre-wrap属性才能实现预期排版效果。

修正后的拆分逻辑 #

采用正则匹配的方式，将文本拆分为「纯单词、独立换行符」两类独立单元，从根源上避免换行符和单词粘连：

const text = "Aenean non odio erat.\n Suspendisse vestibulum vulputate nulla et mollis."

const splitTextForAnimation = (text) => {
  // 匹配规则：连续非空白字符（即纯单词）、独立的换行符\n
  return text.match(/(\S+|\n)/g) || []
}

// 拆分后输出结果
// ["Aenean", "non", "odio", "erat.", "\n", "Suspendisse", "vestibulum", "vulputate", "nulla", "et", "mollis."]

• 拆分结果中所有单词都是独立单元，适合单独绑定入场/交互动画
• 换行符被单独作为数组项保留，不会和其他内容绑定

配合CSS的渲染实现 #

借助white-space: pre-wrap的特性，不需要手动插入硬换行标签，即可实现换行的正常可视化：

1. 渲染逻辑示例（DOM操作场景）：

   const titleContainer = document.querySelector('.animated-title')
   // 给标题容器添加核心排版样式
   titleContainer.style.whiteSpace = 'pre-wrap'
   
   const splitResult = splitTextForAnimation(text)
   splitResult.forEach(item => {
     if (item === '\n') {
       // 父容器已开启pre-wrap，直接插入换行文本即可自动渲染为换行
       titleContainer.appendChild(document.createTextNode('\n'))
     } else {
       // 纯单词套独立span，用于绑定逐词动画
       const wordEl = document.createElement('span')
       wordEl.classList.add('word-animation-target')
       wordEl.textContent = item
       titleContainer.appendChild(wordEl)
       // 单词后追加半角空格，保证正常排版间距
       titleContainer.appendChild(document.createTextNode(' '))
     }
   })
   

2. 对应基础CSS配置：

   .animated-title {
     /* 保留文本内的\n为换行，同时支持文本宽度不足时的自动换行，不会溢出容器 */
     white-space: pre-wrap;
     /* 保证单词间的呼吸感，避免排版拥挤 */
     word-spacing: 0.15em;
   }
   

方案优势 #

• 完全保留原文本的换行结构，无需额外解析替换
• 逐词动画的绑定单元均为纯文本单词，不存在嵌套换行符导致的动画异常
• 无需手动插入冗余的<br>标签，减少不必要的DOM节点
• 兼容CMS返回的任意格式内嵌换行的字符串，连续多个换行也可正常渲染

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