JavaScript如何實現點擊刪除擴展名並獲取檔案名
- 藏色散人原創
- 2021-08-26 11:30:131920瀏覽
在之前的文章《JavaScript獲取關聯數組的鍵的兩種方法》中給大家介紹了JavaScript怎麼獲取關聯數組的鍵，有興趣的朋友可以學習了解一下~
本文的重點內容則是教大家如何透過JavaScript實作點擊刪除副檔名並取得檔案名稱。
廢話不多說，直奔主題！
為大家介紹兩種實作方法：
第一種方法程式碼如下：
：本範例使用 split()、slice() 和 join() 方法取得檔案名稱。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:#ff311f;" >
PHP中文网
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
点击
</button>
<p id = "GFG_DOWN" style =
"color:#ff311f; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var fName = "fileName.jpg";
el_up.innerHTML = "String = '"+fName + "'";
function gfg_Run() {
el_down.innerHTML = fName.split('.').slice(0, -1).join('.');
}
</script>
</body>
</html>效果如下所示：
#split()方法：用來把一個字串分割成字符串數組。
slice()方法：可提取字串的某個部分，並以新的字串傳回被提取的部分。
join()方法：用來把陣列中的所有元素放入一個字串。
第二種方法程式碼如下：
#：本範例使用RegExp和 replace() 方法取得檔案名稱。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style = "text-align:center;">
<h1 style = "color:#17c4ff;" >
PHP中文网
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<button onclick = "gfg_Run()">
点击
</button>
<p id = "GFG_DOWN" style =
"color:#17c4ff; font-size: 20px; font-weight: bold;">
</p>
<script>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var fName = "fileName.jpg";
el_up.innerHTML = "String = '" + fName + "'";
function gfg_Run() {
el_down.innerHTML =fName.replace(/\.[^/.]+$/, "")
}
</script>
</body>
</html>效果如下：
#RegExp 是正規表示式的縮寫。 RegExp物件用於規定在文字中檢索的內容，可透過 new 關鍵字定義 RegExp 物件。
replace()方法用於在字串中用一些字符替換另一些字符，或替換一個與正則表達式匹配的子串。
最後給大家推薦《JavaScript基礎教學》~歡迎大家學習~
以上是JavaScript如何實現點擊刪除擴展名並獲取檔案名的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn