URL Regex Javascript Validator

Was ist URL Regex in JavaScript?

In JavaScript wird ein URL regex (regulärer Ausdruck) verwendet, um zu prüfen, ob eine gegebene Zeichenkette der Struktur einer gültigen Web-Adresse entspricht. Dies kann HTTP- oder HTTPS-Links, Domain-Namen und optionale Pfade oder Query-Parameter umfassen.

Alle gültigen URLs folgen einem bestimmten Muster.

Sie haben drei Hauptbestandteile:

• Protokoll (z. B. http oder https)

• Domain-Name (oder manchmal eine IP-Adresse)

• Port und Pfad (der Port ist oft optional, der Pfad gibt den Speicherort der Ressource an)

Ein gut gestaltetes regex stellt sicher, dass jede dieser Kernkomponenten vorhanden und korrekt formatiert ist. Es ist ein praktisches Werkzeug zur Validierung von Nutzereingaben oder zum Parsen von Web-Adressen in JavaScript-Anwendungen.

URL-regex-Muster sind nützlich für:

• Validierung von Links in Formularen und Nutzereingaben

• Extraktion von URLs aus Texten oder Logs

• Bereinigung und Verarbeitung von Daten in Web-Scraping- oder Automatisierungs-Skripten

• Verhinderung der Übermittlung ungültiger Links an Server

Was macht eine gültige URL aus?

• Protokoll: Gibt die Methode für den Zugriff auf die Ressource an (z. B. http, https).

• Domain-Name (oder IP-Adresse): Die eindeutige Adresse der Website oder Ressource.

• Port und Pfad (optional): Zusätzliche Angaben wie die Portnummer und der spezifische Pfad auf dem Server.

Häufiges URL Regex-Muster (JavaScript)

Ein häufig verwendetes regex für die einfache URL-Validierung:

/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/

Dieses Muster prüft auf:

• Optionales http oder https

• Einen gültigen Domain-Namen

• Einen optionalen Pfad und Query-String

URL-Validierung in JavaScript mit regex

So verwenden Sie regex zur URL-Validierung in JavaScript:

function isValidURL(url) {
  const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/;
  return urlPattern.test(url);
}
// Test
console.log(isValidURL("https://example.com"));           // true
console.log(isValidURL("http://my.site/path?q=1"));       // true
console.log(isValidURL("invalid-url"));                   // false

Beispiele für gültige und ungültige URLs

URL-Validierung mit dem JavaScript URL-Objekt

Wenn Sie eine robustere, eingebaute Lösung bevorzugen, ist Javascripts URL-Objekt ideal. Es übernimmt den Großteil der Arbeit und parst auch schwierige URLs korrekt, sodass Sie sich keine Gedanken über Sonderfälle machen müssen.

So funktioniert es: Erstellen Sie eine Hilfsfunktion, die versucht, ein neues URL-Objekt aus der Eingabe zu erzeugen. Ist die Zeichenkette keine gültige URL, wirft der Konstruktor einen Fehler, den Sie zur Erkennung ungültiger Eingaben nutzen können.

Verschiedene Ansätze zur URL-Validierung

1. Reguläre Ausdrücke (regex)

regex-Muster werden häufig für schnelle Strukturprüfungen verwendet. Das obige Muster prüft auf:

• Optionales http- oder https-Protokoll

• Einen oder mehrere gültige Subdomains und Domain-Namen

• Eine Domain-Erweiterung mit mindestens zwei Zeichen

• Optionale Pfade, Query-Parameter oder Fragmente

2. Der URL-Konstruktor

Javascripts eingebautes URL-Objekt bietet eine robuste Methode zur Validierung und zum Parsen, ohne eigene Muster schreiben zu müssen:

function isValidURL(url) {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}

Verwendungsbeispiel:

console.log(isValidURL("https://example.com"));        // true
console.log(isValidURL("http://sub.domain.com/path")); // true
console.log(isValidURL("not a url"));                  // false
console.log(isValidURL("ftp:/missing.slashes.com"));   // false

3. npm-Pakete

Für Projekte, die eine erweiterte Validierung benötigen, eignen sich npm-Pakete wie is-url oder is-url-http:

import isUrl from 'is-url';
console.log(isUrl("https://example.com")); // true
console.log(isUrl("invalid-url")); // false

import isUrlHttp from 'is-url-http';
console.log(isUrlHttp("https://example.com")); // true
console.log(isUrlHttp("ftp://site.com")); // false

Wählen Sie den Ansatz, der am besten zu Ihrem Anwendungsfall passt: regex für schnelle Prüfungen, das URL-Objekt für Zuverlässigkeit oder ein Drittanbieter-Paket für erweiterte Anforderungen.

Warum das URL-Objekt zur Validierung verwenden?

• Genauigkeit: Das URL-Objekt folgt den offiziellen URL-Parsing-Regeln und behandelt Sonderfälle, die regex oft übersieht.

• Lesbarkeit: Der Code ist einfacher zu verstehen und zu warten.

• Fehlerbehandlung: Bei ungültiger Eingabe wird ein klarer Fehler ausgelöst.

• Flexibilität: Hostname, Pfadname oder Query-Parameter sind direkt zugänglich.

Profi-Tipps für URL regex in JavaScript

• Verwenden Sie nicht-erfassende Gruppen, wenn Sie keine Teilübereinstimmungen extrahieren müssen. Dies verbessert die Performance.

• Kombinieren Sie dies mit dem JavaScript Regex Tester, um komplexe Muster interaktiv zu testen.

• Vermeiden Sie übermäßig strenge Muster, sonst werden manche gültige URLs versehentlich blockiert.

• Normalisieren Sie Eingaben vor der Validierung (z. B. Leerzeichen entfernen).

• Kombinieren Sie dies mit dem Token Generator für URLs mit Zugriffstoken oder dem Base64 Encoder für sichere URL-Komponenten.

Verwendete regex-Metazeichen

• ^: Verankert den Treffer am Anfang der Zeichenkette

• $: Verankert den Treffer am Ende der Zeichenkette

• ?: Macht das vorhergehende Token optional

• (): Erfassende Gruppe

• (?:): Nicht-erfassende Gruppe

• []: Zeichenmenge

• .: Trifft jedes Zeichen außer Zeilenumbruch

• +: Trifft ein oder mehrere Vorkommen

• *: Trifft null oder mehr Vorkommen

• /: Escapter Schrägstrich (für Pfadkomponenten)

Ergänzende Tools

• JavaScript Regex Tester -- Muster live testen.

• Token Generator -- Tokenisierte URL-Parameter validieren.

• Base64 Encoder -- Daten in URLs kodieren.

• UUID Regex JavaScript Validator -- UUIDs in RESTful URLs abgleichen.

• Email Regex JavaScript Validator -- E-Mail-Adressen in Formularen validieren.

• Phone Number Regex JavaScript Validator -- Für Kontaktformulare mit Telefon- und URL-Feldern.