Question

我目前尝试用WORD</span元素替换某个单词中的某些单词。我从后端的单词中获取开始和结束索引。一个话语可以有几个将被替换的词。因此，我只是迭代替换的单词数组，并尝试替换话语中的单词。

但是，我尝试使用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);

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>

innerHtml.replace替换标签而不仅仅是文本

1 个答案: