javascript - 将单词拆分为字母并获取每个字母的数据？

Question

我希望这对某人有意义。它基于以下几点:How to rotate individual letters .

$(".target").html(("<span>"+$(".target").html().split("").join("</span><span>")+"</span>"));

然后我希望做的是为每个字母添加一个文本笔划轮廓到伪:之前元素。

基本上我希望 html 输出来自

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

到:

<h1 class="rotate tk-ad">
<span class="target"><span data-glitch="R">R</span><span data-glitch="i">i</span><span data-glitch="d">d</span><span data-glitch="e">e</span></span>
</h1>

Answer 1

您可以为此使用普通的正则表达式replace，而无需创建任何数组或类似的东西:

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

<span class="target">Ride</span>