Выберите несколько слов в узлах и сохраните индексы относительно textContent корневого элемента - PullRequest
Новая
       48

Выберите несколько слов в узлах и сохраните индексы относительно textContent корневого элемента

0 голосов
/ 22 марта 2019

Я занимаюсь разработкой приложения для электронного обучения.В одном упражнении я хотел бы, чтобы наши студенты прочитали текст, отметили ошибки, которые я в него вставил, и оценили их ответ.

Используя Rangy , я решил некоторые проблемы, связанные с выделением текста(скажем, есть <p id='myText'>, содержащий текст, который нужно исправить):

  • Пользователи могут пометить текст в myText при нажатии.Я говорю mark , потому что, хотя я и использую в этом процессе 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 нет функции, которая дает мне индексы относительно самого текста, я могу получить индексы только относительно HTML в myText - который меняется с каждой маркировкойили снятие отметки, когда Rangy вставляет интервалы, чтобы выделить слова, выбранные пользователем.

Есть ли элегантное решение моей проблемы?Я мог бы хранить каждое помеченное слово с его левыми и правыми соседями (текст между словом и границами myText) и сравнивать его с текстовой версией содержимого myText, но это выглядит довольно неуклюже.Есть ли лучший способ?

1 Ответ

...