innerHtml.replace替換標籤而不僅僅是文字

-1

我目前嘗試用WORD</span元素替換髮音中的某些單詞。我從後端的單詞中獲得開始和結束索引。一個話語可以有幾個詞將被替換。所以我只是迭代單詞的數組來替換，並嘗試替換話語中的單詞。innerHtml.replace替換標籤而不僅僅是文字

但是，我試着用innerHtml.replace(word, word)來做。這裏的問題是，例如當第二個單詞是'sp'時，第一個單詞的標籤的sp被替換爲我的話語中的單詞'sp'。

然後我嘗試用這個詞替換我放入詞的開始和結束索引（我認爲會解決問題）。但是，似乎如果開始和結束索引指向'sp'，它仍然會取代span的一部分，而不是我想要替換的詞。

所以，我正在尋找一種方法來替換話語中的單詞而不是WORD的HTML元素。

我的代碼現在：

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);

來源

2017-06-06 threxx

你可以通過'label'找到的所有子節點進行迭代，並做他們的innerText屬性替換。使用innerHTML不會因爲你發現的原因而工作。 – James

@James所以在開始時，我的標籤只有一個子節點，這是整個話語。那麼，我想那樣不行？ – threxx

而且我的評論，這裏是我將如何實現這一點。在這個例子中，錨標籤的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>

來源

2017-06-06 18:40:40 James

我的心臟驅動器downvoters。 – James

不是我。我試過這個 – threxx

，這對我不起作用，因爲nodeValue只需要文本，但是我的'替換'總是一個html內容（如字）。 – threxx

innerHtml.replace替換標籤而不僅僅是文字

回答

相關問題