【JavaScript】文字を一文字ずつ分割して結合する方法

2022年4月14日2022年4月15日JavaScript

JavaScriptで文字を一文字ずつ分割して結合する方法を紹介します。

JavaScriptで文字を一文字ずつ分割して結合するデモ

See the Pen
mapで文字分割して結合 by Sosak (@Sosak2021)
on CodePen.

JavaScriptのソースコード

const labels = document.querySelectorAll('.form-item label')

labels.forEach(label => {
  label.innerHTML = label.innerText
    .split('')
    .map((letter, idx) => `${letter}`)
    .join('')
})

要素のinnerTextを取得して、split(")で空で分割することにより、一文字ずつ分割されます。
そして、チェーンメソッドが使えるので、そのままmapをつなげて、spanタグなど加えたいものを加えます。
mapは一行で書いている場合、returnも省略されているので、チェーンメソッドが使えます。
その後もチェーンメソッドが使えるので、joinで(")でつなげます。

splitやjoinの使い方は、JavaScriptで文字列を操作する方法を参考にしてみてください。
また、mapの使い方は、JavaScriptの配列を加工するmap(),filter(),reduce()メソッドの使い方を参考にしてみてください。