Comment obtenir l'URL actuelle avec JavaScript : analyse sous le capot

Comment obtenir l'URL actuelle avec JavaScript : comprendre ce qui se cache sous le capot

Imaginez : vous êtes assis devant votre ordinateur, vous avez ouvert un navigateur, et une longue URL s'affiche dans la barre d'adresse. Vous souhaitez que votre script JavaScript « lise » cette URL, la décompose en parties et en fasse quelque chose d'utile. Une situation familière ? Et comment ! C'est l'une des questions les plus populaires sur Stack Overflow — « Get the current URL with JavaScript? » a recueilli des centaines de milliers de vues. Pourquoi ? Parce qu'aucun projet sérieux ne peut se passer de cette tâche : navigation dynamique, analytics, formulaires, requêtes AJAX — partout, vous devez savoir où vous vous trouvez.

Dans cet article, je ne vais pas simplement vous montrer la ligne magique window.location.href, mais je vais regarder sous le capot du navigateur. Vous découvrirez comment l'objet location est structuré, quelles propriétés il stocke, comment analyser une URL en toute sécurité et quels pièges vous attendent. C'est parti !

Faites connaissance : l'objet window.location

Chaque fois que vous ouvrez une page web, le navigateur crée un objet spécial — window.location. Il vit dans l'espace de noms global et contient toutes les informations sur l'URL actuelle. Il suffit d'écrire dans la console :

console.log(window.location);

Vous verrez un objet avec de nombreuses propriétés. Les plus populaires sont :

\n
• href — la chaîne complète de l'URL (par exemple, https://pythonlib.ru/blog?page=2#comments).
\n
• protocol — le protocole (https: ou http:).
\n
• hostname — le nom d'hôte (pythonlib.ru).
\n
• port — le port (s'il n'est pas spécifié, une chaîne vide).
\n
• pathname — le chemin vers le fichier ou la page (/blog).
\n
• search — la chaîne de requête (tout ce qui suit ?, par exemple ?page=2).
\n
• hash — le fragment du lien (tout ce qui suit #, par exemple #comments).
\n

Le navigateur met automatiquement à jour ces propriétés lorsque vous cliquez sur un lien ou modifiez la barre d'adresse. Vous ne pouvez pas simplement les écraser (enfin, presque — nous y reviendrons), mais vous pouvez les lire autant que vous le souhaitez.

Comment obtenir l'URL complète : la méthode la plus simple

Si vous avez besoin de la chaîne entière, utilisez la propriété href :

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// Affiche : "https://pythonlib.ru/blog?page=2#comments"

C'est le « gold standard ». Cela fonctionne dans tous les navigateurs, y compris Internet Explorer (oui, il est encore utilisé dans certains réseaux d'entreprise). Retenez-le comme la réponse universelle à la question « comment obtenir l'URL actuelle en JavaScript ».

Décomposer l'URL en parties : à quoi ça sert ?

Supposons que vous développiez une boutique en ligne. Vous devez comprendre quels paramètres sont passés dans la chaîne de requête : ?category=books&sort=price. Ou vous souhaitez faire défiler la page en douceur vers un élément avec l'ancre #reviews. Prendre simplement href ne suffit pas. Il faut la décomposer en ses composants.

La méthode la plus fiable en JavaScript moderne est d'utiliser le constructeur URL :

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

L'objet URL donne accès à la méthode pratique searchParams — c'est un véritable analyseur de chaîne de requête. Vous pouvez obtenir, ajouter et supprimer des paramètres sans avoir à découper manuellement la chaîne. Sous le capot, il utilise les mêmes propriétés de window.location, mais fournit une API plus propre.

Sous le capot : comment le navigateur traite l'URL

Lorsque vous saisissez une adresse dans la barre d'adresse du navigateur, toute une chaîne d'événements se produit. Le navigateur décompose la chaîne en composants, en utilisant l'algorithme décrit dans la spécification WHATWG URL Standard. Cela ressemble à ceci