Browser-Suchfunktion mit JavaScript nachbauen

codehacker

Grünschnabel
Hallo.

Ich würde gerne wissen, ob Folgendes durchführbar ist:

IST: Ich habe nur eine HTML-Datei zur Verfügung.
SOLL: Eine Suchfunktion, die clientseitig dem Besucher erlaubt, den Text einer einzigen HTML-Datei nach mehreren Suchbegriffen zu durchsuchen. Man soll auf einen Pfeil nach oben, und einem Pfeil nach unten klicken können, um nach oben, bzw. unten durchsuchen zu können. Ein Start-Button, welcher die Suche starten soll, und gefundene Begriffe, die farblich hervorgehoben werden sollen.
Soll auf allen gängigen, auch etwas älteren, Browsern laufen. Mobile wie Desktop.

Daher: Diese Suchfunktion muss in JavaScript geschrieben sein. Oder gibt es noch andere "Programmiersprachen" die in einem HTML-Dokument funktionieren?

Ich kann programmieren, habe schon mal ein Schachprogramm geschrieben, aber in JavaScript bin ich noch völlig unbedarft.
Bevor ich mich in JS einarbeite, wollte ich vorab klären, ob mein Vorhaben überhaupt umsetzbar ist.

Deshalb hier mein Pseudocode (falls jemand möchte, kann er ja drüberschauen, ob das so logisch und von JS machbar ist).:

Nur wenn JavaScript nicht aktiviert sein sollte, soll da die Nachricht erscheinen: "Die Suchfunktion funktioniert nur bei aktiviertem JavaScript."
Und danach erst der normale Body-Text.

Ein input-Feld. Am oberen Bildschirmrand klebend. Auch wenn man runterscrollt. Rechts neben dem Input-Feld ein Dreieck nach oben und eins nach unten. Daneben ein "Suche starten"-Button.
Darunter: "Bitte geben Sie in das Suchfeld ein oder mehrere Wörter ein, nach denen Sie suchen möchten. Erlaubt sind: Ziffern, Buchstaben groß klein, !"()?ß*-_.,:;Leerzeichen." <- Hoffe, keines dieser Zeichen ermöglicht Schadcode.
In diesem Input-Feld sind mehrere Wörter eingebbar.

Beispiel:
Der Besucher gibt in das JavaScript-Suchfeld: "Katze $miaut"
Javascript akzeptiert bei Eingabe schon das $-Zeichen nicht.
Es steht in dem Input-Feld "Katze miaut!"

JavaScript geht die Eingabe Zeichen für Zeichen durch. (Unterscheidet aber nicht zwischen Groß- und Kleinschreibung)
Wenn ein Leerzeichen auftaucht, werden die bisherigen Zeichen in eine Variable gesteckt.

In diesem Beispiel:
JS steckt "Katze" in die Variable 1.

Dann geht JS weiter den Inhalt durch.

JS steckt "miaut!" in die Variable 2.

Danach steht nix mehr im Input-Feld. JavaScript hat alle Such-Begriffe.

Jetzt geht JS alle Suchbegriffe durch und zählt die Zeichen.

"Katze" hat 5 Zeichen,
"miaut!" hat 6 Zeichen.

Jetzt muss irgendwie JS auf den Text auf der Webseite (HTML-Dokument) zugreifen.
JS fängt beim 1. Zeichen an, und schaut,
- ob die ersten 5 Zeichen der Variable 1, und
- ob die ersten 6 Zeichen der Variable 2 entspreichen.

Wenn nein, rutscht er ein Zeichen weiter und zählt wieder von Neuem die ersten 5 / 6 Zeichen.

Wenn er kein einziges Mal "Katze" oder "miaut!" findet und das Ende des Dokuments erreicht, kommt ne Nachricht: "Ende des Dokuments erreicht."

Wenn er unterwegs "Katze" oder "miaut!" findet, dann bleibt er stehen. Er markiert das gefundene Wort.

Dauerschleife Anfang:

klickt er auf das Dreieck nach oben, geht JS den Text rückwärts Zeichen für Zeichen durch,
bis er entweder den Anfang des Dokuments erreicht und "Anfang des Dokuments erreicht" ausgibt,
oder den Begriff nochmal findet, und stehen bleibt und das gefundene Wort markiert,

klickt er auf das Dreieck nach unten, geht JS den Text vorwärts Zeichen für Zeichen durch,
bis er entweder das Ende des Dokuments erreicht und "Ende des Dokuments erreicht" ausgibt,
oder den Begriff nochmal findet, und stehen bleibt und das gefundene Wort markiert.

Dauerschleife Ende.

1.) Ist der Pseudocode so korrekt?
2.) Ist das komplett so mit JS machbar? (Gäbe es denn evtl. eine "Abkürzung", irgendeinen JS-Befehl, der vielleicht den ein oder anderen Codeteil verkürzt?)
3.) Oder gibt es außer JS noch eine andere direkt in die HTML-Datei einpflegbare "Programmiersprache"?

Vielen lieben Dank.

Liebe Grüße, codehacker
 
Hallo.

Ich bin schon sehr gut vorangekommen bei meiner Suchfunktion.
Aber ich habe festgestellt, dass zwecks valider Eingabe des Suchbegriffs ins input-Feld mein iPhone kein required und pattern unterstützt.
Würde das denn "gefährlich" sein, wenn der User Schadcode statt eines Suchbegriffes eingibt?
Weil die HTML-Seite wird bei Aufruf einmalig geladen, und die seiteninterne "Suche" findet nur auf dem Client statt. Nichts wird an den Server zurückgesendet.
Dann kann der User doch Schadcode einfügen, würde allenfalls auf seinem eigenen Rechner ausgeführt werden...
Oder sehe ich das falsch?

Liebe Grüße, codehacker
 
Zurück