Document.createRange um mehrere Textübereinstimmungen herum ergibt IndexSizeError ⇐ HTML

[Guest]

Ich schreibe eine Suchmaschine und bin auf ein Problem gestoßen. Ich verwende document.createRange, um die Übereinstimmungen auszuwählen, und ich habe den AND-Operator verwendet.
Ich habe den folgenden Text, die Hälfte davon sind ungarische Farben bereits hervorgehoben:

Code: Select all

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

und ich muss Code für „sárga“ hervorheben, etwa so, was einen Fehler außerhalb des zulässigen Bereichs ausgibt:

Code: Select all

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

Mein Suchmuster sieht etwa wie folgt aus:

Code: Select all

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

Das Hauptproblem hier besteht darin, dass die vorherigen SurroundContents etwas HTML zum Text hinzugefügt haben, sodass sich setStart(x, 33) irgendwo im HTML-Attribut befindet. Highlight-Occurrence", was offensichtlich zu einer Abweichung außerhalb des zulässigen Bereichs führt. Dies liegt daran, dass ich beim Hervorheben mit dem AND-Operator die Ergebnisse separat hervorhebe. Also hebe ich zuerst die Vorkommen von „fehér“ hervor, dann hebe ich die Vorkommen von „sárga“ hervor. Es wäre schön, das so beizubehalten, anstatt meinen Code komplett zu überschreiben, um die Ergebnisse für beide Wörter zu vermischen und immer vom Ende bis zum Anfang des Textes hervorzuheben.
Mein echter Code sieht so aus So ist es lustig, so viele Schleifen zu verschachteln:

Code: Select all

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);
}

Ich habe mich gefragt, ob es eine Lösung gibt, bei der die Reihenfolge der Texthervorhebung keine Rolle spielt, sodass ich nur die Funktion „highlight“ anstelle der Funktion „highlightMatches“ überschreiben müsste der Match-Generator?