JavaScript 如何从一个字符串中修剪出一个文件扩展名

许多网络应用程序允许用户上传文件。同时，在修剪了文件扩展名后，它会显示文件内容和文件名。

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

在这里，我们将学习使用JavaScript修剪字符串中的文件扩展名的多种方法。

使用array.split(), array.pop()和array.join()方法

每个文件名都包含文件名中最后一个点之后的扩展名。因此，我们可以用’.’作为分隔符来分割文件名。之后，我们可以使用array.pop()方法删除最后一个元素，并再次连接数组元素，以获得唯一的文件名。

语法

用户可以按照下面的语法来使用array.split(), array.pop(), and 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变量中。之后，我们使用regex方法将相同的模式，像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()方法来获取最后一个点之前的子串。

例三

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