【JavaScript】テキストを分割して一文字ずつタグで囲む

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでテキストを分割して一文字ずつタグで囲む方法をご紹介しています。

要素が持っているテキストを取得し、分割したいときに参考にしていただければと思います。

では、解説していきます。

要素を作成する

まずは元となる要素を作成します。作成する要素にテキストを持たせます。属性などは任意に変更してください。

<p id="el">ダミーテキストダミーテキスト</p>

要素を取得する

続いて、作成した要素をJavaScriptで取得します。本記事では「id」属性で取得しています。

let el = document.getElementById('el');

テキストを取得する

要素からテキストを取得します。テキストの取得にはNode.textContentを使用します。

let text = el.textContent;

テキストを配列に分割する

テキストの分割はString.split()で行います。separatorに「空文字」を指定することで一文字ずつ分割することができます。

let result = text.split('');

分割したテキストをタグで囲み変数にまとめる

String.split()で分割したテキストを一つの変数にまとめます。繰り返し処理で配列の値を連結します。連結する際に値をタグで囲みます。

let newText = '';

for(let i = 0; i < result.length; i++){
    newText += '<span>' + result[i] + '</span>';
}

変数の値で要素の中身を置き換える

最後に連結した値で要素の中身を置き換えます。今回は値にタグを含んでいるのでelement.innerHTMLを使用します。

el.innerHTML = newText;

以上でテキストを分割して一文字ずつタグで囲む処理は完了です。

まとめ

本記事でご紹介した内容をまとめます。

let el = document.getElementById('el');
let text = el.textContent;
let result = text.split('');
let newText = '';

for(let i = 0; i < result.length; i++){
    newText += '<span>' + result[i] + '</span>';
}

el.innerHTML = newText;

下記は本記事でご紹介した内容を実行した際のデモです。開発ツール等で確認するとテキストが一文字ずつタグで囲まれていることがご確認いただけます。

DEMO

See the Pen
Split text wrap tags | JavaScript by ryohei (@intotheprogram)
on CodePen.

最後に

テキストを一文字ずつ分割する処理は、テキストアニメーションを実装する際に役立ちます。使いどころは限定されますが、知っておくと便利なのでぜひ！

以上、JavaScriptでテキストを分割して一文字ずつタグで囲む方法のご紹介でした！