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

Question

我希望这对某人有意义。它基于以下内容：How to rotate individual letters。

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

然后，我希望为每个字母的pseudo：before元素添加一个文本描边轮廓。

基本上我希望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>