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=yesCode language: 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.');
}Code language: JavaScript (javascript)

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

Avec cette URL :

https://example.com/?preview=yesCode language: JavaScript (javascript)

ce test renverra true :

searchParams.has('preview');Code language: 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);Code language: JavaScript (javascript)

Avec cette URL :

https://example.com/?preview=yesCode language: 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); // nullCode language: 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é.');
}Code language: 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.');
}Code language: JavaScript (javascript)

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

https://example.com/
https://example.com/?preview
https://example.com/?preview=yesCode language: 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')); // ""Code language: 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'));
}Code language: 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=performanceCode language: JavaScript (javascript)

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

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

console.log(searchParams.get('tag'));Code language: JavaScript (javascript)

Résultat :

javascript

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

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

console.log(tags);Code language: JavaScript (javascript)

Résultat :

["javascript", "wordpress", "performance"]Code language: JSON / JSON with Comments (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é.');
}Code language: 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);Code language: 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=1Code language: 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;
}Code language: JavaScript (javascript)

HTML associé :

<p data-form-notice hidden>
	Votre message a bien été envoyé.
</p>Code language: 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=maiCode language: 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,
});Code language: 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());Code language: 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());Code language: 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);Code language: 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'))); // trueCode language: 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';Code language: 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;
}Code language: JavaScript (javascript)

Préférez l’API native :

const searchParams = new URLSearchParams(window.location.search);
const value = searchParams.get('preview');Code language: 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;
	}
});Code language: JavaScript (javascript)

Et côté HTML :

<p class="js-form-notice" hidden>
	Votre message a bien été envoyé.
</p>Code language: 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.');
}Code language: JavaScript (javascript)

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

const preview = searchParams.get('preview');Code language: 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