Searching specific string in innerHTML

Question

I load some highlights as a json and i look for the selection in HTML.

function loadCorrections1(){
  
  $.ajaxSetup({
      async: false
  });

  $.getJSON('../loadCorrections.php?number=<?php echo $number?>&idDoc='+$('#idDoc').val(), 
   function(data) {
    highlights = [];
    $.each(data, function(index) {
        //test si la correction pour chaque highlight est null
        if(data[index].highlight != null && data[index].correction == null){
          var text = data[index].highlight;
          highlights.push(text);
          idTables.push(data[index].id);
        }
    });
  });
  
}

and i highlight them like this way:

function highlightErrors(){
  loadCorrections1();
  var txt = document.getElementsByTagName("body")[0];
  var innerHTML = txt.innerHTML;
  for(i=0;i<highlights.length;i++){

    var text = highlights[i];
    var inner = innerHTML;
    //supression d espce a la fin de la phrase
    if(text.endsWith(' ')){
      text = text.substring(0,text.length - 1);
    }
    //supression d espce en debut de phrase
    if(text.startsWith(' ')){
      text = text.substring(1,text.length);
    }
    var index = inner.indexOf(text);
    console.log(text);
    console.log(index);

    if (index >= 0) { 
      innerHTML = inner.replace(text,"<span class='thisSpan' onclick='Unhighlight(); return false' onmouseover='correctSentence(event);hover(this);' onmouseout='unhover(this);' style='background-color: yellow;'> "+text+" </span>");
      txt.innerHTML = innerHTML;
    }
  }
  $("#correct").attr('checked', true);
}

the probleme is some selection i made sure that they look exactly like the innerHTML they actually return -1 i the following line of code : var index = inner.indexOf(text);

i dont understand why this happens.