Ошибка getSelection () в 65536

Question

Я использую JavaScript для получения начального и последнего символа выделенной части текста, используя функцию window.getSelection().

Я работаю в Google Chrome 70 на Mac.

Когда текст длиннее 65536 (2 ^ 16), у меня возникает такая проблема: если я выберу слово, скажем, из 10 символов, которое начинается с 65533, начальная точка в порядке (т.е. 65533), но конец точки соответствуют фактической позиции минус 65536 (65543 - 65536 = 7).

Похоже, что браузер делит длинные тексты на куски по 65536 символов (64 КБ?), И функция window.getSelection() работает внутри них, не зная фактической позиции выделения.

Попробуйте приложенный фрагмент, если описание не понятно:)

Одним из решений может быть добавление 65536 к конечной части выделения, если оно меньше начальной части, но будет работать только при переходе через первую и вторую часть текста и только если я выберу слева направо. Мне нужно сохранить число, соответствующее реальной позиции выбранных персонажей, чтобы достичь моей цели.

Большое спасибо всем вам, кто попытается помочь <3 </p>

// A text of 783 characters get repeated untill it reaches 4 times the amount of 65536 characters
// then it is inserted into the div #text-box

let myText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet dignissim finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean vitae mauris dolor. Pellentesque eu turpis eu magna interdum pretium. Praesent ligula risus, interdum nec nunc vitae, imperdiet commodo nibh. Phasellus ac dolor at magna pretium tincidunt. Pellentesque sagittis finibus mi, at gravida elit pulvinar at. Proin malesuada justo laoreet nisi fermentum tincidunt. Sed tincidunt commodo sapien, quis fermentum velit suscipit volutpat. Ut sit amet ligula convallis, auctor eros a, finibus justo. Curabitur non eros malesuada, dignissim arcu vel, tincidunt augue. Aenean vitae accumsan turpis, id accumsan augue. Ut a massa ac neque interdum tempus.`;
let newText = '';
for (var i = 0; i<335; i++) {
  newText += myText;
}
document.getElementById('text-box').innerHTML = newText;

// grab the selection
document.addEventListener('selectionchange', textSelection);
function textSelection() {
  if (window.getSelection().focusNode.parentElement.id == 'text-box') {
    let currentSelection = window.getSelection().toString();
    let currentSelectionStart = window.getSelection().anchorOffset;
    let currentSelectionEnd = window.getSelection().focusOffset;
    document.getElementById('selection').innerHTML = currentSelection;
    document.getElementById('start').innerHTML = currentSelectionStart;
    document.getElementById('end').innerHTML = currentSelectionEnd;
  }
}

#info-box {
  background-color: #FEF9E7;
  position: sticky;
  position: -webkit-sticky;
  top: 20px;
  width: 30%;
}

<div id="info-box">
  <h5>Selection starts at <span id="start">.</span></h5>
  <h5>Selection ends at <span id="end">.</span></h5>
  <h5>Text selected: <span id="selection">.</span></h5>
</div>

<div id="text-box">

</div>