我正在尝试在较大的文本中获取用户突出显示的文本的开始索引和结束索引。用户可以在我的网站上写自己的文章。当用户去阅读文章时,用户可以突出显示文章的任何文本,并且会出现一个框,在其中可以发布有关突出显示内容的评论。我正在尝试在较大的文章中获取突出显示的文本的开始和结束索引。例如,如果用户有一个带有以下文字的“文章”:
<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
,因为这是当字符忽略位于突出显示的文本下面的添加的span标签时字符所在的位置。因此,我认为我需要首先获取本文的内容,如下所示:
var contents = $(".article").text();
然后找到本文中用户突出显示的文本的索引所在的位置。因此,如果我突出显示文本“所有人!”,则可以使用getSelection()
函数获得该文本:
var selection = window.getSelection();
我不确定的是如何找到较大文章中突出显示的文本的开始和结束索引。我可以使用什么函数在文章文本everyone!
中查找文本Hi there, everyone!
的开始和结束索引?谢谢。
您可以使用anchorOffset
的返回值的focusOffset
和getSelection
属性,似乎提供了您需要的输出!检查以下示例!
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>