Logo

Exploiter l'URL : Récupérer l'adresse, le chemin et les paramètres en JavaScript

Introduction

Chaque page web a sa propre URL, et JavaScript offre plusieurs moyens de récupérer et manipuler ces informations directement depuis la navigation courante.

Cet article explore comment extraire et travailler avec les informations de l'URL actuelle en JavaScript.

1. Anatomie d'une URL

Avant de plonger dans le code, comprenons ce qu'est réellement une URL. Prenons l'exemple : `https://www.exemple.com/produits?categorie=informatique&page=2`

  • `https://` : le protocole (sécurisé)
  • `www.exemple.com` : le nom de domaine
  • `/produits` : le chemin (path)
  • `?categorie=informatique&page=2` : les paramètres de requête
  • `categorie=informatique` : premier paramètre
  • `page=2` : deuxième paramètre

Les paramètres commencent toujours par `?`, puis s'enchaînent avec `&`. Chaque paramètre suit le format `clé=valeur`.

2. Récupérer l'URL courante

L'objet `window.location` est votre principal allié pour accéder aux informations de l'URL de la page en cours.

// URL complète
console.log(window.location.href);

// Protocole (http:// ou https://)
console.log(window.location.protocol);

// Nom de domaine
console.log(window.location.hostname);

// Chemin de la page
console.log(window.location.pathname);

3. Extraire les paramètres de l'URL

L'objet `URLSearchParams` permet de parser facilement les paramètres de l'URL courante.

Concrètement, si votre URL est `https://site.com/page?categorie=high-tech&page=2`, récupérer le paramètre `categorie` devient simple.

// Récupérer tous les paramètres de l'URL actuelle
const parametres = new URLSearchParams(window.location.search);

// Obtenir un paramètre spécifique
const categorie = parametres.get('categorie');
const page = parametres.get('page');

// Exemple de vérification
if (categorie) {
  console.log(`Catégorie sélectionnée : ${categorie}`);
}

// Lister tous les paramètres
parametres.forEach((valeur, cle) => {
  console.log(`${cle}: ${valeur}`);
});

4. Manipulation dynamique de l'URL

Vous pouvez modifier l'URL sans recharger la page en utilisant l'historique du navigateur.

Utile pour les filtres dynamiques, la pagination, ou les applications monopages (SPA) sans rechargement.

// Ajouter un nouveau paramètre à l'URL courante
function ajouterParametre(cle, valeur) {
  const url = new URL(window.location.href);
  url.searchParams.set(cle, valeur);
  
  // Mettre à jour l'URL sans recharger la page
  window.history.pushState({}, '', url);
}

// Supprimer un paramètre
function supprimerParametre(cle) {
  const url = new URL(window.location.href);
  url.searchParams.delete(cle);
  
  window.history.pushState({}, '', url);
}

5. Techniques de filtrage et de validation

  • Toujours valider et nettoyer les paramètres d'URL
  • Utiliser des valeurs par défaut pour les paramètres manquants
  • Encoder et décoder les paramètres sensibles
  • Gérer les URLs avec des caractères spéciaux

Exemple complet : Système de filtrage

// Fonction pour récupérer et filtrer les paramètres d'URL
function recupererFiltres() {
  const parametres = new URLSearchParams(window.location.search);
  const filtres = {
    categorie: parametres.get('categorie') || 'tous',
    page: parseInt(parametres.get('page') || '1', 10),
    recherche: parametres.get('q') || ''
  };

  // Validation des filtres
  filtres.page = Math.max(1, filtres.page);
  filtres.recherche = filtres.recherche.trim();

  return filtres;
}

// Utilisation
const filtresCourants = recupererFiltres();
console.log(filtresCourants);

Conclusion

La manipulation des URL permet de gérer efficacement la navigation et les états d'une application web, en utilisant des méthodes natives de JavaScript.

Logo