极客笔记如何使用JavaScript从字符串中删除文件扩展名
许多Web应用程序允许用户上传文件。此外，它在去除文件扩展名后显示文件内容与文件名。
此外，有时我们需要将文件内容存储在数据库中，文件名作为键，不包含扩展名。因此，各种用例需要我们使用无扩展名的上传文件的文件名。
在这里，我们将学习使用JavaScript从字符串中删除文件扩展名的多种方法。
使用array.split()，array.pop()和array.join()方法
每个文件名都包含文件名中最后一个点后的文件扩展名。因此，我们可以使用“点”作为分隔符拆分文件名。然后，我们可以使用array.pop()方法删除最后一个元素，然后重新连接数组元素以获取仅包含文件名的文件名。
语法
用户可以按照下面的语法使用array.split()，array.pop()和array.join()方法。
let split = fileName.split('.');
split.pop();
let finalName = split.join(".");
步骤
步骤1 - 获取上传文件的文件名。
步骤2 - 通过点（.）作为分隔符拆分文件名。
步骤3 - 使用pop() 方法从数组中移除扩展名。
步骤4 - 使用join() 方法将拆分的数组合并为没有文件扩展名的字符串。
步骤5 - finalName变量包含修剪扩展名后的文件名。
示例1
在下面的示例中，我们创建了用户输入，允许用户上传任何格式的文件。每当用户上传任何文件时，它都会使用name属性获取文件名，并通过执行上述算法修剪文件扩展名。
在输出中，用户可以看到带扩展名和不带扩展名的文件名。
<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>
使用正则表达式
我们可以使用正则表达式搜索模式来查找文件名称字符串中的文件扩展名。然后，我们可以使用string.replace()方法将文件扩展名替换为空字符串。
语法
用户可以按照下面的语法使用正则表达式和replace方法从字符串中删除文件扩展名。
let regex = new RegExp(/\.[^/.]+$/)
let fileName = original.replace(regex, "");
我们在上面的语法中使用了RegExp()构造函数来创建一个正则表达式。
正则表达式解释
\. -它代表以字符’.’开头的字符串。
[^/.]+ -它表示字符串应包含至少一个字符，除了’.’字符。
$ -它表示字符串的结尾。
总体而言，正则表达式寻找以点开头的模式，之后，在字符串结尾之前的点字符之外的一些字符。
示例2
下面的示例将文件名作为原始变量中的带有’.html’扩展名的字符串。当用户按下按钮时，我们调用removeExtension()函数。
在removeExtension()函数中，我们根据上面解释的方式创建了正则表达式，并将其存储在regex变量中。之后，我们使用replace()方法将与regex相同的模式替换为空字符串，以从文件名字符串中去除文件扩展名。
<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>
使用substring()和lastIndexOf()方法
我们可以使用lastIndexOf()方法来找到文件名中最后一个‘.’字符的索引，因为我们需要删除最后一个点后面的整个字符串，表示文件的扩展名。
substring()方法允许用户使用起始索引和结束索引获取子字符串。我们可以从第0个索引到最后一个‘.’字符的索引获取子字符串。
语法
用户可以按照以下语法使用substring()和lastIndexOf()方法来从文件名字符串中删除文件扩展名。
let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);
在上述语法中，我们首先使用length属性获取文件名的长度。之后，我们找到最后一个点的索引，然后使用substring()方法获取最后一个点之前的子字符串。
示例3
在下面的示例中，当用户上传任何文件时，输入将触发onchange事件，并调用removeExtension() JavaScript函数。在函数中，我们使用lastIndexOf()方法和substring()方法来从上传文件的文件名中去掉文件扩展名。
<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>