ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptをクリックして拡張子を削除し、ファイル名を取得する方法

JavaScriptをクリックして拡張子を削除し、ファイル名を取得する方法

藏色散人
藏色散人オリジナル
2021-08-26 11:30:131818ブラウズ

前回の記事「JavaScriptで連想配列のキーを取得する2つの方法」では、JavaScriptで連想配列のキーを取得する方法を紹介しましたので、興味のある方はぜひ学んでみてください~

この記事の焦点は、クリックして拡張子を削除し、JavaScript を通じてファイル名を取得する方法を説明することです。

早速、本題に入りましょう。

2 つの実装方法を紹介します:

最初の方法のコードは次のとおりです:

注: この例は次のとおりです。 を使用します。 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() メソッド: 配列内のすべての要素を文字列に入れるために使用されます。

2 番目のメソッド コードは次のとおりです:

注: この例では 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 オブジェクトは、テキスト内で取得するコンテンツを指定するために使用されます。RegExp オブジェクトは、new キーワードを通じて定義できます。

  • Thereplace() メソッドは、文字列内の一部の文字を他の文字に置き換えたり、正規表現に一致する部分文字列を置き換えたりするために使用されます。


最後に、「

JavaScript Basics Tutorial」をお勧めします ~皆さんもぜひ学んでください~

以上がJavaScriptをクリックして拡張子を削除し、ファイル名を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。