Parser un paramètre d’URL en JavaScript : Le tutoriel

Vous êtes sûrement déjà tombé sur une URL qui ressemble à ça, avec ces petits morceaux après le ?… Chaque élément représente un paramètre d’URL. Que ce soit pour suivre des campagnes marketing, filtrer des produits, ou transmettre des informations entre pages, ils jouent un rôle clé en JavaScript :

https://monsite.com/page?produit=chaise&couleur=noir&prix=120

• Comprendre rapidement comment lire et exploiter les paramètres d’URL en JavaScript pour rendre vos pages dynamiques et interactives
• Gagner du temps en utilisant des méthodes modernes et fiables pour manipuler facilement les données présentes dans une URL
• Améliorer l’expérience utilisateur en adaptant automatiquement vos contenus (filtres, formulaires, tracking) sans recharger la page

Dans ce tutoriel, vous allez apprendre à lire, comprendre et manipuler les paramètres d’URL en JavaScript, même si vous débutez. On va y aller étape par étape, avec des exemples concrets et du code simple à réutiliser directement sur votre site web ou vos projets.

Comprendre les paramètres d’URL (sans prise de tête)

Avant de coder, il faut comprendre ce que vous manipulez. Prenons cette URL :

https://monsite.com/page?nom=alban&age=43

Décomposons-la :

• ? → indique le début des paramètres
• nom=alban → clé = valeur
• & → sépare les paramètres

Donc ici, vous avez :

• nom → alban
• age → 43

Autrement dit, c’est un peu comme un petit objet JavaScript caché dans l’URL.

C’est ainsi que fonctionne une adresse internet contenant des informations spécifiques : un ou plusieurs paramètre d’url. Le point d’interrogation marque le début de ces données, le signe égal relie une catégorie à sa réponse (comme un nom ou un âge), et le symbole « & » sert à séparer les différentes informations entre elles.

C’est une méthode simple pour transmettre des détails précis, ici le nom « Alban » et l’âge « 43 », directement dans le lien.

Et justement… on va voir comment le récupérer.

Première méthode pour récupérer un paramètre d’url : l’ancienne école, à éviter si possible

Avant les outils modernes, pour récupérer un paramètre d’url, on faisait ça “à la main”. Oui, avec des split()… et un peu de courage. Ça ressemblait à ceci :

const url = window.location.search;
const params = url.substring(1).split("&");

const result = {};

params.forEach(param => {
    const [key, value] = param.split("=");
    result[key] = value;
});

console.log(result);

• window.location.search récupère tout ce qu’il y a après le ?
• substring(1) enlève le ?
• split("&") découpe chaque paramètre
• puis on découpe chaque clé/valeur

Résultat :

{
  nom: "alban",
  age: "43"
}

Ça fonctionne… mais c’est fragile, long, et franchement pas agréable à maintenir. Heureusement, il existe beaucoup mieux.

La méthode moderne : URLSearchParams

Voici LA méthode que vous devez utiliser aujourd’hui en JavaScript pour récupérer un paramètre d’url : URLSearchParams.

const params = new URLSearchParams(window.location.search);

const nom = params.get("nom");
console.log(nom);

Ce qui affichera :

alban

• Simple, propre, efficace.

Récupérer plusieurs paramètres d’URL facilement

const params = new URLSearchParams(window.location.search);

const nom = params.get("nom");
const age = params.get("age");
const ville = params.get("ville");

console.log(nom, age, ville);

Ici, vous récupérez chaque paramètre d’URL en JavaScript individuellement.

Et si le paramètre n’existe pas ?

Très bonne question.

const prenom = params.get("prenom");

console.log(prenom);

Le résultat renvoyé sera de type null :

null

Donc pensez toujours à vérifier à l’aide d’une condition JavaScript simple :

if (prenom) {
    console.log("Le prénom existe :", prenom);
} else {
    console.log("Aucun prénom trouvé");
}

Parcourir tous les paramètres (boucle)

Parfois, vous ne connaissez pas les paramètres d’url à l’avance.

const params = new URLSearchParams(window.location.search);

for (const [key, value] of params) {
    console.log(key, value);
}

Ce qui vous renverra en retour :

nom alban
age 43

C’est très pratique pour créer des filtres dynamiques ou des dashboards.

Convertir un paramètre d’URL en objet JavaScript

C’est souvent utile de pour convertir ces paramètres d’URL en objet JS.

const params = new URLSearchParams(window.location.search);

const obj = Object.fromEntries(params.entries());

console.log(obj);

Résultat :

{
  nom: "alban",
  age: "43",
  ville: "beziers"
}

Maintenant, vous avez un vrai objet JS exploitable partout.

Cas concret : filtrer une liste de produits

Imaginez l’URL d’une boutique en ligne qui ressemblerait à :

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

https://monsite.com/boutique?categorie=chaise&couleur=noir

À l’aide de JavaScript, nous allons donc récupérer les paramètres présent dans l’URL :

const params = new URLSearchParams(window.location.search);

const categorie = params.get("categorie");
const couleur = params.get("couleur");

if (categorie) {
    console.log("Filtrer par catégorie :", categorie);
}

if (couleur) {
    console.log("Filtrer par couleur :", couleur);
}

Vous pouvez ensuite adapter l’affichage des produits en fonction des paramètres récupérés.

Modifier les paramètres d’URL en JavaScript

Vous pouvez aussi modifier un paramètre d’RUL en JS.

const params = new URLSearchParams(window.location.search);

params.set("categorie", "table");

console.log(params.toString());

Votre URL aura désormais les paramètres suivant :

categorie=table&couleur=noir

Ajouter un nouveau paramètre d’URL

params.append("prix", "200");

Résultat :

categorie=table&couleur=noir&prix=200

Supprimer un paramètre d’URL

params.delete("couleur");

Mettre à jour l’URL dans le navigateur

Attention, modifier params ne change pas l’URL automatiquement, il va falloir l’indiquer à votre navigateur :

const newUrl = window.location.pathname + "?" + params.toString();

window.history.pushState({}, "", newUrl);

Et là… magie : l’URL change sans recharger la page.

Cas réel : tracking marketing (UTM)

Prenons l’exemple d’une campagne marketing avec un tracker dans l’url :

?utm_source=google&utm_campaign=promo

Pour récupérer ces informations transmises via l’url, nous procéderons de la manière suivante :

const params = new URLSearchParams(window.location.search);

const source = params.get("utm_source");
const campaign = params.get("utm_campaign");

if (source) {
    console.log("Source :", source);
}

• Très utile pour analyser votre trafic sur votre site web !

Attention aux encodages, le piège classique

Si vous avez :

?nom=Jean%20Dupont

JavaScript va automatiquement décoder :

const nom = params.get("nom");
console.log(nom);

Résultat :

Jean Dupont

Heureusement, URLSearchParams gère ça pour vous.

Paramètres multiples avec la même clé

Prenons l’exemple d’une URL ayant plusieurs paramètres avec le même nom de clé, ici tag, mais avec des valeurs différentes :

?tag=js&tag=seo&tag=web

Pour récupérer ces différentes valeurs des paramètres d’url ayant le même nom, nous utiliserons getAll() :

const tags = params.getAll("tag");

console.log(tags);

Ce qui nous permettra de récupérer un tableau contenant ces valeurs :

["js", "seo", "web"]

Très utile pour des filtres multi-sélection.

Les bonnes pratiques à adopter

Quand vous travaillez avec des paramètres d’URL en JavaScript, gardez en tête :

• Toujours vérifier si un paramètre existe
• Ne jamais faire confiance aux données (sécurité)
• Nettoyer les valeurs si besoin
• Éviter les méthodes “manuelles” type split()

Petite astuce UX sympa

Vous pouvez pré-remplir un formulaire avec des paramètres d’URL :

?email=test@mail.com

const email = params.get("email");

if (email) {
    document.querySelector("#email").value = email;
}

Effet garanti côté utilisateur.

---

Vous venez de découvrir un outil extrêmement puissant : la gestion d’un paramètre d’URL en JavaScript. Derrière ce concept simple se cache en réalité une multitude d’usages concrets, que ce soit pour améliorer l’expérience utilisateur, analyser votre trafic ou rendre vos pages dynamiques.

Maintenant, le plus important n’est pas seulement de comprendre… mais d’expérimenter. Testez, cassez, recommencez. Essayez sur vos propres projets ou vos outils internes. C’est en manipulant ces petits paramètres que vous allez vraiment progresser… et prendre plaisir à coder.