June 20, 2020

How to Get Path from URL in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to get path from URL in javascript. Path in a URL is a string that comes after the domain or subdomain and it represents a specific resource on your web server that a user can access.

A resource on a server can be private or public. A public resource can be easily accessed by any user, but for a private resource, a user must be authorized to access it.

You must have seen this pattern in websites that are created using WordPress. In WordPress blogs, the admin panel is a private resource and can be accessed only if a user logs in using admin credentials.

In javascript, it is super simple to get the path from the URL using the URL constructor. After initialization, this constructor returns a URL object which contains the pathname property and we can utilize that property to accomplish our goal.

In the following example, we will enter a random URL in the input field. Upon click of a button, we will retrieve the path from the URL and display it on the screen. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, input, button, and h1). The div element is just a wrapper for the rest of the elements.
The button element and the h1 element have “Get” and “Path” as innerText respectively. The innerText of the h1 element will be updated dynamically using javascript.

We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text">
        <button>Get</button>
        <h1>Path</h1>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input, button {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the input, button, and h1 elements using the document.querySelector() method and stored them in the input, btnGet, and path variables respectively.
We have attached a click event listener to the button element.
In the event handler function, we are getting the value from the input element using value property and storing it in the value variable.

We are using the URL constructor to create an instance of a URL object and we are passing it the value variable as a parameter. The URL object is stored in the url variable.
We are using the pathname property to get the path from url and displaying it in the h1 element using the innerText property.

let input = document.querySelector('input');
let btnGet = document.querySelector('button');
let path = document.querySelector('h1');

btnGet.addEventListener('click', () => {
    let value = input.value;

    let url = new URL(value);

    path.innerText = url.pathname;
});

You May Also Like: