資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
