跨节点选择多个单词并相对于根元素的textContent存储索引

Question

我正在开发一个电子学习应用程序。在一个练习中，我想让我们的学生阅读一篇文章，标记我所写的错误并评估他们的反应。

使用Rangy，我解决了一些有关文本选择的问题（假设有一个<p id='myText'>包含要更正的文本）：

• 用户可以在点击时在myText中标记文本。我说标记是因为虽然我在过程中使用了Selection API，但最终它是一种更持久的选择。
• 标记总是扩展到单词级别。每次单击都标记一个单词。
• 可以标记0到n之间的任意数量的单词（其中n是myText.innerText中的单词数）。
• 每个标记的单词都使用带有highlight类的跨度进行样式设置。

我在几行代码中使用Vue完成所有这些操作。每当我点击myText时都会触发此功能：

highlight: function() {
    // Get Selection
    let selection = this.$rangy.getSelection();

    // Some RegEx checking omitted

    // Expand selection to word boundaries
    selection.expand('word');

    // Some more RegEx checking omitted

    // A range represents a continuous part of selected text
    let range = selection.getRangeAt(0);

    // Highlight text or remove marking
    let applier = this.$rangy.createClassApplier('highlight');
    applier.toggleRange(range);
}

我需要将标记的单词与实际包含错误的单词列表进行比较，因此我尝试存储每个选定范围的索引。但似乎在任何浏览器API或Rangy中没有函数给我相对于文本本身的索引，我只能获得相对于myText中的HTML的索引 - 随着每个标记的变化或取消标记，因为Rangy插入跨度以突出显示用户选择的单词。

我的问题有一个优雅的解决方案吗？我可以用它的左右邻居（单词和myText边界之间的文本）存储每个标记的单词，并将其与myText内容的纯文本版本进行比较，但这看起来相当笨拙。有没有更好的办法？

Answer 1

我觉得有一个highlighter module in Rangy听起来像你想要的。 Rangy还有各种API，用于返回相对于页面内文本的范围和选择。希望文档能够提供帮助，我可以回答所提出的问题。