Split

by Génesis García Morilla

HTML

<form>
  <input title="String you want to split" required>
  <input title="Delimiter" required>
  <button>Split</button>
</form>

JavaScript

function split(str, del) {
  let arr = []
  let piece = '' // slice we want to save
  let buffer = '' // stores delimiter
  let j = 0 // delimiter index

  for (let i = 0; i < str.length; i++) {
    // Add to delimiter
    if (str[i] == del[j]) {
      buffer += str[i]
      j++
    }
    // Add to piece 
    else {
      piece += buffer + str[i]
      buffer = ''
      j = 0
    }

    // If found delimiter or the end save piece
    if (buffer == del || i == str.length - 1) {
      if (buffer != del) piece += buffer
      if (piece != '') arr.push(piece)
      piece = ''
      buffer = ''
      j = 0
    }
  }

  return arr
}


// Selectors
const $str = document.querySelector('input:first-of-type')
const $del = document.querySelector('input:last-of-type')
const $form = document.querySelector('form')

// Get and show string pieces
$form.onsubmit = e => {
	e.preventDefault()
  
  document.body.insertAdjacentHTML('beforeend', 
    `<p>'${$str.value}' with '${$del.value}': 
      [${split($str.value, $del.value).join(', ')}]</p>`)
}