Maison > interface Web > js tutoriel > Comment supprimer l'extension et obtenir le nom du fichier en cliquant sur JavaScript

Comment supprimer l'extension et obtenir le nom du fichier en cliquant sur JavaScript

藏色散人
Libérer: 2021-08-26 11:30:13
original
2002 Les gens l'ont consulté

Dans l'article précédent "Deux méthodes pour JavaScript pour obtenir les clés des tableaux associatifs", nous avons présenté comment obtenir les clés des tableaux associatifs avec JavaScript. Les amis intéressés peuvent en apprendre davantage~

Le contenu clé de cet article. est Apprenez à cliquer pour supprimer l'extension et obtenir le nom du fichier via JavaScript.

Fini les bêtises, allons droit au but !

Présentation de deux méthodes d'implémentation :

Le code de la première méthode est le suivant :

Remarque : Cet exemple utilise split(), slice() code> et la méthode <code>join() pour obtenir le nom du fichier. 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>
Copier après la connexion

效果如下所示:

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

  • split()方法:用于把一个字符串分割成字符串数组。

  • slice()方法:可提取字符串的某个部分,并以新的字符串返回被提取的部分。

  • join()方法:用于把数组中的所有元素放入一个字符串。

第二种方法代码如下:

注:本示例使用RegExpreplace()

<!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>
Copier après la connexion
L'effet est le suivant :

 GIF 2021-8-26 jeudi matin 11-21-38.gifGIF 2021-8-26 星期四 上午 11-23-42.gif

  • Méthode split() : utilisée pour diviser une chaîne en un tableau de chaînes.

  • Méthode slice() : peut extraire une certaine partie de la chaîne et renvoyer la partie extraite sous forme de nouvelle chaîne.


  • méthode join() : utilisée pour mettre tous les éléments du tableau dans une chaîne.

Le code de la deuxième méthode est le suivant :

🎜🎜Remarque : Cet exemple utilise les méthodes RegExp et replace() pour obtenir le nom du fichier. . 🎜rrreee🎜L'effet est le suivant : 🎜🎜🎜🎜🎜🎜🎜RegExp est l'abréviation d'expression régulière. L'objet RegExp est utilisé pour spécifier le contenu à récupérer dans le texte. L'objet RegExp peut être défini via le mot-clé new. La méthode 🎜🎜🎜🎜replace() est utilisée pour remplacer certains caractères par d'autres caractères dans une chaîne, ou pour remplacer une sous-chaîne qui correspond à une expression régulière. 🎜🎜🎜🎜🎜Enfin, je voudrais recommander "🎜🎜Tutoriel de base JavaScript🎜🎜" à tout le monde~ Bienvenue à tous pour apprendre~🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal