首頁  >  文章  >  web前端  >  JavaScript如何實現點擊刪除擴展名並獲取檔案名

JavaScript如何實現點擊刪除擴展名並獲取檔案名

藏色散人
藏色散人原創
2021-08-26 11:30:131924瀏覽

在之前的文章《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 = &#39;"+fName + "&#39;";

    function gfg_Run() {
        el_down.innerHTML = fName.split(&#39;.&#39;).slice(0, -1).join(&#39;.&#39;);
    }
</script>
</body>
</html>

效果如下所示:

GIF 2021-8-26 星期四 上午 11-21-38.gif

  • #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 = &#39;" + fName + "&#39;";

    function gfg_Run() {
        el_down.innerHTML =fName.replace(/\.[^/.]+$/, "")
    }
</script>
</body>
</html>

效果如下:

GIF 2021-8-26 星期四 上午 11-23-42.gif

  • #RegExp 是正規表示式的縮寫。 RegExp物件用於規定在文字中檢索的內容,可透過 new 關鍵字定義 RegExp 物件。

  • replace()方法用於在字串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。

最後給大家推薦《JavaScript基礎教學》~歡迎大家學習~

以上是JavaScript如何實現點擊刪除擴展名並獲取檔案名的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn