WEBTODESIGN

【コピペOK】JavaScriptで自動的に文字を一つずつspanで囲む

文字一つひとつにアニメーションをつけたい時など、HTML上で一つ一つ手動でspanタグをつけるのは大変骨が折れるので…！

JSでspanをつけちゃいましょう。

最低限のコード

文字を分けてspanで囲む最低限の記述は以下です。

<p span="spanWrap">テキスト</p>
const target = document.querySelector('.spanWrap');
target.innerHTML = [...target.textContent].map(t => `<span>${t}</span>`).join('');

上記を実行するだけで、取得したオブジェクトの文字一つひとつがspanで囲まれます。スマートですね〜😌

解説

const target = document.querySelector('.spanWrap');

.spanWrapというクラスのついたオブジェクトを取得します。

[...target.textContent]

取得したオブジェクトの文字情報を、一文字ずつ配列にします。
今回の場合だと、テキストという文字列を[‘テ’,’キ’,’ス’,’ト’]という配列に変換しています。

.map(t => `<span>${t}</span>`)
//`<span>${t}</span>`　は　'<span>' + t + '</span>'　と同義です。

.map()は既存の配列から新しい配列を生成するメソッドです。先ほど生成した[‘テ’,’キ’,’ス’,’ト’]配列の一つひとつをspanタグで囲むという記述です。

.join('')

.join()配列を結合して文字列を生成するメソッドです。先ほど作ったspan付きの新しい配列を文字列に変換できます！

引数を指定しないとコンマが入ってしまうので、引数に”（何もなし）を指定しています。

target.innerHTML =

今生成した文字列を、既存の文字列で上書きします！

これで、spanタグで分けられた文字列の自動生成が完成です！

複数に対応した実用的なコード

複数のオブジェクト内の文字列を分割したい場合は以下のように書きました。

const spanWrapEvent = target => {
    const ta = document.querySelectorAll(target);
    if(ta.length !== 0){
        ta.forEach(e => {
            e.innerHTML = [...e.textContent].map(t => `<span>${t}</span>`).join('');
        });
    }
}
spanWrapEvent('.spanWrap');

これで、このクラスがついた全てのオブジェクト内の文字列が一文字ずつspanタグで囲まれます🙌

解説

const ta = document.querySelectorAll(target);

第一引数のクラス名のついたオブジェクトを全て取得します。

if(ta.length !== 0){

}

第一引数が0個じゃない時のみという分岐をかけます。

これは複数のページで同じjsファイルを使っている時にあると良いです。第一引数が存在しなかったときに、これが無いとエラーになります。なので、一つのページでしか使っていない場合や全てのページに必ず第一引数が存在する場合は省略しても大丈夫です。

ta.forEach(e => {
    e.innerHTML = [...e.textContent].map(t => `<span>${t}</span>`).join('');
});

取得したオブジェクトそれぞれに、分割してspanをつける処理を行えば完了です。

今後コピペして使えるコードができました😊ほくほく

RECOMMENDATION

NEWEST