Document.createRange вокруг нескольких текстовых совпадений дает IndexSizeError ⇐ Html

[Anonymous]

Я пишу поисковую систему и столкнулся с проблемой. Я использую document.createRange для выбора совпадений и использовал оператор AND.
У меня есть следующий текст, это венгерские цвета, половина из которых уже выделено:

Код: Выделить всё

fehér, fekete, vörös, kék, zöld, sárga, narancs, rózsaszín, barna, lila, türkízkék, szürke

и мне нужно выделить код для «sárga» примерно так, что выдает ошибку вне диапазона:

Код: Выделить всё

const x = document.getElementById("x");
const startOffset = 33;
const endOffset = 38;
const range = document.createRange();
range.setStart(x, startOffset);
range.setEnd(x, endOffset);

Мой шаблон поиска примерно следующий:

Код: Выделить всё

{"and": [
{"contains": "fehér"},
{"contains": "sárga"}
]}

Основная проблема здесь в том, что предыдущий объемный контент добавил к тексту немного HTML, поэтому setStart(x, 33) будет где-то в атрибуте HTML " Highlight-occurrence", что, очевидно, выводит за пределы допустимого диапазона. Это происходит потому, что когда я выделяю оператором AND, я выделяю результаты отдельно. Итак, сначала я выделяю появление слова «фехер», затем я выделяю появление слова «сарга». Было бы неплохо оставить все как есть, вместо того, чтобы полностью переопределять мой код, смешивая результаты для обоих слов и всегда выделяя текст от конца к началу.
Мой реальный код выглядит так: вот так забавно иметь столько вложенных циклов:

Код: Выделить всё

function highlightMatches(pattern, evidence){
for (var match of evidence)
for (var perMatcherTypeResults of match.evidence)
for (var locations of perMatcherTypeResults)
if (locations instanceof Array)
for (var location of locations){
var sectionIndexes = location.slice(0, location.length-1);
var positionRanges = location[location.length-1];
for (var i=positionRanges.length-1; i>=0; --i)
highlight(match.term.checksum, sectionIndexes, positionRanges[i]);
}
}

function highlight(id, sectionIndexes, positionRange){
var selector = `#results-${id}-${sectionIndexes.join("-")}`;
var element = selectOne(selector);
element.classList.add("highlight-sentence");
var range = new Range();
range.setStart(element.firstChild, positionRange[0]);
range.setEnd(element.firstChild, positionRange[1]);
var highlightOccurrence = document.createElement("span");
highlightOccurrence.className = "highlight-occurrence";
range.surroundContents(highlightOccurrence);
}

Мне интересно, существует ли решение, при котором порядок выделения текста не имеет значения, поэтому мне нужно будет переопределить только функцию выделения вместо функции выделения или генератор совпадений?

Подробнее здесь: https://stackoverflow.com/questions/793 ... xsizeerror