将文本拆分为独立HTML元素时如何保留原字体间距？

要实现拆分文本为独立元素同时保留原生单词间距，不需要手动添加 、额外内边距或依赖插件，可以通过正则拆分保留空格的方式解决：

解决方案代码 #

const App = () => {
  const line = 'this is a line of text.';
  // 使用正则拆分，捕获并保留所有空格部分
  const textParts = line.split(/(\s+)/);
  
  const renderLine = textParts.map((part, index) => {
    // 仅对非空白内容（单词）包裹span，空白部分直接输出
    return /\S/.test(part) ? (
      <span key={index}>{part}</span>
    ) : part;
  });

  return (
    <h1>{renderLine}</h1>
  )
}

原理说明 #

1. 正则拆分逻辑：split(/(\s+)/)会将文本按空格拆分，但括号会把匹配到的空格序列（包括多个连续空格）作为独立项保留在结果数组中，不会丢失原有的空格信息。
2. 差异化渲染：遍历拆分后的数组时，只对非空白的单词部分包裹<span>元素，空白部分直接输出，这样浏览器会按照原生文本的方式处理空格间距，完全保留原有的排版效果。

这种方法既满足了为每个单词单独设置动画的需求，又不需要额外的CSS布局调整，也避免了手动添加空格的繁琐操作。

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