【JavaScript】文字列を取得して一文字ずつspanタグで囲む方法

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

本記事では、JavaScriptで文字列を取得して一文字ずつspanタグで囲む方法をご紹介しています。取得した文字列を一文字ずつ表示したりするアニメーションで活躍すること間違いなしです。

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

文字列を取得して一文字ずつspanタグで囲む

下記は文字列を取得して一文字ずつspanタグで囲むサンプルです。JavaScriptで要素から文字列を取得し、一文字ずつspanタグで囲んで対象の要素の内容を置き換えます。

HTML

<p class="target">IntotheProgram</p>

JavaScript

/**
 * 文字列を一文字ずつ<span>で囲む関数
 * @param {String} str
 * @return {String}
 */
const wrapCharSpan = function(str){
    return [...str].map(char => `<span>${char}</span>`).join('');
}

//対象の要素を取得する
const target = document.querySelector('.target');
//要素の内容を関数の実行結果で置き換える
target.innerHTML = wrapCharSpan(target.textContent);

実行結果

<p class="target">
  <span>I</span>
  <span>n</span>
  <span>t</span>
  <span>o</span>
  <span>t</span>
  <span>h</span>
  <span>e</span>
  <span>P</span>
  <span>r</span>
  <span>o</span>
  <span>g</span>
  <span>r</span>
  <span>a</span>
  <span>m</span>
</p>

JavaScriptのquerySelectorに指定している.targetに対象の要素を指定します。対象には、一文字ずつspanタグで囲みたいtextContentを持つ要素を指定いただければと思います。

上記のサンプルではアロー関数を使用しているため、IE11では動作しません。IE11の対応が必要な場合はこちらで変換してご利用ください。

ここまでで文字列を一文字ずつspanタグで囲むことができるようになりました。せっかくですので、本記事の内容を使って簡単なアニメーションを作成してみたいと思います。定番ですが、一文字ずつフェードインで表示するアニメーションを作成してみます。

文字列を一文字ずつフェードインで表示するアニメーション

では実際に作成していきます。フェードインだけでも良いですが、今回は右から左の方向に文字がふわっと表示されるようにしてみます。実行結果も用意していますので、似たようなアニメーションを実装する際に参考にしていただければ幸いです。

HTML

<p class="target">IntotheProgram</p>

CSS

.target {
    span {
        display: inline-block;
        transition: 1s;
        opacity: 0;
        transform: translateX(50px);
        
        &.is-animated {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

JavaScript

const wrapCharSpan = function(str){
    return [...str].map(char => `<span>${char}</span>`).join('');
}

const target = document.querySelector('.target');
target.innerHTML = wrapCharSpan(target.textContent);

Array.from(target.children).forEach((char, index) => {
    window.setTimeout(function () {
        char.classList.add('is-animated');
    }, 100 * index);
});

実行結果

See the Pen 7130 by ryohei (@intotheprogram) on CodePen.

オブジェクトにまとめたり、関数化したりするともっと使い回しやすくなると思いますので、ぜひやってみてくださいね！

最後に

業務案件で久しぶりに一文字ずつ表示するアニメーションを実装することになり、せっかくなら一から考えてみようということで今回のアニメーションの作成にいたりました。もっと良い方法があるでしょうが、意図した動きにはなっているので満足です。もっと使い回しやすいようにカスタマイズできれば修正しておきます！

以上、 JavaScriptで文字列を取得して一文字ずつspanタグで囲む方法のご紹介でした！