将 div 中的每个字母拆分为自己的跨度

Question

我有一个带有标题标签的 div。

<div class="hero__title">

   <h1 class="hero__title-txt">Page title</h1>

</div>

我正在尝试获得所需的输出

<div class="hero__title">

   <h1 class="hero__title-txt">

       <span>P</span>

       <span>a</span>

       <span>g</span>

       <span>e</span>

       <span>T</span>

       <span>i</span>

       <span>t</span>

       <span>l</span>

       <span>e</span>

   </h1>

</div>

这是为了使用一些 CSS 来设计一个很酷的动画。下次我会担心 Javascript 来分隔单词。

span{

     transition: 1s left ease;

}

span:nth-child(1){

     transition-delay: 400ms;

}

span:nth-child(2){

     transition-delay: 600ms;

}

span.word{

     display:inline-block;

     margin-right:10px;

}

这篇不错的 SO 文章是一个很好的指南，但正如其中一个响应中所指出的那样，它只有在发出最后一个跨度时才有效。有大量的 jQuery 选项，是的，但是在我没有 jQuery 的第一个项目中，我很想用原生脚本来做这件事。

<div id="text">Hello, <span class="name">John</span></div>

var text = document.getElementById("text");

var msg = text.textContent;

var name = document.getElementsByClassName("name")[0].textContent;

// remove name from msg

msg = msg.substring(0,msg.length - name.length);

// to char array

msg = msg.split('');

name = name.split('');

text.innerHTML = "<span>" + msg.join("</span><span>") + "</span>";

text.innerHTML += "<span class=\"name\">" + name.join("</span><span class=\"name\">") + "</span>";