Auf Seite suchen

So funktioniert das Script

Das Script hat vier Aufgaben: den Text der Seite durchwandern, die Fundstellen einfärben, die Treffer zählen und die Markierungen auf Wunsch wieder entfernen. Der Kniff dabei ist, dass es nur die Textknoten anfasst und die Struktur der Seite unberührt lässt. Ein Textknoten ist das Stück reiner Text zwischen zwei HTML-Tags — der Browser verwaltet jede Seite als Baum aus solchen Knoten, und in diesem Baum lässt sich gezielt arbeiten, ohne die Seite als Ganzes neu aufzubauen.

const laeufer = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
  acceptNode: istDurchsuchbar
});

Ein TreeWalker ist ein vom Browser bereitgestellter Wanderer durch diesen Baum. Der erste Wert sagt, wo er losgeht (hier document.body, also die ganze Seite), der zweite, wofür er sich interessiert (SHOW_TEXT — nur Textknoten), und der dritte ist ein Filter: eine eigene Funktion, die zu jedem Knoten Ja oder Nein sagt.

if (name === "SCRIPT" || name === "STYLE" || name === "TEXTAREA" || name === "OPTION") {
  return NodeFilter.FILTER_REJECT;
}
return NodeFilter.FILTER_ACCEPT;

Genau dieser Filter sortiert aus, was nicht angefasst werden darf. In einem <script> oder <style> steht Programm- statt Lesetext — eine Markierung dort würde die Seite beschädigen. In <textarea> und <option> wiederum sind gar keine HTML-Elemente erlaubt, ein farbiges <span> würde dort als sichtbarer Zeichensalat landen. nodeName liefert den Tag-Namen immer in Großbuchstaben, deshalb wird auch so verglichen.

const fund = rest.splitText(stelle);
rest = fund.splitText(wort.length);

Das ist das Herzstück. splitText(stelle) zerschneidet einen Textknoten an der angegebenen Position in zwei Teile und gibt den hinteren zurück. Zweimal angewandt, entstehen aus einem Knoten drei: der Text davor, genau das gesuchte Wort und der Rest dahinter. Danach steht in fund ein Knoten, der ausschließlich den Suchbegriff enthält — und mit dem lässt sich nun bequem etwas anstellen.

const marke = document.createElement("span");
marke.style.backgroundColor = farbe;
fund.parentNode.replaceChild(marke, fund);
marke.appendChild(fund);

Hier wird ein leeres <span> erzeugt und mit der gewählten Hintergrundfarbe versehen. replaceChild setzt es an die Stelle des Fund-Knotens, appendChild hängt den Fund anschließend als Inhalt hinein. Nach diesen beiden Zeilen steht der Suchbegriff also im farbigen Kästchen — ohne dass ringsherum irgendetwas verändert wurde. Jedes erzeugte <span> wandert zusätzlich in die Liste marken, damit man es später wiederfindet.

const marke = marken.pop();
const eltern = marke.parentNode;
eltern.replaceChild(document.createTextNode(marke.textContent), marke);
eltern.normalize();

Das Aufheben der Markierung geht rückwärts durch diese Liste. pop() holt jeweils den letzten Eintrag heraus, dann wird das farbige <span> wieder durch einen schlichten Textknoten mit demselben Inhalt ersetzt. normalize() ist die Aufräumhilfe zum Schluss: Sie schweißt die durch splitText entstandenen Textschnipsel wieder zu einem einzigen Knoten zusammen, sodass die Seite hinterher exakt so aufgebaut ist wie vorher.

while (laeufer.nextNode()) {
  if (laeufer.currentNode.nodeValue.indexOf(wort) > -1) {
    fundstellen.push(laeufer.currentNode);
  }
}

Auffällig ist, dass erst alle passenden Knoten gesammelt und danach in einer zweiten Schleife bearbeitet werden. Das hat einen guten Grund: Das Markieren verändert den Baum, durch den der Wanderer gerade läuft. Wer beides mischt, bringt ihn durcheinander oder markiert im schlimmsten Fall endlos die eigenen Markierungen. Erst schauen, dann anfassen — eine Regel, die bei DOM-Arbeiten oft weiterhilft.

Zum Anpassen: Soll die Suche Groß- und Kleinschreibung ignorieren, vergleicht ihr in markieren mit rest.nodeValue.toLowerCase().indexOf(wort.toLowerCase()) — der markierte Text muss dann aus dem Originalknoten kommen, nicht aus dem Suchfeld. Soll nur ein bestimmter Bereich durchsucht werden statt der ganzen Seite, ersetzt ihr document.body beim TreeWalker durch das gewünschte Element. Und wer statt einer Hintergrundfarbe lieber fette Schrift möchte, tauscht marke.style.backgroundColor = farbe gegen marke.style.fontWeight = "bold".