JavaScript : tester si un paramètre existe dans une URL

Il arrive souvent de devoir tester la présence d’un paramètre dans une URL avec JavaScript. Par exemple, pour détecter un mode aperçu, afficher un message après l’envoi d’un formulaire, suivre une campagne ou adapter l’interface selon une valeur passée en query string.

Exemple d’URL :

https://example.com/?preview=yesLangage du code : JavaScript (javascript)

Ici, le paramètre s’appelle preview et sa valeur est yes.

La méthode moderne consiste à utiliser URLSearchParams. Pas besoin de découper l’URL à la main, ni d’écrire une expression régulière fragile. Le navigateur sait déjà faire. Autant le laisser travailler, il ne demande même pas de café.

Tester si un paramètre existe dans l’URL courante

Pour lire les paramètres de l’URL de la page actuelle, utilisez window.location.search. Cette propriété contient la partie de l’URL située après le point d’interrogation.

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

if (searchParams.has('preview')) {
	console.log('Le paramètre preview existe.');
}Langage du code : JavaScript (javascript)

La méthode has() renvoie true si le paramètre existe, et false sinon.

Avec cette URL :

https://example.com/?preview=yesLangage du code : JavaScript (javascript)

ce test renverra true :

searchParams.has('preview');Langage du code : JavaScript (javascript)

Récupérer la valeur d’un paramètre

Pour récupérer la valeur d’un paramètre, utilisez get().

const searchParams = new URLSearchParams(window.location.search);
const preview = searchParams.get('preview');

console.log(preview);Langage du code : JavaScript (javascript)

Avec cette URL :

https://example.com/?preview=yesLangage du code : JavaScript (javascript)

la variable preview contiendra :

yes

Si le paramètre n’existe pas, get() renvoie null.

const value = searchParams.get('missing');

console.log(value); // nullLangage du code : JavaScript (javascript)

Tester si un paramètre a une valeur précise

Tester l’existence du paramètre ne suffit pas toujours. Vous pouvez aussi vérifier sa valeur.

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

if (searchParams.get('preview') === 'yes') {
	console.log('Le mode aperçu est activé.');
}Langage du code : JavaScript (javascript)

Pour être plus strict, testez d’abord l’existence, puis la valeur :

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

if (searchParams.has('preview') && searchParams.get('preview') === 'yes') {
	console.log('Le paramètre preview existe et vaut yes.');
}Langage du code : JavaScript (javascript)

C’est utile si vous devez distinguer ces trois URLs :

https://example.com/
https://example.com/?preview
https://example.com/?preview=yesLangage du code : JavaScript (javascript)

Dans la deuxième URL, le paramètre existe, mais sa valeur est vide. Dans la troisième, il existe et vaut yes.

Différence entre has() et get()

Les méthodes has() et get() ne répondent pas à la même question.

Méthode	Question	Retour
has('preview')	Le paramètre existe-t-il ?	true ou false
get('preview')	Quelle est sa première valeur ?	Une chaîne ou null
getAll('tag')	Quelles sont toutes ses valeurs ?	Un tableau

Exemple :

const searchParams = new URLSearchParams('?preview=');

console.log(searchParams.has('preview')); // true
console.log(searchParams.get('preview')); // ""Langage du code : JavaScript (javascript)

Le paramètre existe bien, mais sa valeur est une chaîne vide.

Tester un paramètre dans une URL précise

Vous n’êtes pas obligé de travailler uniquement avec l’URL de la page courante. Vous pouvez aussi analyser une URL stockée dans une variable.

const url = new URL('https://example.com/articles/?preview=yes&source=newsletter');

if (url.searchParams.has('source')) {
	console.log(url.searchParams.get('source'));
}Langage du code : JavaScript (javascript)

Ici, url.searchParams donne directement accès aux paramètres de l’objet URL.

C’est souvent plus propre que de construire soi-même un URLSearchParams quand vous manipulez une URL complète.

Gérer plusieurs valeurs pour le même paramètre

Une URL peut contenir plusieurs fois le même paramètre.

https://example.com/?tag=javascript&tag=wordpress&tag=performanceLangage du code : JavaScript (javascript)

Dans ce cas, get() renvoie seulement la première valeur :

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

console.log(searchParams.get('tag'));Langage du code : JavaScript (javascript)

Résultat :

javascript

Pour récupérer toutes les valeurs, utilisez getAll().

const tags = searchParams.getAll('tag');

console.log(tags);Langage du code : JavaScript (javascript)

Résultat :

["javascript", "wordpress", "performance"]Langage du code : JSON / JSON avec commentaires (json)

Créer une fonction réutilisable

Pour éviter de répéter le même code partout, créez une petite fonction réutilisable.

/**
 * Vérifie si un paramètre existe dans l’URL courante.
 *
 * @param {string} name Nom du paramètre à chercher.
 * @returns {boolean} True si le paramètre existe.
 */
function hasUrlParam(name) {
	const searchParams = new URLSearchParams(window.location.search);

	return searchParams.has(name);
}

if (hasUrlParam('preview')) {
	console.log('Preview détecté.');
}Langage du code : JavaScript (javascript)

Et une fonction pour récupérer une valeur avec une valeur par défaut :

/**
 * Retourne la valeur d’un paramètre de l’URL courante.
 *
 * @param {string} name Nom du paramètre à lire.
 * @param {string|null} fallback Valeur à retourner si le paramètre n’existe pas.
 * @returns {string|null} Valeur du paramètre ou fallback.
 */
function getUrlParam(name, fallback = null) {
	const searchParams = new URLSearchParams(window.location.search);
	const value = searchParams.get(name);

	return value === null ? fallback : value;
}

const source = getUrlParam('source', 'direct');

console.log(source);Langage du code : JavaScript (javascript)

Exemple pratique : afficher un message après un formulaire

Imaginons qu’après l’envoi d’un formulaire, l’utilisateur soit redirigé vers cette URL :

https://example.com/contact/?sent=1Langage du code : JavaScript (javascript)

Vous pouvez afficher un message uniquement si le paramètre sent vaut 1.

const searchParams = new URLSearchParams(window.location.search);
const notice = document.querySelector('[data-form-notice]');

if (notice && searchParams.get('sent') === '1') {
	notice.hidden = false;
}Langage du code : JavaScript (javascript)

HTML associé :

<p data-form-notice hidden>
	Votre message a bien été envoyé.
</p>Langage du code : HTML, XML (xml)

Cette approche évite de charger une dépendance JavaScript pour trois lignes de logique. Le DOM survivra. Votre performance aussi.

Exemple pratique : détecter une campagne UTM

Les paramètres UTM sont souvent utilisés pour suivre l’origine d’une visite.

https://example.com/?utm_source=newsletter&utm_medium=email&utm_campaign=maiLangage du code : JavaScript (javascript)

Vous pouvez récupérer ces valeurs ainsi :

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

const utmSource = searchParams.get('utm_source');
const utmMedium = searchParams.get('utm_medium');
const utmCampaign = searchParams.get('utm_campaign');

console.log({
	source: utmSource,
	medium: utmMedium,
	campaign: utmCampaign,
});Langage du code : JavaScript (javascript)

Si vous utilisez ces données côté front-end, évitez d’y stocker des informations sensibles. Une URL est visible dans l’historique, les logs, les captures d’écran et parfois les outils d’analyse.

Ajouter ou modifier un paramètre dans l’URL

URLSearchParams permet aussi de modifier des paramètres.

const url = new URL(window.location.href);

url.searchParams.set('preview', 'yes');

console.log(url.toString());Langage du code : JavaScript (javascript)

La méthode set() ajoute le paramètre s’il n’existe pas, ou remplace sa valeur s’il existe déjà.

Pour supprimer un paramètre :

const url = new URL(window.location.href);

url.searchParams.delete('preview');

console.log(url.toString());Langage du code : JavaScript (javascript)

Mettre à jour l’URL sans recharger la page

Si vous voulez modifier l’URL visible dans le navigateur sans recharger la page, utilisez history.replaceState().

const url = new URL(window.location.href);

url.searchParams.delete('sent');

window.history.replaceState({}, '', url);Langage du code : JavaScript (javascript)

Ce cas est utile après l’affichage d’un message temporaire. L’utilisateur voit la confirmation, mais l’URL est ensuite nettoyée pour éviter de réafficher le message si la page est actualisée.

Attention aux valeurs booléennes

Les paramètres d’URL sont toujours des chaînes de caractères. Même si vous écrivez ?debug=false, la valeur récupérée est la chaîne "false", pas le booléen false.

const searchParams = new URLSearchParams('?debug=false');

console.log(searchParams.get('debug')); // "false"
console.log(Boolean(searchParams.get('debug'))); // trueLangage du code : JavaScript (javascript)

Pourquoi Boolean("false") renvoie true ? Parce qu’une chaîne non vide est truthy en JavaScript. Oui, c’est le genre de détail qui transforme une option “debug=false” en feu d’artifice de logs.

Préférez une comparaison explicite :

const debug = searchParams.get('debug') === 'true';Langage du code : JavaScript (javascript)

Éviter les vieux parsers regex

On trouve encore beaucoup de fonctions anciennes qui découpent l’URL avec des expressions régulières. Elles fonctionnent parfois, jusqu’au jour où une valeur contient un espace, un caractère encodé, plusieurs paramètres identiques ou un fragment #.

Évitez ce genre d’approche :

function getParameterByName(name) {
	const regex = new RegExp('[?&]' + name + '=([^&#]*)');
	const results = regex.exec(window.location.href);

	return results ? decodeURIComponent(results[1]) : null;
}Langage du code : JavaScript (javascript)

Préférez l’API native :

const searchParams = new URLSearchParams(window.location.search);
const value = searchParams.get('preview');Langage du code : JavaScript (javascript)

C’est plus court, plus lisible, mieux testé, et beaucoup moins susceptible de se prendre les pieds dans l’encodage.

Cas WordPress : passer une valeur au JavaScript proprement

Dans WordPress, vous pouvez évidemment lire les paramètres côté front avec JavaScript. Mais si la valeur influence une logique importante, validez-la aussi côté PHP.

Exemple front-end simple :

document.addEventListener('DOMContentLoaded', () => {
	const searchParams = new URLSearchParams(window.location.search);

	if (searchParams.get('sent') !== '1') {
		return;
	}

	const notice = document.querySelector('.js-form-notice');

	if (notice) {
		notice.hidden = false;
	}
});Langage du code : JavaScript (javascript)

Et côté HTML :

<p class="js-form-notice" hidden>
	Votre message a bien été envoyé.
</p>Langage du code : HTML, XML (xml)

Ne vous servez pas d’un paramètre d’URL comme d’une preuve de sécurité. N’importe qui peut modifier une URL. Pour l’affichage, c’est pratique. Pour l’autorisation, c’est non.

Compatibilité navigateur

URLSearchParams est bien pris en charge par les navigateurs modernes. Pour un site actuel, c’est l’API à utiliser.

Si vous devez encore prendre en charge de très vieux navigateurs, vous pouvez prévoir un fallback ou un polyfill. Mais dans la majorité des projets modernes, cela n’en vaut plus la peine.

Checklist rapide

• Utilisez new URLSearchParams(window.location.search) pour l’URL courante.
• Utilisez has() pour tester l’existence d’un paramètre.
• Utilisez get() pour récupérer sa première valeur.
• Utilisez getAll() si le paramètre peut apparaître plusieurs fois.
• Utilisez new URL(url).searchParams pour analyser une URL complète.
• Comparez explicitement les chaînes : param === 'true', param === '1', etc.
• N’utilisez pas les paramètres d’URL comme preuve de sécurité.
• Évitez les regex maison pour parser une query string.

Articles liés sur SkyMinds

• Vanilla JS : identifier l’élément plus large que le viewport
• JavaScript : sélectionner et désélectionner toutes les cases à cocher
• JavaScript : afficher du contenu dans un bloc DIV après un délai défini

À retenir

Pour tester si un paramètre existe dans une URL avec JavaScript, utilisez URLSearchParams et sa méthode has().

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

if (searchParams.has('preview')) {
	console.log('Le paramètre preview existe.');
}Langage du code : JavaScript (javascript)

Pour récupérer sa valeur, utilisez get().

const preview = searchParams.get('preview');Langage du code : JavaScript (javascript)

C’est simple, natif, lisible et fiable. Les regex maison ont rendu service pendant des années, mais elles peuvent maintenant profiter d’une retraite bien méritée.

Sources

• MDN Web Docs : URLSearchParams
• MDN Web Docs : URLSearchParams.has()
• MDN Web Docs : URLSearchParams.get()
• MDN Web Docs : Location.search

Report a typo