makeSpans.js

main.es5.js

'use strict'

function _toArray(arr) { return Array.isArray(arr) ? arr : Array.from(arr) }

function makeSpans (selector) {
  var _document$querySelect = document.querySelectorAll(selector)
  var _document$querySelect2 = _toArray(_document$querySelect)
  var elements = _document$querySelect2.slice(0)

  return elements.map(function (element) {
    var text = element.innerText.split('')
    var spans = text.map(function (letter) {
      return '<span>' + letter + '</span>'
    }).join('')
    return element.innerHTML = spans
  })
}

// usage with single selector
makeSpans('h1')

// or with multiple selectors
makeSpans('h1, h2, .heading')

main.es6.js

// this function takes text and wraps all the letters in spans
const makeSpans = selector => {
  const [...elements] = document.querySelectorAll(selector)
  return elements.map(element => {
    const text = element.innerText.split('')
    const spans = text
      .map(letter => '<span>' + letter + '</span>')
      .join('')
    return element.innerHTML = spans
  })
}

// usage with single selector
makeSpans('h1')

// or with multiple selectors
makeSpans('h1, h2, .heading')