想要将句子拆分成单词（如div），然后将单词拆分成字母（如span）？

Question

根据我之前在这里看到的问题：Split word into letter and get data of each letter? 我正在尝试找出一种方法，可以预先将句子拆分成divs的单词。

当前代码如下：

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

我根据其他发现尝试过的小提琴： 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>

Answer 2

在设置.target的html的同时，您可以首先基于空格分割字符串，然后在每个字符上分割并构建字符串。

$(function() {
  $(".target").html(function() {
    return $(this).html().split(" ").map(word => {
      return '<div>' + word.split("").map(alphabet => {
        return '<span data-glitch="'+alphabet+'">' + alphabet + '</span>';
      }).join("") + '</div>';
    })
  })
});

div {
  margin: 20px;
}

span {
  padding: 0 20px;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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