Javascript Don'；不要打断一个空格，只打断一个空格

假设我有一条消息说“你好！”我将每个角色（不包括空格）都包装在一个范围内，我必须这样做，因为我使用的是动画，并且希望为角色设置动画。问题是，消息的动画效果很好，但由于每个角色都在自己的跨度内，消息在奇怪的部分被打断/包装。例如，它看起来像“Hello t/n here！”，因此它在t和h之间中断。我只希望它在有空格而不是空格时中断

排除所有样式类的html代码如下所示：

<div>
<span>H</span>
<span>e</span>
<span>l</span>
<span>l</span>
<span>o</span>
<div> </div>
<span>T</span>
<span>h</span>
<span>e</span>
<span>r</span>
<span>e</span>
<span>!</span>
</div>

H
E
L
L
o
T
H
E
R
E
!

以上代码是我创建的以下函数的结果：

const addSpan = (note: any, styles: any) => {
  let note1 = note.replace(/./g, `<span class='letter' style=${styles}>$&</span>`);
  let note2 = note1.replace(/<span class='letter' style=display:inline-block;> <\/span>/g, `<div> </div>`);
  return DOMPurify.sanitize(
    note2
  );
};

const addSpan=（注意：任意，样式：任意）=>{
让note1=note.replace（//g，`$&`）；
让note2=note1.replace（//g，``）；
返回domprify.sanitize(
注2
);
};

我试图在空格之间添加一个div，但它会导致换行符，这是我不想要的。我只希望消息只在空白处中断，而不是在跨距处中断。关于空格包装，我应该改变什么

我不确定我所要求的是否可行，有什么帮助吗

---

编辑：到目前为止，所有的答案都不理解我的要求。我只希望我的消息在空白处中断，而不是在跨距之间中断。我希望我的“hello”和“there”保持在一起，尽管所有的字母都在单独的跨距中。

字母应该是跨距，单词应该是直线块

我甚至增加了对段落的支持

const text=`
知识是一种美德，是一种美德，是一种美德，是一种美德。
但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
`
常量main=（）=>{
渲染（文本“.target”）
}
常量呈现=（文本，目标）=>{
如果（目标类型=='string'）{
target=document.querySelector（目标）
}
移除儿童（目标）
text.trim（）.split（/\n/g）.forEach（（段落，pIndex，pArr）=>{
让paragraphEl=document.createElement（'div'））
段落.classList.add（'段落'）
段落.split（/\s+/g）.forEach（（word、wIndex、wArr）=>{
让wordEl=document.createElement（'div'）
wordEl.classList.add（'word'）
单词.split（''）.forEach（（字母、林德克斯、拉尔）=>{
让letterEl=document.createElement（'span'））
letterEl.classList.add（'字母'）
lettel.textContent=字母
wordEl.appendChild（letterEl）
})
第段附录儿童（wordEl）
if（wIndex{
而（第一个孩子）{
el.firstChild.remove（）
}
}
main（）

.target{
宽度：20em；
溢出：隐藏；
边框：薄实灰色；
}
.段{
保证金：0.33em 0.5em；
}
.字{
显示：内联块；
}
.单词：悬停{
背景：#FFA；
}

---

你能展示代码吗？@RinkeshGolwala我提供的代码基本上就是它，但是如果它有助于Hanks，我添加了我的javascript部分！！因此，单词应该被包装在一个带有行内块的div中：0@doyu我更新了我的高级解决方案，并修复了错误地将空格与单词分组的问题。查看当前版本。