【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) => `<span style="transition-delay:${idx * 40}ms">${letter}</span>`)
    .join('')
})

要素のinnerTextを取得して、split(")で空で分割することにより、一文字ずつ分割されます。 そして、チェーンメソッドが使えるので、そのままmapをつなげて、spanタグなど加えたいものを加えます。 mapは一行で書いている場合、returnも省略されているので、チェーンメソッドが使えます。 その後もチェーンメソッドが使えるので、joinで(")でつなげます。 splitやjoinの使い方は、JavaScriptで文字列を操作する方法を参考にしてみてください。 また、mapの使い方は、JavaScriptの配列を加工するmap(),filter(),reduce()メソッドの使い方を参考にしてみてください。