javascript - 如何在特定索引处的 div 内的文本子字符串周围添加 div 或 span？

Question

我有一个包含字符串的 div。例如:

<div id='original'>A red chair that is on the left of another chair next to the door</div>

我已经在数据库中存储了一些用户选择的子字符串，并带有开始和结束索引。例如:

phrase: chair, start: 43, end: 48
phrase: the door, start: 58, end: 66

现在，我想在“原始”div 中的上述两个短语周围添加一个 span 或 div，以便突出显示这些短语。

预期结果:

<div id='original'>A red chair that is on the left of another <div style="display:inline; color:#ed3833; cursor:pointer;">chair</div> next to <div style="display:inline; color:#ed3833; cursor:pointer;">the door</div></div>

对于一个短语，我可以使用开始和结束索引在其周围插入 div，但对于后续插入，它显然会失败，因为由于在第一个短语周围添加了 div，索引现在已更改。你能帮我解决这个问题吗？

我不知道这是否有帮助，但为了在第一个短语周围添加 div，我使用以下逻辑:

str = $('#original').text()
var preStr = str.substring(0, startIdx);
var newStr = `<div style="display:inline; color:#ed3833; cursor:pointer;">${phrase}</div>`
var postStr = str.substring(endIdx, str.length);
result = preStr+newStr+postStr;

如果您需要更清晰的信息，请告诉我，我会尽力解释得更好。

Answer 1

您可以构建索引数组并执行以下操作:

var str = $('#original').html();

var startInd = [43, 58];
var lastInd = [48, 66];
var count = startInd.length;

for (let i = 0; i < count; i++) {
  let pre = str.substring(0, startInd[i]);
  let post = str.substring(lastInd[i], str.length);
  let phrase = str.substring(startInd[i], lastInd[i]);

  let nextPhrase;

  if (i < count - 1) {
    nextPhrase = str.substring(startInd[i + 1], lastInd[i + 1]);
  }

  str = pre + `<div style='display:inline; color:#ed3833; cursor:pointer;'>${phrase}</div>` + post;

  if (i < count - 1) {
    startInd[i + 1] = str.indexOf(nextPhrase, startInd[i + 1]) - 1;
    lastInd[i + 1] = startInd[i + 1] + nextPhrase.length;
  }

}

$('#original').html(str);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id='original'>A red chair that is on the left of another chair next to the door</div>