Window.find() — Methode · JavaScript-Referenz

Signatur

window.find(aString, aCaseSensitive, aBackwards, aWrapAround, aWholeWord, aSearchInFrames, aShowDialog)

Beschreibung

window.find() sucht wie die Browser-Funktion „Suchen“ (Strg+F) nach einer Zeichenkette im gerenderten Text des Dokuments. Den gefundenen Treffer wählt die Methode aus, ähnlich wie eine Auswahl durch den Nutzer, und scrollt ihn in den sichtbaren Bereich. Jeder weitere Aufruf sucht ab der aktuellen Auswahl weiter. So kann man nacheinander durch alle Treffer gehen.

Über optionale Schalter legt man fest, ob Groß-/Kleinschreibung beachtet wird, ob rückwärts gesucht wird, ob die Suche am Dokumentende wieder von vorn beginnt und ob auch in Frames gesucht wird. Der Rückgabewert ist ein einfaches true oder false. Die genaue Position des Treffers bekommt man über window.getSelection().

Die Methode ist nicht standardisiert und verhält sich je nach Browser etwas anders. Sie eignet sich für schnelle Hilfsfunktionen wie „Nächster Treffer“-Buttons, Lesezeichen-Skripte (Bookmarklets) oder interne Werkzeuge. Für robuste Such- und Hervorhebungsfunktionen in Produktionscode sind TreeWalker, Range und die CSS Custom Highlight API die bessere Wahl.

Parameter

Name	Typ	Default	Beschreibung
$aString Pflicht	string		Der gesuchte Text. Bei leerem String oder fehlendem Argument liefert die Suche `false` (in manchen Browsern kann das Verhalten abweichen).
$aCaseSensitive	boolean	false	Bei `true` wird Groß-/Kleinschreibung beachtet.
$aBackwards	boolean	false	Bei `true` wird von der aktuellen Auswahl aus rückwärts gesucht.
$aWrapAround	boolean	false	Bei `true` beginnt die Suche am Ende (bzw. Anfang) des Dokuments wieder von vorn.
$aWholeWord	boolean	false	Nur ganze Wörter finden. Wird in Firefox nicht unterstützt und in anderen Browsern teils ignoriert.
$aSearchInFrames	boolean	false	Bei `true` wird auch in (gleichherkünftigen) Frames und iframes gesucht.
$aShowDialog	boolean	false	Sollte früher einen Suchdialog öffnen. Wird in modernen Browsern praktisch nicht mehr beachtet.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn ein Treffer gefunden und ausgewählt wurde, sonst false.

Beispiele

Einfache Suche mit Treffer-Prüfung

// Sucht „JavaScript“ ohne Beachtung der Groß-/Kleinschreibung
const gefunden = window.find('JavaScript');

if (gefunden) {
  const auswahl = window.getSelection();
  console.log('Treffer:', auswahl.toString());
} else {
  console.log('Nicht gefunden');
}

Treffer: JavaScript

Buttons für „Weiter“ und „Zurück“

// HTML: <input id="suche"> <button id="vor">▼</button> <button id="zurueck">▲</button>
const eingabe = document.querySelector('#suche');

const suchen = (rueckwaerts) => {
  const text = eingabe.value.trim();
  if (!text) return;
  // Groß-/Kleinschreibung ignorieren, am Ende wieder von vorn beginnen
  const ok = window.find(text, false, rueckwaerts, true);
  eingabe.classList.toggle('kein-treffer', !ok);
};

// mousedown + preventDefault: Der Klick soll die aktuelle Auswahl nicht aufheben
for (const [id, rueck] of [['vor', false], ['zurueck', true]]) {
  const btn = document.querySelector(`#${id}`);
  btn.addEventListener('mousedown', (e) => e.preventDefault());
  btn.addEventListener('click', () => suchen(rueck));
}

Alle Vorkommen zählen

const zaehleTreffer = (text) => {
  const auswahl = window.getSelection();
  auswahl.removeAllRanges(); // am Dokumentanfang beginnen
  let anzahl = 0;
  // ohne Wrap-Around, damit die Schleife am Dokumentende endet
  while (window.find(text, false, false, false)) {
    anzahl++;
    if (anzahl > 10000) break; // Schutz vor Endlosschleifen
  }
  auswahl.removeAllRanges();
  return anzahl;
};

console.log(zaehleTreffer('Beispiel'));

3

Funktionsprüfung mit Rückfall

const kannSuchen = typeof window.find === 'function';

const finde = (text) =>
  kannSuchen
    ? window.find(text)
    : document.body.innerText.toLowerCase().includes(text.toLowerCase());

console.log(finde('Impressum'));

true

// Wichtig · Fallstricke

Nicht standardisiert: Die Methode ist in keiner WHATWG- oder W3C-Spezifikation beschrieben. Chrome, Edge, Firefox und Safari unterstützen sie, aber mit Unterschieden, vor allem bei aWholeWord (fehlt in Firefox) und aShowDialog (wirkungslos). Vorher mit typeof window.find === 'function' prüfen.
Verändert die Auswahl: Der Treffer ersetzt die aktuelle Nutzerauswahl, und die Seite scrollt dorthin. Wer das nicht will, speichert vorher die Bereiche aus getSelection() und stellt sie danach wieder her.
Fokus und Klicks: Ein Klick auf einen Button oder das Tippen in ein Eingabefeld kann die Auswahl aufheben oder verschieben. Dann beginnt die Suche wieder am Anfang. Abhilfe: mousedown mit preventDefault() abfangen.
Nur sichtbarer Text: Versteckte Elemente (display: none) werden nicht durchsucht. Das Verhalten bei Formularfeldern, Shadow DOM und <details> unterscheidet sich je nach Browser.
Endlosschleifen: Mit aWrapAround = true liefert jeder Aufruf erneut true, solange es mindestens einen Treffer gibt. Solche Aufrufe also nie ungebremst in einer while-Schleife verwenden.
Mit aSearchInFrames wird nur in Frames mit gleicher Herkunft (Same-Origin) gesucht, fremde iframes bleiben außen vor.

Siehe auch

Window.getSelection() Selection Range Document.createTreeWalker() Highlight Element.scrollIntoView() Selection.toString()