数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何使用 JavaScript 从字符串中去除文件扩展名？
许多网络应用程序允许用户上传文件。此外，它还会显示文件名去除文件扩展名后的文件内容。
此外，有时我们需要将文件内容存储在数据库中，并使用不带扩展名的文件名作为键。因此，各种用例都需要我们使用上传文件的文件名（不带扩展名）。
在这里，我们将学习多种使用 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”扩展名的字符串存储在 original 变量中。当用户按下按钮时，我们将调用 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>
7K+ 次浏览
