pregunta

¿Cómo pongo palabras en elementos <span> en un <div> mientras mantengo la posición del cursor? Por ejemplo: si alguien escribió:
"el tipo zorro saltó sobre el perro", daría como resultado:

 <span>the</span> <span>fox</span> <span>guy</span>...

intentar

 document.querySelector("#container").addEventListener("input", function() { this.innerHTML = "<span>" + this.innerText .replaceAll("&", "&amp;") //escape HTML .replaceAll("<", "&lt;") .replaceAll(">", "&gt;") .split(" ") .join("</span><span>") + "</span>"; });

No funcionó porque no mantuvo la posición del cursor, simplemente teletransportó el cursor hasta el final.

ACTUALIZAR:

Quiero usar el evento de input porque quiero que se divida mientras la persona escribe, y no cuando hace clic para salir.