Cómo colocar tags span alrededor de cada palabra en div con contenteditable set

Así que mi problema actual es que no puedo colocar tags html alrededor de cada palabra en el contenido editable. Con las tags span que tienen una identificación div secuencial. El código html que tengo está debajo.

 

y aquí está el JavaScript

  var Alert; var A=0; var B=0; var C=0; var Alert; var Text2= []; var OldStorage= []; var OutputText= []; function UpdateTextarea(e) { Alert = document.getElementById('InputOne'); Alert = Alert.innerText || Alert.textContent; //Alert = Alert.split("\n\n").join("
"); TextTest=Alert.split("\n\n"); Text1=Alert.split("\n\n"); B=0; C=0; for (index = 0; index < Text1.length; ++index) { Text1[index]="

"+Text1[index]+"

"; /*if(C===0){ Text1[index]="

"+Text1[index]; C=1; }else{Text1[index]=Text1[index]+"

";C=0;}*/ B++; } Text1=Text1.join(""); //Text1="

"+Text1+"

"; Text2 = Text1.split(" "); A=0; for (index = 0; index < Text2.length; ++index) { if(Text2[index] !== "

" && Text2[index] !== "

") { //alert(Text2[index]); OutputText[index]=""+Text2[index]+" "; if(Text2[index] !== OldStorage[index]) { //Getjson dont bother var getJSON = function(url, successHandler) { var xhr = typeof XMLHttpRequest != 'undefined' ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xhr.open('get', url, true); xhr.onreadystatechange = function() { var data; if (xhr.readyState == 4) { // `DONE` data = JSON.parse(xhr.responseText); successHandler && successHandler(data); } }; xhr.send(); }; //end getJSON("//codeonthecloud.com/School/Science-Fair/Backend.php?Q="+Text2[index]+"&Id="+index, function(Data) { document.getElementById("TESTDIV").innerHTML = "" + Data.A2 + ""; }); OldStorage[index]=Text2[index]; } }else{OutputText[index]=Text2[index];} A++; } DivA=OutputText.join(""); document.getElementById("InputOne").innerHTML=DivA; }

Pero el problema que tengo con el JavaScript es 1. no debe volver a escribir cada vez porque eso consume muchos recursos y puede causar retraso. 2. Debido a que .innerhtml está reemplazando el contenido, el cursor se mueve hacia atrás, así que cuando escribe, el texto sale en reversa. Así que supongo que lo que realmente quiero es una forma de encontrar espacios en el div con el ID InputOne y colocar las tags de cierre y apertura del intervalo con el ID establecido en un número secuencial. Si se está preguntando por qué lo necesito, es para que las palabras puedan identificarse de forma única, de modo que pueda establecer los tamaños de fuente palabra por palabra.
NOTA: Preferiría no usar jquery

El siguiente parece funcionar para mí

EDITAR

La función que agregué, setCaretLast (), no es mía. Lo encontré aquí . Tan pronto como pueda, actualizaré la respuesta nuevamente para usar expresiones regulares para que no tenga que cambiar el contenido TODO el tiempo.

 var something = document.getElementById('something'); // Gets the div, I couldn't remember what yours was called. something.addEventListener('keydown',function(event){ if(event.keyCode==32) { event.target.innerHTML = wrap_words(this.innerText); setCaretLast(this.id); console.log(this.innerHTML); } }); //Adds a key down event to gather the key presses. I have it set to run the //wrap_words function after the user hits enter. You should be able to set it however //you like. Perhaps just have this function called (minus the event.keycode stuff) on blur instead? function wrap_words(text){ var split_text = text.split(' '); //Splits the text by string var _out = []; //The output array count = split_text.length; //Gets the count. I was originally going to use this for somethign else but got side tracked. for(var i=0;i < count; i++){ _out[i] = ""+split_text[i]+""; //I would normally say "use element nodes" but this was just way, way faster. } return _out.join(' '); //Combines the _out array by spaces. } //Not my function. function setCaretLast(el) { var el = document.getElementById(el); var range = document.createRange(); var sel = window.getSelection(); range.setStart(el.childNodes[el.childNodes.length-1], 1); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); el.focus(); } 
 
you can type here