JavaScript 🐛 URLs, redirect, path, anchor, GET arguments

Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email
Share on twitter
Share on linkedin
Share on facebook
Share on whatsapp
Share on email

In this article, we see everything about URLs with JavaScript. How to redirect to a URL. How to retrieve and save the URL in a variable, or retrieve a part of it. We will see how to retrieve the protocol used, the domain name, the page path, theanchor and the parameters passed in this URL.

URLs in JavaScript : The redirections

There are two possibilities to do a redirection in JavaScript. The first one is equivalent to a click while the second one is similar to an HTTP redirection. It is possible to express an absolute URL like https://monsite.fr/chemin/page.html or monsite.fr/path/page.htmlor relative URLs such as path/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/";

URLs in JavaScript : Retrieve URL

To be able to retrieve and process the URL information, we will use the object window.location proposed by default in JavaScript. You can obtain the URL of the page on which the JavaScript is executed as below. The variable will then contain the URL in the form https://monsite.fr/.

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

URLs in JavaScript : Retrieve the protocol (HTTP, HTTPS, FILE...)

if this code is executed on a page having the URL https://monsite.frthen the protocol variable will have the value "https".

var protocol = window.location.protocol;

URLs in JavaScript : Retrieve the domain name

if this code is executed on a page having the URL https://monsite.fr/chemin/page.htmlthen the path variable will have the value "monsite.fr".

var host = window.location.host;

URLs in JavaScript : Retrieve the path of the URL

if this code is executed on a page having the URL https://monsite.fr/chemin/page.htmlthen the path variable will have the value "path/page.html".

var path = window.location.pathname;

You can also retrieve each element of the path in a table with the following code.

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

URLs in JavaScript : Retrieve the anchor

if this code is executed on a page having the URL https://monsite.fr/chemin/page.html#mon-ancrethen the variable path will have the value "#my anchor". You can simply remove the hash ("#") by using window.location.hash.substr(1).

var path = window.location.hash;

URLs in JavaScript : Retrieve the arguments of the URL, equivalent to $_GET in PHP

To retrieve the arguments potentially present in the URL, the JavaScript offers the variable window.location.search. If the URL contains no arguments, it will be empty. Otherwise, it will contain a string formatted as follows: ?arg1=value1&arg2=value2.

It is possible to process this string to transform it into an array, and thus use it more simply. Once the code below is executed, it retrieves the arguments passed in the URL and saves them in the $_GET array.

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
Developer WordPress
Julien MA Jacob - Developer WordPress
🧙♂️ Passionate about the web and programming with always lots of projects in mind 👨💻 | About page
  Discussion of the article
Subscribe to our newsletter
Notify of
guest
0 Comments
Inline Feedbacks
View all comments