Les URL en JavaScript : redirections, chemin, ancre, arguments GET

Twitter
LinkedIn
Facebook
Mail

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 redirections en JavaScript

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://monsite.fr/");

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

Récupérer l’URL en JavaScript

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;

Récupérer le protocole en JavaScript (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;

Récupérer le nom de domaine en JavaScript

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;

Récupérer le chemin de l’URL en JavaScript

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( "/" );

Récupérer l’ancre passée dans l’URL en JavaScript

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;

Récupérer les arguments de l’URL en JavaScript, équivalent à $_GET en PHP

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
Passionné par le web et la programmation avec toujours plein de projets en tête