Как найти индексы символов выделенного текста в большем наборе текста

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 в оригинальном тексте «article» выше, начальный и конечный индексы будут соответственно 0, 7 , Этот текст затем получит синее подчеркивание. Если я затем выделю текст everyone!, начальный и конечный индексы будут 2, 10 соответственно. Однако «истинная» начальная и конечная позиции текста everyone! должны быть 10, 18 соответственно, потому что именно там находятся символы l ie, игнорируя добавленный тег span, который подчеркивает выделенный текст. Поэтому я считаю, что мне нужно сначала получить содержание статьи, например:

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

, а затем найти, где индекс выделенного пользователем текста будет l ie в этой статье. Итак, если я выделю текст «все!», Я смогу получить этот текст, используя функцию getSelection():

var selection = window.getSelection();

В чем я не уверен, так это как я могу найти начальный и конечный индексы текста, который я выделил в более широком тексте статьи. Какую функцию я могу использовать, чтобы найти начальный и конечный индексы текста everyone! в тексте статьи Hi there, everyone!? Спасибо.

Answer 1

Вы можете использовать свойства 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>