CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Larm
Larm

Reputation: 187

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>"));

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

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>

Upvotes: 1

Views: 547

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370699

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>

Upvotes: 5

Related Questions