Wie implementiere ich eine Suchfunktion für bestimmte Verse in einer Bibel-HTML-Seite?
- Überblick und Anforderungen
- HTML-Struktur vorbereiten
- Parsing der Sucheingabe
- Verssuche implementieren
- Volltextsuche implementieren
- Benutzerführung und Fehlerbehandlung
- Performance und Barrierefreiheit
- Sicherheitsaspekte
Überblick und Anforderungen
Erkläre kurz, was die Suchfunktion leisten soll: Suche nach Versnummern, Kapiteln oder Textfragmenten; Eingabeformat (z. B. "Joh 3:16" oder "Joh 3 16"); Anzeige der Treffer im HTML-Dokument; optionales Hervorheben und Springen zur Stelle. Entscheide, ob die Bibel als eine einzige HTML-Seite mit klar markierten Vers-Elementen vorliegt (empfohlen) oder in mehreren Seiten. Für eine einzelne Seite sollten alle Verse eindeutige IDs haben (z. B. id="Joh-3-16").
HTML-Struktur vorbereiten
Baue die Seite so auf, dass jeder Vers ein eigenes Element hat, zum Beispiel ein span oder div mit Attributen für Buch, Kapitel und Versnummer: Denn also.... Füge ein Suchfeld und einen Button ein: . Diese Struktur ermöglicht zielgerichtetes Finden per DOM-Methoden.
Parsing der Sucheingabe
Schreibe JavaScript, das die Eingabe normalisiert: entferne Groß-/Kleinschreibung und überflüssige Leerzeichen. Erkenne zwei Modi: Verssuche (Buch + Kapitel + Vers) und Volltextsuche (Freitext). Verwende reguläre Ausdrücke, um Versanfragen zu parsen, z. B. /^( +)s* s*(d+)s* s*(d+)$/ oder tolerantere Varianten für verschiedene Notationen.
Verssuche implementieren
Wenn die Eingabe als Vers erkannt wurde, erstelle die ID bzw. suche nach data-Attributen. Beispiel: document.querySelector(`#${cssEscape(id)}`) oder document.querySelectorAll(`.verse `). Wenn Treffer vorhanden sind, scrolle zu diesem Element (element.scrollIntoView({behavior: "smooth", block: "center"})) und hebe es hervor, z. B. mittels temporärer CSS-Klasse (classList.add("highlight")). Entferne alte Hervorhebungen vorher.
Volltextsuche implementieren
Bei Freitext suche alle Verse, die den Suchbegriff enthalten: Array.from(document.querySelectorAll(".verse")).filter(v => v.textContent.toLowerCase().includes(query)). Für jedes gefundene Element kannst du den Trefferkontext hervorheben, indem du den innerHTML-Inhalt sicher ersetzt (beachte XSS, nur bei statischen Inhalten praktikabel) oder eine CSS-Klasse setzt und ein kleines Trefferpanel mit Links zu jedem Ergebnis erstellst. Bei vielen Treffern paginiere oder begrenze die Anzahl.
Benutzerführung und Fehlerbehandlung
Zeige klare Meldungen, wenn keine Treffer gefunden werden oder die Eingabe unklar ist. Akzeptiere Variationen bei Buchnamen (z. B. "Joh", "Johannes", ggf. Mapping-Tabelle). Unterstütze Tastenaktionen wie Enter zum Suchen und Esc zum Entfernen der Hervorhebung.
Performance und Barrierefreiheit
Vermeide teures innerHTML-Rewriting bei großen Textmengen; arbeite preferenziell mit CSS-Klassen. Stelle sicher, dass Fokus und Scrollen auch für Screenreader sinnvoll sind (aria-live für Trefferzähler, role-Attribute für Ergebnisliste). Bei großen Volltexten kann ein Index (z. B. vorverarbeitete JSON-Struktur oder Nutzung von Lunr.js / Fuse.js) die Suche deutlich beschleunigen.
Sicherheitsaspekte
Setze beim Einfügen von HTML keine ungeprüften Inhalte ein, um XSS zu vermeiden. Verwende textContent statt innerHTML, oder sichere Bibliotheken zum Hervorheben. Wenn externe Bibliotheken genutzt werden, prüfe Lizenzen und Versionen.
Diese Schritte liefern eine robuste, nutzerfreundliche Suchfunktion für eine Bibel-HTML-Seite, die sowohl gezielte Versabfragen als auch Volltextsuche unterstützt.