Takes this:
<h2>Some <strong>bold</strong> text<br> with<i>Tags</i></h2>Returns this:
<h2>
<span class="letter">S</span>
<span class="letter">o</span>
<span class="letter">m</span>
<span class="letter">e</span>
<span class="letter"> </span>
<strong>
<span class="letter">b</span>
<span class="letter">o</span>
<span class="letter">l</span>
<span class="letter">d</span>
</strong>
<span class="letter"> </span>
<span class="letter">t</span>
<span class="letter">e</span>
<span class="letter">x</span>
<span class="letter">t</span>
<br>
<span class="letter">w</span>
<span class="letter">i</span>
<span class="letter">t</span>
<span class="letter">h</span>
<i>
<span class="letter">T</span>
<span class="letter">a</span>
<span class="letter">g</span>
<span class="letter">s</span>
</i>
</h2>If invoked like this:
import Splitter from 'split-html-to-chars';
Splitter(html,'<span class="letter">$</span>');For animations like this one:
Common use case might be replacing HTML on load:
import Splitter from 'split-html-to-chars';
// iterating each replaced element
let els = document.querySelectorAll(".js-splitme");
[].forEach.call(els, function(el) {
// outerHTML, thats *important*, no direct text nodes should be in parsed HTML
el.outerHTML = Splitter(el.outerHTML, '<span class="letter">$</span>');
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent