How to place range labels around each word in a div using a content set

Question

So my current predicament is that I cannot place html tags <span>around every word in the content editable editor. With span tags having a sequential div id. The html code I have is below.

<div contentEditable id="InputOne" onkeyup="UpdateTextarea(event)"></div>

and here is the javascript

<script type="text/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("<br>");
TextTest=Alert.split("\n\n");
Text1=Alert.split("\n\n");
B=0;
C=0;
for (index = 0; index < Text1.length; ++index) {
Text1[index]="<p> "+Text1[index]+" </p> ";
/*if(C===0){
Text1[index]="<p>"+Text1[index];
C=1;
}else{Text1[index]=Text1[index]+"</p>";C=0;}*/

B++;
}
Text1=Text1.join("");
//Text1="<p>"+Text1+"</p>";
Text2 = Text1.split(" ");

A=0;
for (index = 0; index < Text2.length; ++index) {
if(Text2[index] !== "<p>" && Text2[index] !== "</p>")
    {
    //alert(Text2[index]);
   OutputText[index]="<span id='Word-"+A+"'>"+Text2[index]+" </span>";
    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 = "<a href='" + Data.A1 + "'>" + Data.A2 + "</a>";

});

        OldStorage[index]=Text2[index];
    }
}else{OutputText[index]=Text2[index];}
A++;
}
DivA=OutputText.join("");
document.getElementById("InputOne").innerHTML=DivA;

    }


</script>

, JavaScript, - 1. , . 2. .innerhtml , , . , , div id InputOne span , . , , , , . . jquery

Answer 1

, ,

, , setCaretLast(), . . , , , .

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] = "<span id=\"word-"+i+"\">"+split_text[i]+"</span>"; //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();
}

<div id="something" contenteditable>
   you can type here
  </div>

Hide result