Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to trim a file extension from a string using JavaScript?
Many web applications allow users to upload files and display filenames without extensions. Sometimes we need to store file content in databases using the filename without extension as a key. Here, we'll learn multiple ways to trim file extensions from strings using JavaScript.
Using split(), pop() and join() Methods
Every filename contains a file extension after the last dot. We can split the filename using '.' as a delimiter, remove the last element with pop(), and join the remaining parts back together.
Syntax
let split = fileName.split('.');
split.pop();
let finalName = split.join(".");
Example
This example demonstrates removing file extensions from uploaded files:
<html>
<body>
<h2>Using split(), join(), and pop() methods to remove file extension</h2>
<div id="output"></div>
<input type="file" onchange="showFilename(this)">
<script>
let output = document.getElementById("output");
function showFilename(event) {
// Get uploaded file name
let fileName = event.files[0].name;
output.innerHTML += "Original filename: " + fileName + "<br>";
// Split the filename by dots
let split = fileName.split('.');
// Remove the last element (extension)
split.pop();
// Join remaining parts
let finalName = split.join(".");
output.innerHTML += "Without extension: " + finalName + "<br><br>";
}
</script>
</body>
</html>
Using Regular Expression
We can use a regular expression pattern to find and remove the file extension using the replace() method.
Syntax
let regex = /\.[^/.]+$/; let fileName = original.replace(regex, "");
Regular Expression Explained
-
\.- Matches a literal dot character -
[^/.]+- Matches one or more characters that are not dots or slashes -
$- Matches the end of the string
Example
<html>
<body>
<h2>Using Regular Expression to remove file extension</h2>
<div id="output"></div>
<button onclick="removeExtension()">Remove Extension</button>
<script>
let output = document.getElementById("output");
let original = "document.pdf";
output.innerHTML += "Original filename: " + original + "<br>";
function removeExtension() {
let regex = /\.[^/.]+$/;
let fileName = original.replace(regex, "");
output.innerHTML += "Without extension: " + fileName + "<br>";
}
</script>
</body>
</html>
Using substring() and lastIndexOf() Methods
We can find the last occurrence of the dot character using lastIndexOf() and extract everything before it using substring().
Syntax
let dotLastIndex = fileName.lastIndexOf('.');
let finalName = fileName.substring(0, dotLastIndex);
Example
<html>
<body>
<h2>Using substring() and lastIndexOf() methods</h2>
<div id="output"></div>
<input type="file" onchange="removeExtension(this)">
<script>
let output = document.getElementById("output");
function removeExtension(event) {
let fileName = event.files[0].name;
output.innerHTML += "Original filename: " + fileName + "<br>";
let dotLastIndex = fileName.lastIndexOf('.');
let finalName = fileName.substring(0, dotLastIndex);
output.innerHTML += "Without extension: " + finalName + "<br><br>";
}
</script>
</body>
</html>
Comparison of Methods
| Method | Best For | Handles Multiple Dots | Performance |
|---|---|---|---|
| split(), pop(), join() | Simple cases | Yes | Moderate |
| Regular Expression | Complex patterns | Yes | Good |
| substring() + lastIndexOf() | Performance critical | Yes | Best |
Conclusion
All three methods effectively remove file extensions from strings. Use substring() with lastIndexOf() for best performance, regular expressions for pattern matching flexibility, or split()/join() for simplicity.
9K+ Views
