How to get the file name from page URL using JavaScript ?
Last Updated :
12 Jul, 2025
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:
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:
OutputUsing 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:
OutputUsing 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
Similar Reads
How to get the file name from full path using JavaScript ? Given a file name that contains the file path also, the task is to get the file name from the full path. There are a few methods to solve this problem which are listed below: JavaScript replace() method: This method searches a string for a defined value, or a regular expression, and returns a new st
2 min read
How to Extract the Host Name from URL using JavaScript? Extracting the hostname from a URL using JavaScript means retrieving the domain part from a complete web address. This can be done using JavaScript's URL object or methods like window.location, which allow easy access to the hostname of a URL.What is URL?A URL (Uniform Resource Locator) is the web a
2 min read
How to Get the Current URL using JavaScript? Here are two different methods to get the current URL in JavaScript.1. Using Document.URL PropertyThe DOM URL property in HTML is used to return a string that contains the complete URL of the current document. The string also includes the HTTP protocol such as ( http://).Syntaxdocument.URLReturn Val
1 min read
How to get URL Parameters using JavaScript ? To get URL parameters using JavaScript means extracting the query string values from a URL. URL parameters, found after the ? in a URL, pass data like search terms or user information. JavaScript can parse these parameters, allowing you to programmatically access or manipulate their values.For getti
3 min read
How to Get Domain Name From URL in JavaScript? In JavaScript, the URL object allows you to easily parse URLs and access their components. This is useful when you need to extract specific parts of a URL, such as the domain name. The hostname property of the URL object provides the domain name of the URL.PrerequisiteJavascriptHTMLBelow are the fol
2 min read
How to read a local text file using JavaScript? JavaScript can read local files using the File API, which is supported by most modern browsers. The File API allows JavaScript to read the contents of files chosen by the user, typically through an HTML file input element.The File object represents a file (like a text file or image) selected by the
6 min read