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

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>