Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to trim a file extension from a string using JavaScript?
Many web applications allow users to upload a file. Also, it shows the file content with the filename after trimming the file extension.
Furthermore, sometimes we require to store the file's content in the database with the filename without extension as a key. So, various use cases require us to use the file name of the uploaded file without extension.
Here, we will learn multiple ways to trim the file extension from the string using JavaScript.
Use the array.split(), array.pop() and array.join() method
Every file name contains the file extension after the last dot in the file name. So, we can split the file name by taking the ‘.’ as a delimiter. After that, we can remove the last element using the array.pop() method, and join the array elements again to get the file name only.
Syntax
Users can follow the syntax below to use the array.split(), array.pop(), and array.join() method.
let split = fileName.split('.');
split.pop();
let finalName = split.join(".");
Algorithm
Step 1 – Get the filename of the uploaded file.
Step 2 – Split the file name by taking the dot (.) as a delimiter.
Step 3 – Use the pop() method to remove the extension from the array.
Step 4 – Use the join() method to join splitted array without the file extension.
Step 5 – The finalName variable contains the file name after trimming the extension.
Example 1
In the example below, we have created the user input allowing users to upload files of any format. Whenever the user uploads any file, it gets the file name using the name property and trims the file extension by executing the above algorithm.
In the output, users can see the file name with and without an extension.
<html>
<body>
<h2>Using the <i> array.split(), array.join(), and array.pop() </i> methods to remove the file extension from the string in JavaScript. </h2>
<div id = "output"></div> <br>
<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 += "The original file name is " + fileName + "<br/>";
// split the file name
let split = fileName.split('.');
// remove the last element of the array
split.pop();
// join array again
let finalName = split.join(".");
output.innerHTML += "The file name after trimming the extension is " + finalName + "<br/>";
}
</script>
</body>
</html>
Using the Regular Expression
We can use the regular expression search pattern to find the file extension in the file name string. After that, we can use the string.replace() method to replace the file extension with the empty string.
Syntax
Users can follow the syntax below to use the regular expression and replace method to trim the file extension from the string.
let regex = new RegExp(/\.[^/.]+$/) let fileName = original.replace(regex, "");
We used the RegExp() constructor in the above syntax to create a regular expression.
Regular expression explained
\. – It represents the string starting with the ‘.’ Character.
[^/.]+ - It represents that string should contain at least one character except ‘.’ Character.
$ - It represents the end of the string.
The overall regular expression looks for the pattern which contains the dot at the start, afterwards, some characters except the dot character before the string ends.
Example 2
The example below takes the file name as a string with the ‘.html’ extension in the original variable. When the user presses the button, we invoke the removeExtension() function.
In the removeExtension() function, we have created the regular expression as explained above and stored it in the regex variable. After that, we used the replace() method to replace the same pattern, like regex, with an empty string to trim the file extension from the file name string.
<html>
<body>
<h2>Using the <i> Regular expression </i> to remove the file extension from the string in JavaScript </h2>
<div id = "output"></div> <br>
<button onclick = "removeExtension()"> Remove extension </button>
<script>
let output = document.getElementById("output");
let original = "file.html"
output.innerHTML += "The original file name is " + original + "<br/>";
function removeExtension() {
let regex = new RegExp(/\.[^/.]+$/)
let fileName = original.replace(regex, "");
output.innerHTML += "The file name after trimming the extension is " + fileName + "<br/>";
}
</script>
</body>
</html>
Using the substring() and lastIndexOf() method
We can use the lastIndexOf() method to find the last index of the ‘.’ Character in the file name as we need to remove the whole string after the last dot representing the file extension.
The substring() method allows users to get a substring using the start and end index. We can get a substring from the 0th index to the last index of ‘.’ Character.
Syntax
Users can follow the syntax below to use the substring and lastIndexOf() method to trim the file extension from the file name string.
let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);
In the above syntax, we first get the file name's length using the length property. After that, we find the last index of the dot, and then we use the substring() method to get the substring before the last dot.
Example 3
In the example below, when a user uploads any file, input will trigger the onchange event and invoke the removeExtension() javascript function. In the function, we use the lastIndexOf() method and substring() method for trimming the file extension from the file name of the uploaded file.
<html>
<body>
<h2>Using the <i> substring() and lastIndexOf() </i> methods to remove the file extension from the string in JavaScript </h2>
<div id = "output"></div>
<input type = "file" name = "file" onchange = "removeExtension(this)">
<br>
<script>
let output = document.getElementById("output");
function removeExtension(event) {
let file = event.files[0].name;
output.innerHTML += "The original file name is " + file + "<br/>";
let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);
output.innerHTML += "The final file name after trimming the extension is " + finalName + "<br/>";
}
</script>
</body>
</html>
4K+ Views
