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

问题描述

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

<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();

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

标签： javascriptjquery

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

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>

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

问题描述

解决方案

推荐阅读