一文字ごとにスタイルを適用させたい
例えば以下のようなものを作りたいとします。
ここで最も簡単なのは、下記のように一文字ずつspanタグで囲んでスタイリングする事だと思います。
HTML
<p><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></p>ただ、これだと一々面倒ですし、単語の長さや使用頻度によっては見通しの悪いコードになってしまいます。
そこでJavaScriptを使って、出来るだけ新しく且つ直感的に分かり易いコードで関数に纏めて、使い回せるようにしていきたいと思います。
私なりの最も分かり易いやり方
以下のようになりました。
HTML
<pid="insert"></p>JavaScript
constinsertTag=(word,target)=>{for(constcharacterofword){document.querySelector(target).innerHTML+=`<span>${character}</span>`;}}insertTag('Google','#insert');挙動としては、Stringをfor...ofでループさせると一文字ずつ処理が行えるので、第ニ引数で指定した要素にinnerHTMLを用いてその文字ごとにspanタグを挿入しています。
念のため<p id="insert"></p>の中身をデベロッパーツールで確認してみます。
問題なく動作していました。
動作デモ → https://jsfiddle.net/hm469fwg/
タグ毎にclassを付けたい場合
今度はforEachを使い、分かりやすくclassにindexを使用し番号が1から始まるようにしました。
JavaScript
constinsertTag=(word,target)=>{[...word].forEach((character,index)=>{document.querySelector(target).innerHTML+=`<span class="item${++index}">${character}</span>`})}insertTag('Google','#insert');こちらの挙動は、第一引数のwordをスプレッド演算子を用いて配列化しています。[...word]の中身を確認してみると、以下のようになっています。
そしてこれに対してforEachでループして一文字ごとにspanタグを挿入しています。
前者もforEachで行っても良かったのですが、タグ付けするだけで良い場合はfor...ofの方がコードが簡潔に書けるのでそちらを採用しました。
こちらも念の為<p id="insert"></p>の中身を確認してみます。
問題なく動作していました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ