innerHtml.replaceはテキストだけでなくタグを置き換えます

Question

私は現在、発声の特定の単語を<span>WORD</span要素に置き換えようとしています。私はバックエンドからの単語から開始と終了のインデックスを取得します。発声にはいくつかの単語が含まれ、置き換えられます。だから私は置き換える単語の配列を繰り返し、発言の単語を置き換えようとします。

しかし、私はinnerHtml.replace(word, <span>word</span>)でそれをやってみました。ここでの問題は、例えば第2の単語が「sp」であるとき、第1の単語のタグのspが、私の発声において単語「sp」の代わりに置き換えられることである。

私は、単語の開始と終了のインデックスに単語を置き換えようとしました（これは問題を解決すると考えていました）。しかし、開始点と終了点が 'sp'の点を指していて、スパンの部分を置き換えていて、置きたい言葉ではないように思えます。

したがって、私は発言の中の単語だけを置き換え、HTMLエレメントは<span>WORD</span>と置き換えない方法を探しています。

私のコード今：私のコメントにさらに

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

、ここで私はそれを実装する方法をです。この例では、アンカータグのhtml属性には「oo」が含まれており、tfootタグも変更されていません。

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>