Question

所以我有以下html：

<div class="container"> some beautiful text here </div>

我想要的是：

<div class="container"> some <span class="highlight">beautiful</span> text <span class="highlight">here</span>

我知道如何知道这个词。感谢这个问题：How to highlight text using javascript 但我必须突出特定位置的文字。我有一个字符串的开始和结束位置。我试过迭代开始和结束位置列表，如下所示：

function highlight(divId, startPos, endPos) {
  inputText = document.getElementById(divId);
  var wholeText = inputText.innerText;
  var inHTML = wholeText.substring(0, startPos) + "<span class='highlight'>" + wholeText.substring(startPos, endPos-1) + "</span> " + wholeText.substring(endPos, wholeText.length);
  document.getElementById(divId).innerHTML = inHTML;
}


function highlightAll(fileA, fileB, JSONfile) {
  var startPositionsA = extractStartPosA(JSONfile);
  var endPositionsA = extractEndPosA(JSONfile);
  var startPositionsB = extractStartPosB(JSONfile);
  var endPositionsB = extractEndPosB(JSONfile);

  for(var i=0; i < startPositionsA.length; i++) {
    highlight("TextA", startPositionsA[i]-1, endPositionsA[i]);
  }

  for(var i=0; i < startPositionsB.length; i++) {
    highlight("TextB", startPositionsB[i]-1, startPositionsB[i]);
  }
}

但是每次迭代后都会重写innerhtml，所以最后我只突出显示一个单词 - 在最后一次迭代后留下的单词。

有人可以帮帮我吗？我没有任何想法可以走得更远。谢谢！

Answer 1

如果你在startPosition和endPosition中获得了正确的位置，你可以创建一个包含突出显示的var：

var highlightStart = "<span class='highlight'>";
var highlightEnd = "</span>";

只需将位置上的文本拆分为多个部分，然后按正确的顺序将部分和突出显示的部分放在一起

Answer 2

这是你想要的吗？

function highlight(id, start, end) {
 var html = document.getElementById(id).innerHTML;
 document.getElementById(id).innerHTML= [html.slice(0, start), '<span class="highlight">', html.slice(start, end), '</span>', html.slice(end)].join('');

}

知道文本的开始和结束位置的span标签中的文本

2 个答案: