JavaScript 🐛 Les URL, redirection, chemin, ancre, arguments GET

Partager sur email
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur facebook
Partager sur whatsapp
Partager sur email

Dans cet article, nous voyons tout ce qui concerne les URL avec JavaScript. Comment faire une redirection vers une URL. Comment rĂ©cupĂ©rer et enregistrer l’URL dans une variable, ou encore rĂ©cupĂ©rer une partie de celle-ci. Nous verrons comment rĂ©cupĂ©rer le protocole utilisĂ©, le nom de domaine, le chemin de la page, l’ancre et les paramĂštres passĂ©s dans cette URL.

Les URL en JavaScript : Les redirections

Il y a deux possibilitĂ©s pour faire une redirection en JavaScript. La premiĂšre est Ă©quivalente Ă  un clic tandis que la seconde est similaire Ă  une redirection HTTP. il est possible d’exprimer une URL absolue comme https://monsite.fr/chemin/page.html ou monsite.fr/chemin/page.html, ou des URL relative comme chemin/pahe.html.

// Similar as an HTTP redirect
window.location.replace("https://my-website.fr/");

// Similar as clicking on a link
window.location.href = "https://my-website.fr/";

Les URL en JavaScript : RĂ©cupĂ©rer l’URL

Pour pouvoir rĂ©cupĂ©rer et traiter les informations relatives Ă  l’URL, nous allons utiliser l’objet window.location proposĂ© par dĂ©faut dans JavaScript. Vous pouvez obtenir l’URL de la page sur laquelle le JavaScript est exĂ©cutĂ© comme ci-dessous. La variable contiendra alors l’URL sous la forme https://monsite.fr/.

var url = window.location.protocol + "//" + window.location.host + window.location.pathname;

Les URL en JavaScript : RĂ©cupĂ©rer le protocole (HTTP, HTTPS, FILE…)

si ce code est exĂ©cutĂ© sur une page ayant l’URL https://monsite.fr, alors la variable protocole aura la valeur « https ».

var protocol = window.location.protocol;

Les URL en JavaScript : Récupérer le nom de domaine

si ce code est exĂ©cutĂ© sur une page ayant l’URL https://monsite.fr/chemin/page.html, alors la variable path aura la valeur « monsite.fr ».

var host = window.location.host;

Les URL en JavaScript : RĂ©cupĂ©rer le chemin de l’URL

si ce code est exĂ©cutĂ© sur une page ayant l’URL https://monsite.fr/chemin/page.html, alors la variable path aura la valeur « chemin/page.html ».

var path = window.location.pathname;

Vous pouvez aussi récupérer chaque éléments du chemin dans un tableau avec le code suivant.

var pathArray = window.location.pathname.split( "/" );

Les URL en JavaScript : RĂ©cupĂ©rer l’ancre

si ce code est exĂ©cutĂ© sur une page ayant l’URL https://monsite.fr/chemin/page.html#mon-ancre, alors la variable path aura la valeur « #mon-ancre ». Vous pouvez retirer simplement le diĂšse (« # ») en utilisant window.location.hash.substr(1).

var path = window.location.hash;

Les URL en JavaScript : RĂ©cupĂ©rer les arguments de l’URL, Ă©quivalent Ă  $_GET en PHP

Pour rĂ©cupĂ©rer les arguments potentiellement prĂ©sents dans l’URL, le JavaScript propose la variable window.location.search. Si l’URL ne contient pas d’arguments, elle sera vide. Sinon, elle contiendra une chaĂźne de caractĂšres formatĂ©e comme suit : ?arg1=value1&arg2=value2.

Il est possible de traiter cette chaĂźne de caractĂšre pour la transformer en tableau, et ainsi l’utiliser plus simplement. Une fois que le code ci-dessous est exĂ©cutĂ©, il permet de rĂ©cupĂ©rer les arguments passĂ©s dans l’URL et de les enregistrer dans le tableau $_GET .

var $_GET = [];
var parts = window.location.search.substr(1).split("&");
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}

console.log($_GET);
Julien MA Jacob
DĂ©veloppeur WordPress
Julien MA Jacob - DĂ©veloppeur WordPress
PassionnĂ© par le web et la programmation avec toujours plein de projets en tĂȘte
  Discussion autour de l'article
avatar
  S’abonner  
Notifier de