【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

【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タグで囲む方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍