How to get the file name from page URL using JavaScript ?

Last Updated : 25 Jun, 2024

JavaScript provides multiple techniques for string manipulation and pattern matching. By demonstrating various methods, the article equips developers with versatile solutions to dynamically retrieve and utilize file names from different URL formats within their applications.

There are several approaches to getting the file name from the page URL using JavaScript which are as follows:

Table of Content

Using window.location.pathname
Using URL Object
Using split() Method
Using Regular Expressions

Using window.location.pathname

This approach utilizes the window.location.pathname property to fetch the path of the current URL and extracts the file name by splitting the path using the `/` delimiter and retrieving the last segment.

Example: To demonstrate extracting file names from page URLs using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Get File Name from URL</title>
    <script>
        function getFileName() {
            let path = window.location.pathname;
            let fileName = path.substring(path.lastIndexOf('/') + 1);
            document.getElementById('result').textContent = fileName;
        }
    </script>
</head>

<body>
    <h1>Get File Name Example</h1>
    <button onclick="getFileName()">Get File Name</button>
    <p>File Name: <span id="result"></span></p>
</body>

</html>

Output:

Output

Using URL Object

The URL object provides a structured way to parse URLs. This approach creates a URL object with the current URL and retrieves the pathname, then extracts the file name similarly.

Example: To demonstrate extracting file name from page URL using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Get File Name from URL</title>
    <script>
        function getFileName() {
            let url = new URL(window.location.href);
            let path = url.pathname;
            let fileName = path.substring(path.lastIndexOf('/') + 1);
            document.getElementById('result').textContent = fileName;
        }
    </script>
</head>

<body>
    <h1>Get File Name Example</h1>
    <button onclick="getFileName()">Get File Name</button>
    <p>File Name: <span id="result"></span></p>
</body>

</html>

Output:

Output

Using split() Method

This approach splits the URL path by `/` and retrieves the last element of the resulting array, which represents the file name.

Example: To demonstrate extracting file name from page URL using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Get File Name from URL</title>
    <script>
        function getFileName() {
            let path = window.location.pathname;
            let segments = path.split('/');
            let fileName = segments.pop();
            document.getElementById('result').textContent = fileName;
        }
    </script>
</head>

<body>
    <h1>Get File Name Example</h1>
    <button onclick="getFileName()">Get File Name</button>
    <p>File Name: <span id="result"></span></p>
</body>

</html>

Output:

Output

Using Regular Expressions

Regular expressions can be used to match and capture the file name from the URL path, providing flexibility for more complex URL structures.

Example: To demonstrate extracting file name from page URL using JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Get File Name from URL</title>
    <script>
        function getFileName() {
            let path = window.location.pathname;
            let match = path.match(/\/([^\/?#]+)$/);
            let fileName = match ? match[1] : '';
            document.getElementById('result').textContent = fileName;
        }
    </script>
</head>

<body>
    <h1>Get File Name Example</h1>
    <button onclick="getFileName()">Get File Name</button>
    <p>File Name: <span id="result"></span></p>
</body>

</html>

Output:

Output

How to Check the Input Date is Equal to Today's Date or not using JavaScript?

PranchalKatiyar

Improve

Article Tags :

How to get the file name from page URL using JavaScript ?

Using window.location.pathname

Using URL Object

Using split() Method

Using Regular Expressions

Similar Reads

Thank You!

What kind of Experience do you want to share?