innerHtml.replace remplace les balises et pas seulement le texte

Question

J'essaie actuellement de remplacer certains mots d'un énoncé par un élément <span>WORD</span. Je reçois les indices de début et de fin à partir des mots du backend. Un énoncé peut avoir plusieurs mots qui seront remplacés. Donc, je viens de parcourir la liste des mots à remplacer et essayer de remplacer les mots dans l'énoncé.

Cependant, j'ai essayé de le faire avec innerHtml.replace(word, <span>word</span>). Le problème ici est que quand par exemple le deuxième mot est 'sp', le sp de l'étiquette du premier mot est remplacé au lieu du mot 'sp' dans mon énoncé. J'ai alors essayé de remplacer le mot ma mise dans l'index de début et de fin du mot (ce qui je pensais résoudre le problème). Mais il semble que si l'index de début et de fin pointe sur 'sp', il remplace toujours la partie de span et non le mot que je voulais remplacer. Donc, je cherche un moyen de remplacer seulement les mots dans un énoncé et non les éléments HTML avec <span>WORD</span>.

code Mon moment:

var label = document.getElementById('match-text' + index); 
     label.innerHTML = label.innerHTML.replace(label.innerText.substring(entity.start, entity.end),'<span ng-click="showEntityDetailsPage($event, ' + index + ', ' + entityIndex + ')" style="background-color:' 
     + color + '; border: 3px solid ' + borderColor + ';" class="highlighted-entities">' + label.innerText.substring(entity.start, entity.end) + '</span>'); 
     $compile(label)($scope); 

Answer 1

suite à mon commentaire, voici comment je mettre en oeuvre. Dans cet exemple, l'attribut html de la balise d'ancrage contient "oo", tout comme la balise tfoot, et ils ne sont pas modifiés.

function replaceText(obj, search, wrapElement, elementClass) { 
 
    switch (obj.nodeType) { 
 
    case 3: // it's a text node 
 
     if (obj.nodeValue.indexOf(search) > -1) { 
 
     var bits = obj.nodeValue.split(search); 
 
     var nextSib = obj.nextSibling; 
 
     obj.nodeValue = bits[0]; 
 
     for (var i=1; i < bits.length; i++) { 
 
      var el = document.createElement(wrapElement); 
 
      el.className = elementClass; 
 
      el.innerHTML = search; 
 
      var tn = document.createTextNode(bits[i]); 
 
      if (nextSib) { 
 
      obj.parentNode.insertBefore(tn, nextSib); 
 
      obj.parentNode.insertBefore(el, tn); 
 
      } else { 
 
      obj.parentNode.appendChild(tn); 
 
      obj.parentNode.insertBefore(el, tn); 
 
      } 
 
     } 
 
     return 2*(bits.length-1); 
 
     } 
 
    break; 
 
    default: // it's not a text node 
 
     for (var i=0; i < obj.childNodes.length; i++) { 
 
     var j = replaceText(obj.childNodes[i], search, wrapElement, elementClass); 
 
     if (j) i+=j; 
 
     } 
 
    break; 
 
    } 
 
} 
 

 
replaceText(document.getElementById('starthere'), "oo", "span", "myspanclass");

.myspanclass { 
 
    color: red; 
 
}

<div id='starthere'>Noonhour 
 
    <span>Boondoggle 
 
    <a href="http://google.com">Google</a> 
 
    </span> 
 
    The Moon is a Balloon 
 
    <table><tfoot><tr><th>oops!</th></tr></tfoot></table> 
 
</div>