一文字ごとにスタイルを適用させたい

例えば以下のようなものを作りたいとします。

ここで最も簡単なのは、下記のように一文字ずつspanタグで囲んでスタイリングする事だと思います。

<p><span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span></p>

ただ、これだと一々面倒ですし、単語の長さや使用頻度によっては見通しの悪いコードになってしまいます。
そこでJavaScriptを使って、出来るだけ新しく且つ直感的に分かり易いコードで関数に纏めて、使い回せるようにしていきたいと思います。

私なりの最も分かり易いやり方

以下のようになりました。

<pid="insert"></p>

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から始まるようにしました。

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>の中身を確認してみます。

問題なく動作していました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

動作デモ → https://jsfiddle.net/jpueq2xm/