Javascript 想把句子分成单词（如div），然后把单词分成字母（如span）？

根据我在这里看到的前一个问题： 我正在想办法把这个句子分成几个单词

目前的代码如下：

const target = document.querySelector('.target');
target.innerHTML = target.textContent
  .replace(/\w/g, '<span data-b-text="$&">$&</span>');

const target=document.querySelector（'.target'）；
target.innerHTML=target.textContent
.替换（/\w/g，$&'）；

根据我找到的其他答案，我尝试了一把小提琴：

我试图实现的结果是：

<h1 class="rotate tk-ad">
  <span class="target">A Word</span>
</h1>

一句话

致：

A.
单词

然后我旋转每个字母（这是有效的，因此不需要包含该代码），以产生： 但是，在较小的屏幕上，这是因为HTML只看到每个字母，而不是每个单词：

---

您可以使用两个正则表达式来实现这一点-一个用于匹配单词，然后使用替换函数将单词中的每个字符替换为

span

。首先匹配

\w+

（不仅仅是

\w

，它将只匹配一个字符）以匹配所有单词，然后将单词中的每个字符替换为

//g

：

const target=document.querySelector（'.target'）；
target.innerHTML=target.textContent
.替换（/\w+/g，（word）=>(
'' +
字。替换（//g，“$&”）+
''
));
log（target.innerHTML）
div{
边框：1px纯黑
}
此处有一个单词
在设置
目标的html时
您可以首先根据空格拆分字符串，然后在每个字符上拆分并生成字符串


$（函数（）{
$（“.target”）.html（函数（）{
返回$（this.html（）.split（“”）.map（word=>{
返回“”+单词.split（“”）.map（字母=>{
返回“”+字母表+“”；
}).加入（“”+“”）；
})
})
});
div{
利润率：20px；
}
跨度{
填充：0 20px；
颜色：红色；
}

一句话
注意html（函数）的第二个参数是当前的htmlI，我在这里的代码中没有使用第二个参数。使用
此
访问它。只是建议…因为它已经存在，无需重新获取。谢谢！我完全同意另一个答案，因为我能稍微多理解一点。谢谢你！我选择了这一款，因为它与已经到位的产品相匹配（对我来说，学习稍微少一点）
<h1 class="rotate tk-ad">
 <span class="target">
   <div>
    <span data-glitch="A">A</span>
   </div>
   <div>
    <span data-glitch="W">W</span><span data-glitch="o">o</span><span data-glitch="r">r</span><span data-glitch="d">d</span>
  </div>
 </span>
</h1>