Before doing anything with the files and its contents on a web application, it sometimes becomes necessary to find the file extension. In this article we will discuss about 3 different procedures to find out if its actually a file and if it's a file, what type it is.
The replace() method usually replaces a value in a string with another set of given values. The general syntax for this method is: string.replace(searchvalue, newvalue).
Now how can this help us find the extension of the file?
The above method takes two parameters to replace values of a given string. In this case the string will be the filename itself and the first parameter will be the entire filename till the last “dot” and the second parameter will be a blank string.
Regular Expression Meta Characters will be used to fetch all the characters till the dot is found in the string. So these characters will be replaced with a blank string, leaving the file extension as the result.
let fileName, fileExtension; fileName = 'file.jpeg'; fileExtension = fileName.replace(/^.*\./, ''); console.log (fileExtension);
Meta Characters can be confusing, so it needs to be explained. The characters “^.*” indicates, all characters. The character combination “\.” indicates till it reaches the “dot”. Putting together it means “get all the characters in the string, till it finds the “dot”. And this combination is written inside the 2 forward slash “/” at the beginning and at the end.
The general syntax is: string.substr(start, length).
The first parameter start, will be a numeric value and second parameter “length” too accepts a numeric value.
The lastIndexOf() method will search for a particular string or character in the entire string and locate the position of the given string or character. It too returns a numeric value.
string.lastIndexOf (searchvalue, start);
let fileName, fileExtension; fileName = 'file.jpeg'; fileExtension = fileName.substr((fileName.lastIndexOf('.') + 1)); console.log (fileExtension);
The .lastIndexOf() will find the location of the dot and return a numeric value plus 1, and this numeric value will be used by the method .substr() to return the remaining strings left.
In the above example the dot is at the 5th location and the .substr() will extract characters starting from 5 + 1 i.e., the 6th position and return jpeg.
The first parameter can be any character used to split the string and the second parameter is a numeric value defining the number of items returned as an arrays.
Let us assume, we have a string Home is where the Heart is and we’ll use this with the method.
The .pop() method will return the last item from an array of values but cannot be used directly with the string. So it has to be used with the .split() method.
let fileName, fileExtension; fileName = 'file.jpeg'; fileExtension = fileName.split('.').pop(); console.log (fileExtension);
While searching for the file extension (based on the character dot), the .split() method will split the string “file.jpeg” into two different items in an array, that is, file and jpeg. The .pop() method will return the last item, that is jpeg. (see example)
In the markup section, I have added three images, a PDF and an HTML file. Now, let's check the script.