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

Share on email
Share on twitter
Share on linkedin
Share on facebook
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, the anchor and the parameters passed in this URL.

URLs in JavaScript: The redirections

There are two ways to do a redirection in JavaScript. The first is equivalent to a click while the second is similar to an HTTP redirection. It is possible to express an absolute URL as https://monsite.fr/chemin/page.html or monsite.fr/chemin/page.html, or 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 the URL

To be able to retrieve and process the information related to the URL, we will use the object window.location proposed by default in JavaScript. You can obtain the URL of the page on which 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 with 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 with 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 URL path

if this code is executed on a page with the URL https://monsite.fr/chemin/page.htmlthen the variable path 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 with the URL https://monsite.fr/chemin/page.html#mon-ancrethen the variable pathology will be set to "#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 URL arguments, equivalent to $_GET in PHP

To retrieve the arguments potentially present in the URL, JavaScript offers the variable [enlighter lang= "javascript "]window.location.search[/enlighter]. If the URL does not contain any arguments, it will be empty. Otherwise, it will contain a string formatted as follows: [enlighter]?arg1=value1&arg2=value2[/enlighter].

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 stores 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
WordPress Developer
Julien MA JACOB - WordPress Developer
Passionate about the web and programming with always many projects in mind
  Discussion of the article
Subscribe to the newsletter
Notify to
guest
0 Comments
Inline Feedbacks
View all comments