如何在较大的文本集中查找突出显示文本的字符索引

Question

我试图在一段较大的文本中获取用户突出显示的文本的开始索引和结束索引。在我的网站上，用户可以编写自己的文章。当用户阅读文章时，用户可以突出显示文章的任何文本，并且会出现一个框，他们可以在其中发表关于他们突出显示的内容的评论。我试图在较大的文章中获取突出显示文本的开始和结束索引。例如，如果用户有一篇带有文本的“文章”：

<div class='article'>Hi there, everyone!</div>

然后另一个用户突出显示文本Hi there，我想找到该文本块中的开始和结束位置。我最初尝试设置这些变量来获取开始和结束位置，如下所示：

startIndex = window.getSelection().getRangeAt(0).startOffset;
endIndex = window.getSelection().getRangeAt(0).endOffset;

这确实给了我索引。但问题是，一旦用户突出显示文章中的一段文本，如果我随后突出显示刚刚突出显示的单词旁边的单词，索引将从 0 重新开始，而不是从文本中的“正确”位置重新开始。这是因为当用户突出显示任何文本并提交评论时，他们突出显示的文本然后通过在突出显示的文本周围添加<span> 标记用蓝色下划线。我认为添加 span 标签会使索引从 0 重新开始。例如，如果我在上面的原始“文章”文本中突出显示文本 Hi there，则开始和结束索引将分别为 0, 7 .然后该文本将带有蓝色下划线。如果我随后突出显示文本 everyone!，则开始和结束索引将分别为 2, 10。但是，文本everyone! 的“真实”开始和结束位置应分别为10, 18，因为当忽略在突出显示文本下划线的添加跨度标记时，字符所在的位置。正因为如此，我相信我需要先获取文章的内容，像这样：

var contents = $(".article").text();

然后找到用户突出显示的文本的索引在这篇文章中的位置。因此，如果我突出显示文本“每个人！”，我可以使用 getSelection() 函数获取该文本：

var selection = window.getSelection();

我不确定如何找到我在较大的文章文本中突出显示的文本的开始和结束索引。我可以使用什么函数在文章文本Hi there, everyone! 中查找文本everyone! 的开始和结束索引？谢谢。

Answer 1

您可以使用getSelection的返回值的anchorOffset和focusOffset属性，似乎提供了您需要的输出！检查以下示例！

window.addEventListener('mouseup', () => {
  var selection = window.getSelection();
  if (selection) {
    console.log('select started at ', selection.anchorOffset, ' and ended at ',
      selection.focusOffset);
  }
});

<div class="test">asdfas asdf asdf asdf asdf fasdfa sdfas dfasdfasd asfdas dfa sdfasd fasdf asdfa sdf asdf asdf asdfa sdfa sdfasdf asdfa sdf asdf asdfa sdfa sdfa s
</div>