Lorsque vous développez une application web, il peut être nécessaire de récupérer l’URL actuelle de la page. Cette information est utile pour :
suivre la navigation des utilisateurs,
adapter le contenu affiché selon la page,
mettre en place des systèmes de redirection,
ou encore analyser les paramètres d’une URL (query string).
Dans ce tutoriel, nous allons voir comment obtenir l’URL actuelle avec JavaScript de manière simple et efficace.
window.locationLa méthode la plus courante consiste à utiliser l’objet window.location, qui contient toutes les informations relatives à l’URL.
Voici un exemple :
console.log(window.location.href);
window.location.href renvoie l’URL complète de la page actuelle.
Par exemple :
https://www.example.com/articles/javascript?categorie=web
En plus de l’URL complète, vous pouvez accéder à des parties spécifiques de l'URL :
console.log("Protocole : " + window.location.protocol); // https:
console.log("Nom de domaine : " + window.location.hostname); // www.example.com
console.log("Port : " + window.location.port); // 8080 (si défini)
console.log("Chemin : " + window.location.pathname); // /articles/javascript
console.log("Paramètres : " + window.location.search); // ?categorie=web
console.log("Hash : " + window.location.hash); // #section1 (si présent)
Cela vous permet de manipuler chaque partie de l’URL selon vos besoins.
Souvent, on souhaite récupérer les paramètres passés dans l’URL (après le ?).
Pour cela, JavaScript propose l’objet URLSearchParams.
// Exemple d'URL : https://www.example.com/page?user=Alice&age=25
const params = new URLSearchParams(window.location.search);
console.log(params.get("user")); // Alice
console.log(params.get("age")); // 25
C’est très utile pour personnaliser une page selon l’utilisateur ou filtrer du contenu.
Voici un mini-exemple qui affiche automatiquement l’URL actuelle dans une page HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Obtenir l'URL actuelle</title>
</head>
<body>
<h2>URL actuelle :</h2>
<p id="url"></p>
<script>
document.getElementById("url").innerText = window.location.href;
</script>
</body>
</html>
Résultat : la page affichera l’URL complète de la fenêtre courante.
Utilisez window.location.href pour obtenir ou rediriger vers une URL complète.
Décomposez l’URL avec window.location.protocol, hostname, pathname, etc. si vous avez besoin de détails précis.
Employez URLSearchParams pour analyser facilement les paramètres (?clé=valeur).
N’oubliez pas qu’une manipulation incorrecte de l’URL peut impacter la sécurité (attention aux injections dans les paramètres).
JavaScript offre plusieurs façons d’obtenir et de manipuler l’URL actuelle grâce à window.location.
Que vous ayez besoin de l'URL complète ou d’une partie spécifique (chemin, paramètres, ancre), les outils sont simples et accessibles même pour les débutants.
En maîtrisant cette fonctionnalité, vous pouvez rendre vos pages web plus dynamiques et interactives, tout en améliorant l’expérience utilisateur.