将单词分成单词并获取每个字母的数据？ [英] Split word into letter and get data of each letter?

问题描述

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

I'm hoping this makes sense to someone. It's based a little on the following: How to rotate individual letters.

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

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

What I'm hoping to do then, is add a text-stroke-outline to a pseudo:before element for each letter.

基本上我希望html输出来自

Basically I'd like the html output to go from

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

to：

<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>

推荐答案

您可以使用普通正则表达式替换，不创建任何数组或类似的东西：

You can use a plain regular expression replace for this, without creating any arrays or anything like that:

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>

这篇关于将单词分成单词并获取每个字母的数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！