Offtopic Projekte
Kommentare Zurück zur Übersicht

URL Validator mit JavaScript

Diese Seite ist meiner Freundin Ida G. gewidment.

Wenn man im Internet nach eine Lösung zur Validierung von URL bzw. URI mit JavaScript sucht, dann sind die Ergebenisse eher Halbherzig. Wahrscheinlich deswesen, weil ich Halbherzig gesucht habe.
Dort findet man natürlich RegEx Lösungen die sich durch kognitive Brillanz auszeichnen - definitiv sogar.
Nur leider sind die meisten RegEx Lösungen nicht valide genug!
Dann natürlich noch die document.createElement(a) Lösungen. Aber diese hinken auch, sogar extrem!
Auch der Versuch ein Input Element mit dem Type URL Attribut einzufügen und so eine URL zu prüfen, ist auch nur bedingt nutzbar und sehr von der Leistung des Browsers abhängig.

Also habe ich nach eine Lösung gesucht, die bestimmte Annahmen auch umsetzt.
Hier der JavaScript-Code:
function meinURLcheck(_meineURL) {
  _meineURL = _meineURL.trim();

  var _schema = /^(http(s)?:\/\/)/i;
  if(_schema.test(_meineURL) == false) {return false;}

  var _erlaubteZeichen = /^[a-z0-9@_~:#!%&',;=\+\(\)\[\]\-\.\/\?\$\*]*$/i;
  if(_erlaubteZeichen.test(_meineURL) == false) {return false;}

  if(_meineURL.split('?').length > 2) {return false;}
  if(_meineURL.split('#').length > 2) {return false;}
  if(_meineURL.split('//').length > 2) {return false;}

  var _tempURL = document.createElement('a');
  _tempURL.href = _meineURL;
  if(_tempURL.hostname == "") {return false;}
  var _hostZeichen = /^[a-z0-9\.\-]*$/i;
  if(_hostZeichen.test(_tempURL.hostname) == false) {return false;}

  return true;
 }
Deshalb veröffentliche ich einmal diesen ersten Lösungsansatz, der alles andere als den Anspruch auf Vollständigkeit für sich beansprucht.
Was passiert, bzw. was habe ich mir dabei gedacht?
  1. Die URL wird vom Whitespace befreit! Insbesondere die Leerzeichen vorne und hinten die durch Copy and Paste entstanden sind!
  2. Mit RegEx wird das Schema auf http:// bzw. https:// geprüft!
    Gibt es kein Schema-Protokoll, so ist die URL auch nicht valide!
    Darauf können wir uns einigen, schließlich braucht JavaScript für sein Window.open() das http!
  3. Die erlaubten Zeichen werden überprüft! Dabei wird mal global über die reservierten und nicht reservierten drübergefahren. Hier geht es wirklich nur mal darum, alles auszuschließen, was auch definitiv auschließbar ist!
    Ist also ein unerlaubtes Zeichen dazwischen, dann raus damit - die Funktion meldet ein false!
  4. Die Zeichen ? und # sowie die Zeichenkette // dürfen in einer URL nur einmal vorkommen!
    Das haben bisher die meisten anderen Lösungen einfach ignoriert!
    Ich weiß nicht warum - wissen die etwas was ich nicht weiß?
    Natürlich hätte ich da auch gerne eine RegEx Lösung gehabt, aber weil ich es einfach nicht zusammengebracht habe, dachte ich mir: "Ein Dreizeiler mehr, was solls?"
  5. Dann geht es eh schon ans eingemachte - den Host überprüfen!
    Zuerst einmal: Kein Host, keine URL! Steht also ein http:// ganz alleine da, dann ist es zwar bisher noch valide, aber was soll da geöffnet werden? Also - ohne Hostname schickt die Funktion schon ein false zurück!
    Für die Host gibt es mal vier große Lösungen (die auch was öffnen sollen!)
    a) localhost
    b) eine IPv4-Adresse
    c) eine IPv6-Adresse
    d) und natürlich der liebgewordene Domain-Name

    Die Regeln für eine Domain sind sehr strikt. Alphanummerisch plus dem Bindestrich! Zur Prüfung muss natürlich noch der Punkt zugelassen werden. Wir denken hier z. B. an Subdomains.
    Zu glauben, dass eine gültige URL irgendwo ein www haben sollte ist doch sowas von 90er oder?
    Auch dass die Top-Level-Domains nur mehr aus zwei oder drei Buchstaben bestehen ist schon lange nicht gültig.
    Auch die Anzahl der Punkte kann nicht definitiv geprüft werden (außer vielleicht bei einer IPv4 Adresse)!
    Was man noch prüfen könnte (zumindest aus meiner 2021-Sicht heraus), wäre ob die Top-Level-Domain aus mindestens 2 Zeichen besteht! Aber da will ich nicht meine Hand ins Feuer legen
    Für die Prüfung ob der Hostname eine IPv4 Adresse ist werde ich noch (vielleicht) eine weitere Funktion zur Verfügung stellen.
    Da gibt es auch wieder so viele Lösungen. Mit RegEx - ich habe mal alle Punkte entfert, bleibt nur eine Zahl übrig, dann ist es ein untrügliches Zeichen für eine IPv4 Adresse!
06. Dec 2024 - 14:59
Hier könnte dein Kommentar stehen!

Thomas Maier css4.at Logo
Thomas Maier Impressum OER: CC BY NC SA 2023-10-30