Javascript 突出显示文档中的文本以获得重复添加

我是新来的

angular js

。这里，我有一根绳子

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged

现在，我试图突出显示文档中的一个文本，问题是->

在本文中，我通过添加一些span类强调了Lorem Ipsum。现在，对于下一个迭代，如果startoffset和endoffset有一个字符串，它只是Ipsum，这是行业标准。现在，这里将有这两个重叠，然后突出显示是重叠的。因此，我无法得到准确的文本，因为偏移量会发生变化

现在，为此，我尝试了以下解决方案->

const str = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged';

const highlights = [{startOffset: 2, endOffset: 16}, {startOffset: 68, endOffset: 75}, {startOffset: 80, endOffset: 92}];

const result = [];
let currentIndex = 0;

highlights.forEach(h => {
  result.push(str.substring(currentIndex, h.startOffset));
  result.push(`<span class="mark">${str.substring(h.startOffset, h.endOffset)}</span>`);
  currentIndex = h.endOffset;
});

result.push(str.substring(currentIndex, str.length));

document.getElementById('root').innerHTML = result.join('')

Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变； const highlights=[{startOffset:2，endOffset:16}，{startOffset:68，endOffset:75}，{startOffset:80，endOffset:92}]； 常量结果=[]； 设currentIndex=0； 亮点.forEach（h=>{ 结果.推送（str.substring（currentIndex，h.startOffset））； push（`str.substring（h.startOffset，h.endOffset）}`）； currentIndex=h.endOffset； }); 结果.push（str.substring（currentIndex，str.length））； document.getElementById（'root'）.innerHTML=result.join（''）

---

现在，在这里，它解决了我的问题，但这里一个重复的文本被添加到我的字符串中，如果它是重叠的话。如果有一个文本彼此重叠，那么它就是将文本分开。但是我不想要那种行为。有人能帮我吗？

我不确定，如果我正确理解了你的问题，但是如果突出显示的区域重叠，你的问题就会出现，就像这样

var highlights = [{startOffset: 2, endOffset: 16}, 
                  {startOffset: 85, endOffset: 100}, 
                  {startOffset: 80, endOffset: 92}];

要使其发挥作用，您必须首先生成不同的区域

highlights.sort(function (a, b) {return a.startOffset - b.startOffset; }); //first order by the start offset
// highlights looks like this
//[{startOffset: 2, endOffset: 16},
// {startOffset: 80, endOffset: 92},
// {startOffset: 85, endOffset: 100}]

// next merge all overlapping areas

for(var i = 0; i < highlights.length - 1; i++) { //each element but the last, because it can't overlap with the next
    if(highlights[i].endOffset > highlights[i + 1].startOffset) { //if it overlaps with the next
        highlights[i].endOffset = highlights[i].endOffset > highlights[i + 1].endOffset ? 
            highlights[i].endOffset : highlights[i + 1].endOffset; //take the higher end offset of those two as new offset

        highlights.splice(i + 1, 1); //remove next element in list, since it is no longer useful
        i--; //check current element again
    }
}
//output
//[{startOffset: 2, endOffset: 16},
// {startOffset: 80, endOffset: 100}]

highlights.sort（函数（a，b）{返回a.startOffset-b.startOffset；}）//由起始偏移量确定的第一个顺序
//看起来像这样
//[{startOffset:2，endOffset:16}，
//{startOffset:80，endOffset:92}，
//{startOffset:85，endOffset:100}]
//接下来合并所有重叠区域
对于（var i=0；ihighlights[i+1].startOffset）{//如果它与下一个重叠
高光[i]。endOffset=高光[i]。endOffset>高光[i+1]。endOffset？
高光[i].endOffset:highlights[i+1].endOffset；//将这两个高光的高端偏移量作为新偏移量
highlights.splice（i+1，1）；//删除列表中的下一个元素，因为它不再有用
i--；//再次检查当前元素
}
}
//输出
//[{startOffset:2，endOffset:16}，
//{startOffset:80，endOffset:100}]

---

在这之后，您的代码应该可以工作。

您是否正在尝试创建类似于richtext editor的东西？不，不是这样的。这就像，我有一些我想要的文本来突出显示来自后端的部分文本。然后，如果需要突出显示的部分也是已经突出显示的文本的一部分，基本思想是将突出显示数组减少到应该突出显示的不同区域。这是通过查找重叠区域来完成的（如果一个区域在下一个开始后结束，则重叠）。如果重叠，则取第一个开始值和最后一个结束值（条件赋值）。最后，删除现在未使用的突出显示区域（它已合并到第一个区域中），但此处，我也想强调重叠这两个方面。我试过了，但现在对重叠的方面不起作用