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

Question

我希望这对某人有意义.它基于以下内容:如何旋转单个字母.

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

我当时希望做的是在每个字母的伪元素之前添加一个text-stroke-outline.

基本上我喜欢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>