突出显示从开始索引到结束索引的文本中的多行（范围突出显示）

Question

我有一个长文本和一个包含一些对象的数组。每个对象都有一个开始键和一个结束键。我要做的是突出显示文本，仅在我从数组中获得的索引上。

我写了这段代码：

   function HighlightRange(text: any, start: any, end: any, color: any) {
    return (
      text.substring(0, start) +
      `<span style="background-color: ${color}">` +
      text.substring(start, end) +
      `</span>` +
      text.substring(end)
    );
  }

如果数组中只有一个对象，它会完美运行。问题是，当我使用它时，它会更改文本，现在它有更大的长度，并且高亮现在需要获得新的长度才能突出显示确切的范围。

我试过了：

     value?.input_spans.map((value: any, key: any) => {
      newString = HighlightRange(
        originalTextArea,
        value.start,
        value.end,
        "lightgreen"
      );
    });

是否可以在不改变文本长度的情况下遍历所有对象并从头到尾突出显示所有文本？

Answer 1

这是.reduceRight() 的罕见用例之一。正如@Robert Sabitz 提到的那样，从字符串末尾开始将保持其感兴趣的索引不变。

var prg = document.getElementById("lorem"),
    btn = document.getElementById("btn"),
    ixs = [{start:28, end:39}, {start:101, end:111}],
    clr = "lightgreen";
    
    
function highlighter(str,ixs,color){
  return ixs.reduceRight( (s,ix) => `${s.slice(0, ix.start)}<span style="background-color:${color}">${s.slice(ix.start,ix.end)}</span>${s.slice(ix.end)}`
                        , str
                        );
}

btn.addEventListener("click", _ => prg.innerHTML = highlighter(prg.textContent,ixs,clr));

<p id="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt dictum sapien, sit amet vestibulum ex tempus eget. Ut vitae.</p>
<button id="btn">Highlight</button>

Answer 2

只需从要突出显示的项目末尾迭代（类似于从数组中删除元素而不更新索引）。这样一开始的索引就会保持正确。

这里的问题在于嵌套/重叠突出显示。如果是您的情况，则需要一一完成。

例子

const spansToHighlight = value?.input_spans
if (!spansToHighlight) {
   return
}
let highlightedText = originalTextArea
for (let i = spansToHighlight.length - 1; i >= 0; i++) {
   highlightedText = HighlightRange(
        highlightedText ,
        value.start,
        value.end,
        "lightgreen"
   );
}