如何使用 JavaScript 從字串中刪除檔案副檔名？
- WBOY轉載
- 2023-08-25 09:49:081654瀏覽
許多網路應用程式允許使用者上傳檔案。此外，它還顯示修剪檔案副檔名後的檔案內容和檔案名稱。
此外，有時我們需要將檔案內容以不含副檔名的檔案名稱作為鍵儲存到資料庫中。因此，各種用例要求我們使用上傳檔案的檔案名，不帶副檔名。
在這裡，我們將學習使用 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中文網其他相關文章！