javascript - 如何为文本中的单词添加标签？

Question

我需要实现文本标记。当你可以标记单词或句子的一部分时，我已经实现了一个基本版本，但是如果你有 2 个标签(Tag2 和 Tag1)覆盖同一个词(下图)，这种方法就不起作用了。

对于 Tag3、Tag4，我使用:<span style="border: solid 1px red;">Lorem Ipsum</span> the rest of the text...能否请您提供您的想法，如何使用 Tag2 和 Tag1 实现案例？

Answer 1

一种方法是在处理后检查您的标签并检查是否重叠。这将涉及检查标记元素的开始/结束位置。假设您已经有了其中的一些，下面是一些伪代码来说明:

const taggedItems = [tag1, tag2, tag3, tag4];
/*
    assuming each item has this internal structure:
    {start: Number, end: Number}
*/

const overlapItems = [];

// sort and iterate tagged items
taggedItems
.sort((entryA,entryB) => entryA.start - entryB.start)
.forEach((entry,index) => {
  if(!index){
    continue;
  }
  // check for overlap

  if(checkOverlap(entry, taggedItems[index - 1])){
    if(!overlapItems.length){
      overlap.push([entry, taggedItems[index - 1]]);
      // check last overlap item
    } else {
      const lastOverlap = overlapItems[overlapItems.length -1];
      const lastOverlapEntry = lastOverlap[lastOverlap.length - 1];
      if(checkOverlap(entry, lastOverlapEntry)) {
        lastOverlap.push(entry);
      } else {
        overlapItems.push([entry, taggedItems[index - 1]]);
      }
    }
  }
});

function checkOverlap(entryA, entryB) {
    const partialOverlap = entryA.end < entryB.start;
    const fullOverlap = entryA.start === entryB.start && entryA.end === entryB.end;
    return partialOverlap || fullOverlap;
}

运行上面的代码会创建两个重叠的数组条目。第一个数组将包含 tag1 和 tag2，从上面的插图中它们完全重叠。第二个数组将包含部分重叠的 tag3 和 tag4。

完成此过程后，您可以遍历重叠数组并为每组重叠元素设置样式。样式可以是这样的，对于每个重叠的组，它将是一个框，显示其中的标签名称和一些独特的样式来指示它是一个带有重叠标签的框。