javascript - 希望将句子拆分成单词(如 div)，然后将单词拆分成字母(如 span)？

Question

基于我之前在这里看到的问题:Split word into letter and get data of each letter?我正在尝试找出一种方法，将句子预先拆分成单词作为 div。

当前代码如下:

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

我根据找到的其他答案尝试过的 fiddle : https://jsfiddle.net/xyp3cn37/7/

我想要达到的结果是:

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

到:

<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>

然后我旋转每个单独的字母(这是有效的，所以不需要包含该代码)以产生: 然而，在较小的屏幕上，发生这种情况是因为 HTML 只能看到每个字母，而不是每个单词:

Answer 1

您可以使用两个正则表达式实现此目的 - 一个用于匹配单词，然后使用替换函数将单词中的每个字符替换为 span。首先匹配\w+(不只是\w，只会匹配一个字符)匹配所有单词，然后用/替换单词中的每个字符。/g:

const target = document.querySelector('.target');
target.innerHTML = target.textContent
  .replace(/\w+/g, (word) => (
    '<div>' +
    word.replace(/./g, '<span data-glitch="$&">$&</span>') +
    '</div>'
  ));
console.log(target.innerHTML);

div {
  border: 1px solid black
}

<span class="target">A Word Here</span>