Comment récupérer les paramètres d'URL avec JavaScript

Les paramètres d’URL (également appelés chaînes de requête) constituent un élément crucial du développement web, permettant de transmettre des données entre les pages ou du client vers le serveur. Que vous développiez une fonctionnalité de recherche, que vous gériez des soumissions de formulaires ou que vous suiviez les préférences utilisateur, savoir extraire et utiliser ces paramètres est essentiel.

Dans cet article, je vous montrerai les méthodes les plus efficaces pour récupérer les paramètres d’URL avec JavaScript, des approches modernes aux solutions héritées.

Comprendre les paramètres d’URL

Les paramètres d’URL apparaissent après le point d’interrogation (?) dans une URL et sont formatés sous forme de paires clé-valeur :

https://example.com/page?name=john&id=123

Dans cet exemple, il y a deux paramètres : name avec une valeur de john et id avec une valeur de 123.

L’approche moderne : URLSearchParams

La méthode la plus simple et la plus fiable pour gérer les paramètres d’URL dans les navigateurs modernes est d’utiliser l’interface URLSearchParams.

Utilisation de base

// En supposant l'URL : https://example.com/page?product=shirt&color=blue&size=m

// Récupérer la chaîne de requête
const queryString = window.location.search;

// Analyser la chaîne de requête
const urlParams = new URLSearchParams(queryString);

// Récupérer la valeur d'un paramètre spécifique
const product = urlParams.get('product'); // "shirt"
const color = urlParams.get('color');     // "blue"

Vérifier si un paramètre existe

// Vérifier si un paramètre existe
if (urlParams.has('product')) {
  // Le paramètre existe
  console.log('Le paramètre product existe');
}

Gérer les valeurs multiples

Si un paramètre apparaît plusieurs fois dans l’URL, vous pouvez récupérer toutes les valeurs :

// URL : https://example.com/page?tag=javascript&tag=frontend

// Récupérer toutes les valeurs pour un paramètre
const tags = urlParams.getAll('tag'); // ["javascript", "frontend"]

Itérer sur les paramètres

URLSearchParams fournit des méthodes d’itération pour travailler avec tous les paramètres :

// Itérer sur toutes les clés de paramètres
for (const key of urlParams.keys()) {
  console.log(key);
}

// Itérer sur toutes les valeurs de paramètres
for (const value of urlParams.values()) {
  console.log(value);
}

// Itérer sur toutes les entrées de paramètres (paires clé-valeur)
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}

Approche héritée : fonction personnalisée

Pour les navigateurs plus anciens qui ne prennent pas en charge URLSearchParams, vous pouvez créer une fonction personnalisée :

function getUrlParam(param) {
  const queryString = window.location.search.substring(1);
  const urlParams = queryString.split('&');
  
  for (let i = 0; i < urlParams.length; i++) {
    const paramPair = urlParams[i].split('=');
    if (paramPair[0] === param) {
      return decodeURIComponent(paramPair[1] || "");
    }
  }
  return null;
}

// Utilisation
const productValue = getUrlParam('product');

Gérer les cas particuliers courants

Caractères encodés

Les paramètres d’URL contiennent souvent des caractères encodés. Par exemple, les espaces sont encodés comme %20 :

// URL : https://example.com/search?query=web%20development

const query = urlParams.get('query');
console.log(query); // "web development" (automatiquement décodé)

Lors de l’utilisation d’une fonction personnalisée, assurez-vous d’utiliser decodeURIComponent() pour gérer correctement ces caractères encodés.

Paramètres manquants

Vérifiez toujours si un paramètre existe avant de l’utiliser :

const size = urlParams.has('size') ? urlParams.get('size') : 'default';

Paramètres vides

Les paramètres peuvent exister sans valeurs :

// URL : https://example.com/page?newsletter=&theme=dark

const newsletter = urlParams.get('newsletter'); // "" (chaîne vide)
const hasNewsletter = urlParams.has('newsletter'); // true

Exemple complet : récupérer tous les paramètres d’URL

Voici une fonction complète pour récupérer tous les paramètres d’URL sous forme d’objet :

function getAllUrlParams() {
  const params = {};
  const queryString = window.location.search.substring(1);
  
  if (queryString) {
    const pairs = queryString.split('&');
    
    for (const pair of pairs) {
      const [key, value] = pair.split('=');
      
      // Si le paramètre n'a pas de valeur, le définir à true
      if (typeof value === 'undefined') {
        params[key] = true;
      } else {
        // Si nous avons déjà ce paramètre, convertir en tableau
        if (params[key]) {
          if (!Array.isArray(params[key])) {
            params[key] = [params[key]];
          }
          params[key].push(decodeURIComponent(value));
        } else {
          params[key] = decodeURIComponent(value);
        }
      }
    }
  }
  
  return params;
}

Compatibilité des navigateurs

URLSearchParams est pris en charge dans tous les navigateurs modernes, notamment :

• Chrome 49+
• Firefox 44+
• Safari 10.1+
• Edge 17+

Pour les navigateurs plus anciens comme Internet Explorer, vous devrez utiliser un polyfill ou l’approche par fonction personnalisée.

Considérations de performance

Pour la plupart des applications, la différence de performance entre les méthodes est négligeable. Cependant :

1. URLSearchParams est optimisé et maintenu par les fournisseurs de navigateurs
2. Les fonctions personnalisées peuvent être adaptées à vos besoins spécifiques
3. Si vous ne récupérez qu’un seul paramètre, une regex simple pourrait être plus rapide

Notes de sécurité

Rappelez-vous que les paramètres d’URL sont visibles dans la barre d’adresse du navigateur et ne sont pas sécurisés pour les informations sensibles. Validez et assainissez toujours les valeurs des paramètres avant de les utiliser dans votre application.

Conclusion

L’interface URLSearchParams fournit une méthode propre et standardisée pour travailler avec les paramètres d’URL en JavaScript. Pour la plupart des applications web modernes, c’est l’approche recommandée. Pour la prise en charge des navigateurs hérités, une fonction personnalisée peut fournir la même fonctionnalité avec un peu plus de code.

En comprenant comment extraire et utiliser efficacement les paramètres d’URL, vous pouvez créer des applications web plus dynamiques et interactives.

FAQ