split-html-to-chars

Split html to letters for animation

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

Why i did that

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>');
});

Yuri akella Artiukh