こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

文字列を一文字ずつタグで囲えば、それぞれタイミングをずらしたアニメーションを指定したり、文字色やサイズを個別に指定したり活用の幅が広がります。
静的の書かれたHTMLの場合は制作者が1文字ずつ<span>タグを使い、囲っていけばいいですが、CMSでクライアントが更新していくブログなどの場合はこの方法は難しいです。

そんな時はjQueryを使います。
jQueryを使うことで文字列を取得して分割してタグで囲ってあげることでクライアントがCMSで更新していく部分も1文字ずつタグで囲うことが出来ます。

この記事では、jQueryを使い文字列を取得して分割して1文字ずつタグで囲う方法をご紹介したいと思います。

実装したいこと

<p>【jQuery】テキストを分割して1文字ずつタグで囲う方法</p>

<p>タグに囲われているテキストを以下のように1文字ずつ<span>タグで囲う構造に変換するコードを作成します。

<p>
<span>【</span>
<span>j</span>
<span>Q</span>
<span>u</span>
<span>e</span>
<span>r</span>
<span>y</span>
<span>】</span>
<span>テ</span>
<span>キ</span>
<span>ス</span>
<span>ト</span>
<span>を</span>
<span>分</span>
<span>割</span>
<span>し</span>
<span>て</span>
<span>1</span>
<span>文</span>
<span>字</span>
<span>ず</span>
<span>つ</span>
<span>タ</span>
<span>グ</span>
<span>で</span>
<span>囲</span>
<span>う</span>
<span>方</span>
<span>法</span>
</p>

このようにテキストを1文字ずつ<span>タグで囲うには、charAt()関数、またはsplit()関数を使うことで実現することが出来ます。

それぞれの方法を見ていきましょう。

charAt()関数を使う方法

charAt()関数は文字列から指定された位置の文字を取得することが出来ます。
charAt()関数を使う場合はこちら。

完成コード

まずはテキストを分割して1文字ずつタグで囲う完成コードを見てみましょう。

$(document).ready(function(){
    var text = $('p').text();
    var newText = '';
    for(var i=0; i<text.length; i++) {
        newText += '<span>' + text.charAt(i) + '</span>';
    }
    $('p').html(newText);
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

ここからはコードの解説をしていきます。

var text = $('p').text();

<p>タグの文字列を取得して配列に格納します。

var newText = '';

分割した文字列を格納し直すための変数を定義します。

for(var i=0; i<text.length; i++) { ... }

変数に対してlengthプロパティを使うことで、その変数に格納されている文字数を取得することが出来ます。
このfor文では、変数に格納されている文字数の回数だけ処理を繰り返します。

newText += '<span>' + text.charAt(i) + '</span>';

ここでcharAt()関数を使います。
charAt()関数は引数に指定した位置の文字列を取得する関数です。
for文の中でtext.charAt(i)のように使うことで、1回目のiは「0」番目の位置にある文字列、2回目のiは「1」の位置にある文字列という考えで、一文字ずつ取得して、それを<span>タグで囲い、変数に追加していきます。

text.charAt(0)・・・【
text.charAt(1)・・・j
・
・
・
text.charAt(28)・・・法

このようになっています。

for文の処理が完了する時には全ての文字列を一文字ずつ、<span>で囲った状態のデータを作り出すことが出来ます。

$('p').html(newText);

最後に、もともとあったタグの部分を<span>で1文字ずつ囲ったデータに置き換えます。

split()関数を使う方法

split()関数を使う場合はこちら。

完成コード

まずはテキストを分割して1文字ずつタグで囲う完成コードを見てみましょう。

$(document).ready(function(){
    var text = $('p').text();
    var newText = '';
    var characters = text.split('');
    for(var i=0; i<characters.length; i++) {
        newText += '<span>' + characters[i] + '</span>';
    }
    $('p').html(newText);
});

実装サンプルはこちら。

See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.

コードの解説

var text = $('p').text();

<p>タグの文字列を取得して配列に格納します。

var newText = '';

分割した文字列を格納し直すための変数を定義します。

var characters = text.split('');

ここでsplit()関数を使います。
charAt()関数は引数に指定した文字列で変数の中にある文字列を分割して配列化し、空の引数を指定することで、変数の中にある文字列を1文字ずつ分割して配列に格納します。

characters[0]・・・【
characters[1]・・・j
・
・
・
characters[28]・・・法

このように1文字ずつ分割されて配列に格納されます。

for(var i=0; i<characters.length; i++) { ... }

配列に対してlengthプロパティを使うことで、その配列の配列数を取得することが出来ます。
このfor文では、配列数の回数だけ処理を繰り返します。

newText += '<span>' + characters[i] + '</span>';

for文の中でcharacters[i]のように使うことで、1回目のiは「0」番目の位置にある文字列、2回目のiは「1」の位置にある文字列という考えで一文字ずつ取得して、それを<span>タグで囲い、変数に追加していきます。

for文の処理が完了する時には全ての文字列を一文字ずつ、<span>で囲った状態のデータを作り出すことが出来ます。

$('p').html(newText);

最後に、もともとあったタグの部分を<span>で1文字ずつ囲ったデータに置き換えます。

まとめ

いかがでしたか？
文字列を分割してタグで囲う方法をご紹介しました。
charAt()関数、split()関数、どちらの方法を使っても同様の結果が得られます。
是非、コピペして使ってみて下さい。