如何使用 JavaScript 从字符串中删除文件扩展名？

WBOY 转载: 2023-08-25 09:49:08 285浏览

许多网络应用程序允许用户上传文件。此外，它还显示修剪文件扩展名后的文件内容和文件名。

此外，有时我们需要将文件内容以不带扩展名的文件名作为键存储到数据库中。因此，各种用例要求我们使用上传文件的文件名，不带扩展名。

在这里，我们将学习使用 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() 方法将文件扩展名替换为空字符串。

语法

用户可以按照下面的语法使用正则表达式和替换方法来删除字符串中的文件扩展名。

let regex = new RegExp(/\.[^/.]+$/)
let fileName = original.replace(regex, "");

我们在上述语法中使用了 RegExp() 构造函数来创建正则表达式。

正则表达式解释

\. – 表示以“.”字符开头的字符串。

[^/.]+ - 表示字符串至少包含一个除“.”以外的字符。

$ - 代表字符串的结尾。

整个正则表达式查找开头包含点的模式，然后查找字符串结束前除点字符之外的其他字符。

示例 2

下面的示例将文件名作为原始变量中带有“.html”扩展名的字符串。当用户按下按钮时，我们调用removeExtension()函数。

在removeExtension()函数中，我们创建了如上所述的正则表达式并将其存储在regex变量中。之后，我们使用 Replace() 方法用空字符串替换相同的模式（例如正则表达式），以从文件名字符串中删除文件扩展名。

<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

在下面的示例中，当用户上传任何文件时，input 将触发 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>

以上就是如何使用 JavaScript 从字符串中删除文件扩展名？的详细内容，更多请关注php中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：如何在不改变原始数组的情况下拼接数组？下一条：如何使用JavaScript在HTML页面中水平添加元素？