Paramètres d'URL sous forme d'objet

Introduction

Dans ce laboratoire, nous allons explorer la manière d'extraire et de mapper les paramètres d'URL dans un objet JavaScript à l'aide d'expressions régulières et de méthodes d'array. Nous apprendrons à utiliser String.prototype.match() pour obtenir toutes les paires clé-valeur et Array.prototype.reduce() pour les transformer en un seul objet. À la fin de ce laboratoire, vous aurez une meilleure compréhension de la manière de travailler avec les URLs et d'en extraire des informations utiles.

Objet avec les paramètres d'URL

Pour créer un objet qui contient les paramètres de l'URL actuelle, suivez ces étapes :

1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
2. Utilisez String.prototype.match() avec une expression régulière appropriée pour extraire toutes les paires clé-valeur.
3. Utilisez Array.prototype.reduce() pour mapper et combiner les paires en un seul objet.
4. Passez location.search en argument pour l'appliquer à l'URL actuelle.

Voici le code :

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)),
      a
    ),
    {}
  );

Vous pouvez utiliser cette fonction avec n'importe quelle URL pour obtenir un objet avec ses paramètres. Voici quelques exemples :

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam', surname: 'Smith'}

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur les paramètres d'URL sous forme d'objet. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.