Validateur URL Regex JavaScript

Qu'est-ce que URL Regex en JavaScript ?

En JavaScript, un regex URL (expression régulière) permet de vérifier si une chaîne donnée respecte la structure d'une adresse web valide. Cela peut inclure des liens HTTP ou HTTPS, des noms de domaine et des chemins ou paramètres de requête optionnels.

Toutes les URL valides suivent un pattern particulier.

Elles comportent trois parties principales :

• Protocole (tel que http ou https)

• Nom de domaine (ou parfois une adresse IP)

• Port et chemin (le port est souvent optionnel, tandis que le chemin indique l'emplacement de la ressource)

Un regex bien conçu garantit que chacun de ces composants clés est présent et correctement formaté, ce qui en fait un outil pratique pour valider les saisies utilisateurs ou analyser des adresses web dans vos applications JavaScript.

Les patterns regex URL sont utiles pour :

• Valider des liens dans des formulaires et des saisies utilisateurs

• Extraire des URL de textes ou de journaux

• Nettoyer et traiter des données dans des scripts de scraping ou d'automatisation

• Empêcher l'envoi de liens invalides aux serveurs

Qu'est-ce qui rend une URL valide ?

Toutes les URL valides suivent un pattern particulier. Elles comportent trois parties principales :

• Protocole : spécifie la méthode d'accès à la ressource (par exemple http, https).

• Nom de domaine (ou adresse IP) : l'adresse unique du site ou de la ressource.

• Port et chemin (optionnels) : détails supplémentaires comme le numéro de port et le chemin ou fichier spécifique sur le serveur.

Pattern Regex URL courant (JavaScript)

Un regex couramment utilisé pour la validation d'URL de base est :

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

Ce pattern vérifie :

• http ou https optionnel

• Un nom de domaine valide

• Un chemin et une chaîne de requête optionnels

Comment valider des URL en JavaScript avec Regex

Voici comment utiliser regex pour valider une URL en 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

Exemples d'URL valides et invalides

Valider des URL avec l'objet URL JavaScript

Pour une solution plus robuste intégrée au langage, l'objet URL de JavaScript est idéal. Il gère la majorité du traitement et analyse correctement même les URL délicates, sans vous préoccuper des cas limites ou d'écrire des patterns complexes.

Fonctionnement : créez une fonction utilitaire qui tente simplement d'instancier un nouvel objet URL à partir de la saisie. Si la chaîne n'est pas une URL valide, le constructeur lèvera une erreur, ce qui vous permet de détecter les saisies invalides.

Comparaison des approches de validation d'URL

JavaScript propose plusieurs approches pour la validation d'URL, chacune avec ses avantages :

1. Expressions régulières (Regex)

Les patterns regex sont largement utilisés pour vérifier rapidement la structure des URL. Le pattern ci-dessus vérifie :

• Un protocole http ou https optionnel

• Un ou plusieurs sous-domaines et noms de domaine valides

• Une extension de domaine d'au moins deux caractères

• Des chemins, paramètres de requête ou fragments optionnels

Regex est idéal pour une validation légère et une intégration facile dans des formulaires ou des scripts simples.

2. Le constructeur URL

L'objet intégré de JavaScript offre une méthode robuste pour valider et analyser des URL sans écrire de patterns personnalisés :

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

Cette méthode est fiable, gère les cas limites et est recommandée pour une validation complète.

3. Packages tiers

Pour des projets nécessitant une validation avancée, considérez des packages npm comme is-url ou is-url-http :

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

Ces bibliothèques sont particulièrement utiles pour la validation côté serveur ou dans des bases de code importantes.

Pourquoi utiliser l'objet URL pour la validation ?

• Précision : L'objet URL suit les règles officielles d'analyse des URL et gère facilement les cas limites.

• Lisibilité : Le code est plus facile à comprendre et à maintenir.

• Gestion des erreurs : Il lève une erreur claire si l'entrée n'est pas une URL valide.

• Flexibilité : Accédez directement aux parties d'une URL (hostname, pathname, paramètres de requête) sans analyse supplémentaire.

Valider des URL avec le package is-url-http

1. Installez le package :

   npm install is-url-http

2. Importez et utilisez en JavaScript :

   import isUrlHttp from 'is-url-http';
   // Exemples
   isUrlHttp("https://www.example.com"); // true
   isUrlHttp("http://example.com");      // true
   isUrlHttp("www.example.com");         // false
   isUrlHttp("invalid-url");             // false

Valider des URL avec le package npm is-url

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

Conseils pratiques pour URL Regex en JavaScript

• Utilisez des groupes non capturants quand vous n'avez pas besoin d'extraire des sous-correspondances. Cela améliore les performances.

• Combinez cet outil avec le JavaScript Regex Tester pour tester des patterns complexes de manière interactive.

• Évitez les patterns trop stricts qui pourraient bloquer des URL valides involontairement.

• Normalisez l'entrée avant la validation (par exemple, supprimez les espaces).

• Associez cet outil au Générateur de tokens pour valider les URL contenant des tokens d'accès ou à l'Encodeur Base64 pour les composants URL sécurisés.

Métacaractères Regex utilisés

• ^ : ancre la correspondance au début de la chaîne

• $ : ancre la correspondance à la fin de la chaîne

• ? : rend le token précédent optionnel

• () : groupe capturant

• (?:) : groupe non capturant

• [] : ensemble de caractères

• . : correspond à tout caractère sauf le saut de ligne

• + : une ou plusieurs occurrences

• * : zéro ou plusieurs occurrences

• / : slash échappé (pour les composants de chemin)

Combiner avec ces outils

• JavaScript Regex Tester - testez n'importe quel pattern en direct.

• Générateur de tokens - validez les paramètres URL tokenisés.

• Encodeur Base64 - encodez des données dans des URL.

• Validateur UUID Regex JavaScript - correspondance des UUID dans les URL RESTful.

• Validateur Email Regex JavaScript - validez les adresses email souvent liées dans des formulaires.

• Validateur Numéro de téléphone Regex JavaScript - pour les formulaires de contact incluant à la fois téléphone et URL.