How to Get Path from URL in Javascript

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.


  • 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">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
        <input type="text">
    <script src="script.js"></script>
body {
    text-align: center;

div {
    display: inline-block;

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


  • 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;