こんにちは!Web制作エンジニアのモリヤス(@_moriyas)です。
今回は、HTMLとJavaScriptでの文字分割の方法をご紹介します!
今回の記事では割愛しますが(別記事で紹介予定)Webサイトを制作するときに、1文字1文字にアニメーションを持たせたいときなどに役に立つと思うのでぜひご覧ください!
コードとデモの紹介
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">テスト<3>です。</p>
<p class="split-text">テスト&4です。</p>
<p class="split-text">テスト'5'です。</p>
<p class="split-text">テスト"6"です。</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(/(<)/g, '<')
.replace(/(>)/g, '>')
.replace(/(")/g, '"')
.replace(/(')/g, "'")
.replace(/(&)/g, '&');
};
arraySplitText.forEach((element) => {
newText = '';
spanText = element;
text = unEscapeHTML(element.innerHTML);
text.split('').forEach((element) => {
// 文字列に空白(スペース)がある場合
if (element == ' ') {
newText += '<span> </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」、「;」といったように分かれてしまいます。
これを防ぐためにアンエスケープの処理を入れることで、「&」という文字列があった場合に「&」に置き換えるようにしています。
アンエスケープの処理は下記記事を参考にさせていただきました👇
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>
とする処理になります。
まとめ
以上になります!
冒頭でも述べた通り、1文字1文字にアニメーションを持たせたいときに使える内容です。特に1文字1文字のアニメーションがサイト内で何箇所も取り入れるときに役立つかと思います!(それぞれの箇所で全ての文字をspanタグで囲うのは大変だし、せっかくならプログラムにしたいですよねww)
実際にどう使うかは別記事にしようかと思っているのでお待ちくださいd( ̄  ̄)
※考慮不足や間違え、より良い方法などご指摘点があればぜひよろしくお願いいたしますm(_ _)m