【HTML・JavaScript】文字分割をする方法

こんにちは！Web制作エンジニアのモリヤス（@_moriyas）です。

今回は、HTMLとJavaScriptでの文字分割の方法をご紹介します！
今回の記事では割愛しますが（別記事で紹介予定）Webサイトを制作するときに、1文字1文字にアニメーションを持たせたいときなどに役に立つと思うのでぜひご覧ください！

1 コードとデモの紹介
2 簡単なコード解説
- 2.1 HTML
- 2.2 JavaScript
3 まとめ

コードとデモの紹介

See the Pen Split Text by モリヤス (@moriyas) on CodePen.

検証ツールの要素で見るとspanタグで分割されているのがわかります！！

簡単なコード解説

HTML

<div class="text-box">
    <p class="split-text">テスト1です。</p>
    <p class="split-text">テスト2 です。</p>
    <p class="split-text">テスト&lt;3&gt;です。</p>
    <p class="split-text">テスト&amp;4です。</p>
    <p class="split-text">テスト&#39;5&#39;です。</p>
    <p class="split-text">テスト&quot;6&quot;です。</p>
    <p>テスト分離してないです。</p>
    <p>検証ツールの要素で見ると分割されているのがわかりますよ！！</p>
</div>

pタグのうち「split-text」クラスのがついているものを1文字1文字spanタグで分割します。

JavaScript

{
	let splitText = document.getElementsByClassName('split-text');
	let arraySplitText = [...splitText];
	let text;
	let newText;
	let spanText;

	const unEscapeHTML = (str) => {
		return str
				.replace(/(&lt;)/g, '<')
				.replace(/(&gt;)/g, '>')
				.replace(/(&quot;)/g, '"')
				.replace(/(&#39;)/g, "'")
				.replace(/(&amp;)/g, '&');
	};

	arraySplitText.forEach((element) => {
		newText = '';
		spanText = element;
		text = unEscapeHTML(element.innerHTML);
		text.split('').forEach((element) => {
            // 文字列に空白（スペース）がある場合
			if (element == ' ') {
				newText += '<span>&nbsp;</span>';
			} else {
				newText += '<span>' + element + '</span>';
			}
		});
		spanText.innerHTML = newText;
	});
}

2行目「document.getElementsByClassName(‘split-text’)」で分割したい要素を選択しています。

また、3行目「[…splitText]」は、分割代入（詳しくはこちら）を使ってHTMLCollectionのsplitText変数を配列に変換しています。理由は、その後の分割の処理でforeachを使いたいのですが、HTMLCollectionのままだとforeachが使えないからです。（下記記事を参考にさせていただきました👇）

JavaScript NodeList, HTMLCollection は配列(Array)ではない

17行目からが文字分割のメインの処理になります。

まず、17行目で「arraySplitText」をforeachしているのは、HTMLの「split-text」クラスがついている要素1つ1つを文字分割させるためです。

20行目の「text = unEscapeHTML(element.innerHTML)」は、文字分割したい要素に特殊文字が入っている場合にアンエスケープするための処理になります。（※全ての特殊文字を網羅していません。）

例えば、HTMLで「&」を表示させる場合「&」と書くと思うのですが、そのまま1文字1文字分割するとなると「&」、「a」、「m」、「p」、「;」といったように分かれてしまいます。
これを防ぐためにアンエスケープの処理を入れることで、「&」という文字列があった場合に「&」に置き換えるようにしています。

アンエスケープの処理は下記記事を参考にさせていただきました👇

JavaScriptで正規表現（エスケープ編）

21行目からのforeachではHTMLの「split-text」クラスがついている1つ1つの要素のコンテンツ（文字）を1文字1文字、spanタグで囲む処理になっています！

例えば

<p class="split-text">テスト1です。</p>

は

<p class="splitText">
    <span>テ</span>
    <span>ス</span>
    <span>ト</span>
    <span>1</span>
    <span>で</span>
    <span>す</span>
    <span>。</span>
</p>

とする処理になります。