Maison > Article > interface Web > Comment supprimer l’extension de fichier d’une chaîne à l’aide de JavaScript ?
Comment supprimer l’extension de fichier d’une chaîne à l’aide de JavaScript ?
- WBOYavant
- 2023-08-25 09:49:081654parcourir
De nombreuses applications Web permettent aux utilisateurs de télécharger des fichiers. De plus, il affiche le contenu et le nom du fichier après avoir coupé l'extension du fichier.
De plus, nous devons parfois stocker le contenu du fichier dans la base de données avec le nom du fichier sans extension comme clé. Par conséquent, divers cas d’utilisation nous obligent à utiliser le nom du fichier téléchargé, sans l’extension.
Ici, nous allons apprendre différentes façons de supprimer les extensions de fichiers des chaînes à l'aide de JavaScript.
Utilisez les méthodes array.split(), array.pop() et array.join()
Chaque nom de fichier inclut l'extension de fichier après le dernier point du nom de fichier. Nous pouvons donc diviser le nom du fichier en utilisant "." Après cela, nous pouvons utiliser la méthode array.pop() pour supprimer le dernier élément et concaténer à nouveau les éléments du tableau pour obtenir uniquement le nom du fichier.
Grammaire
Les utilisateurs peuvent utiliser les méthodes array.split(), array.pop() et array.join() selon la syntaxe suivante.
let split = fileName.split('.');
split.pop();
let finalName = split.join(".");
Algorithme
Étape 1 – Obtenez le nom du fichier téléchargé.
Étape 2 – Divisez le nom de fichier en utilisant le point (.) comme séparateur.
Étape 3 – Supprimez l'extension du tableau à l'aide de la méthode pop().
Étape 4 – Utilisez la méthode join() pour joindre les tableaux divisés sans extension de fichier.
Étape 5 – La variable FinalName contient le nom du fichier avec l'extension coupée.
Exemple 1
Dans l'exemple ci-dessous, nous avons créé une entrée utilisateur qui permet aux utilisateurs de télécharger des fichiers dans n'importe quel format. Chaque fois qu'un utilisateur télécharge un fichier, il obtient le nom du fichier à l'aide de l'attribut name et supprime l'extension du fichier en exécutant l'algorithme ci-dessus.
Dans la sortie, les utilisateurs peuvent voir le nom du fichier avec ou sans extension.
<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>
Utilisez des expressions régulières
Nous pouvons utiliser des modèles de recherche d'expressions régulières pour trouver des extensions de fichiers dans les chaînes de noms de fichiers. Ensuite, nous pouvons utiliser la méthode string.replace() pour remplacer l’extension du fichier par une chaîne vide.
Grammaire
Les utilisateurs peuvent suivre la syntaxe ci-dessous pour supprimer les extensions de fichiers des chaînes à l'aide d'expressions régulières et de méthodes de remplacement.
let regex = new RegExp(/\.[^/.]+$/) let fileName = original.replace(regex, "");
Nous avons utilisé le constructeur RegExp() dans la syntaxe ci-dessus pour créer des expressions régulières.
Expression régulière expliquée
. – Représente une chaîne commençant par le caractère « ».
[^/.]+ - Indique que la chaîne contient au moins un caractère autre que "."
$ - représente la fin de la chaîne.
L'expression régulière entière recherche les modèles qui contiennent un point au début, puis recherche des caractères autres que le point avant la fin de la chaîne.
Exemple 2
L'exemple ci-dessous prend le nom de fichier sous forme de chaîne avec l'extension ".html" dans la variable d'origine. Lorsque l'utilisateur appuie sur le bouton, nous appelons la fonction removeExtension().
Dans la fonction removeExtension(), nous créons l'expression régulière comme mentionné ci-dessus et la stockons dans la variable regex. Après cela, nous utilisons la méthode Replace() pour remplacer le même modèle (par exemple une expression régulière) par une chaîne vide afin de supprimer l'extension de fichier de la chaîne du nom de fichier.
<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>
Utilisez les méthodes substring() et lastIndexOf()
Nous pouvons utiliser la méthode lastIndexOf() pour trouver le dernier index du caractère "." dans le nom du fichier car nous devons supprimer la chaîne entière après le dernier point représentant l'extension du fichier.
La méthodesubstring() permet à l'utilisateur d'obtenir une sous-chaîne en utilisant les index de début et de fin. Nous pouvons obtenir la sous-chaîne du 0ème index au dernier index de caractère « . »
Grammaire
Les utilisateurs peuvent supprimer les extensions de fichier des chaînes de nom de fichier à l'aide des méthodes substring et lastIndexOf() selon la syntaxe suivante.
let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);
Dans la syntaxe ci-dessus, nous obtenons d'abord la longueur du nom de fichier en utilisant la propriété length. Après cela, nous trouvons le dernier index du point, puis utilisons la méthode substring() pour obtenir la sous-chaîne avant le dernier point.
Exemple 3
Dans l'exemple ci-dessous, lorsque l'utilisateur télécharge un fichier, l'entrée déclenchera l'événement onchange et appellera la fonction javascript removeExtension(). Dans la fonction, nous utilisons la méthode lastIndexOf() et la méthode substring() pour supprimer l'extension de fichier du nom de fichier du fichier téléchargé.
<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>
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!