Heim > Artikel > Web-Frontend > Wie entferne ich eine Dateierweiterung mit JavaScript aus einer Zeichenfolge?
Wie entferne ich eine Dateierweiterung mit JavaScript aus einer Zeichenfolge?
- WBOYnach vorne
- 2023-08-25 09:49:081654Durchsuche
Viele Webanwendungen ermöglichen Benutzern das Hochladen von Dateien. Darüber hinaus werden der Dateiinhalt und der Dateiname angezeigt, nachdem die Dateierweiterung gekürzt wurde.
Außerdem müssen wir manchmal den Dateiinhalt mit dem Dateinamen ohne Erweiterung als Schlüssel in der Datenbank speichern. Daher erfordern verschiedene Anwendungsfälle, dass wir den Dateinamen der hochgeladenen Datei ohne die Erweiterung verwenden.
Hier lernen wir verschiedene Möglichkeiten kennen, Dateierweiterungen mithilfe von JavaScript aus Zeichenfolgen zu entfernen.
Verwenden Sie die Methoden array.split(), array.pop() und array.join()
Jeder Dateiname enthält die Dateierweiterung nach dem letzten Punkt im Dateinamen. Wir können den Dateinamen also aufteilen, indem wir „.“ als Trennzeichen verwenden. Danach können wir die Methode array.pop() verwenden, um das letzte Element zu entfernen und die Array-Elemente erneut zu verketten, um nur den Dateinamen zu erhalten.
Grammatik
Benutzer können die Methoden array.split(), array.pop() und array.join() gemäß der folgenden Syntax verwenden.
let split = fileName.split('.');
split.pop();
let finalName = split.join(".");
Algorithmus
Schritt 1 – Ermitteln Sie den Dateinamen der hochgeladenen Datei.
Schritt 2 – Teilen Sie den Dateinamen auf, indem Sie den Punkt (.) als Trennzeichen verwenden.
Schritt 3 – Entfernen Sie die Erweiterung mit der Methode pop() aus dem Array.
Schritt 4 – Verwenden Sie die Methode join(), um die geteilten Arrays ohne Dateierweiterung zu verbinden.
Schritt 5 – Die Variable FinalName enthält den Dateinamen mit gekürzter Erweiterung.
Beispiel 1
Im folgenden Beispiel haben wir eine Benutzereingabe erstellt, die es Benutzern ermöglicht, Dateien in jedem Format hochzuladen. Immer wenn ein Benutzer eine Datei hochlädt, erhält er den Dateinamen mithilfe des Namensattributs und kürzt die Dateierweiterung durch Ausführen des oben genannten Algorithmus.
In der Ausgabe können Benutzer den Dateinamen mit oder ohne Erweiterung sehen.
<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>
Verwenden Sie reguläre Ausdrücke
Wir können Suchmuster mit regulären Ausdrücken verwenden, um Dateierweiterungen in Dateinamenzeichenfolgen zu finden. Anschließend können wir die Methode string.replace() verwenden, um die Dateierweiterung durch einen leeren String zu ersetzen.
Grammatik
Benutzer können der folgenden Syntax folgen, um Dateierweiterungen mithilfe regulärer Ausdrücke und Ersetzungsmethoden aus Zeichenfolgen zu entfernen.
let regex = new RegExp(/\.[^/.]+$/) let fileName = original.replace(regex, "");
Wir haben den RegExp()-Konstruktor in der obigen Syntax verwendet, um reguläre Ausdrücke zu erstellen.
Regulärer Ausdruck erklärt
. – Stellt eine Zeichenfolge dar, die mit dem Zeichen „.“ beginnt.
[^/.]+ – Zeigt an, dass die Zeichenfolge mindestens ein anderes Zeichen als „.“ enthält.
$ – stellt das Ende der Zeichenfolge dar.
Der gesamte reguläre Ausdruck sucht nach Mustern, die am Anfang einen Punkt enthalten, und sucht dann vor dem Ende der Zeichenfolge nach anderen Zeichen als dem Punkt.
Beispiel 2
Das folgende Beispiel verwendet den Dateinamen als Zeichenfolge mit der Erweiterung „.html“ in der Originalvariablen. Wenn der Benutzer die Taste drückt, rufen wir die Funktion „removeExtension()“ auf.
In der Funktion „removeExtension()“ erstellen wir den regulären Ausdruck wie oben erwähnt und speichern ihn in der Regex-Variablen. Danach verwenden wir die Methode „Replace()“, um dasselbe Muster (z. B. einen regulären Ausdruck) durch eine leere Zeichenfolge zu ersetzen und die Dateierweiterung aus der Dateinamenzeichenfolge zu entfernen.
<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>
Verwenden Sie die Methoden substring() und lastIndexOf()
Wir können die Methode lastIndexOf() verwenden, um den letzten Index des Zeichens „.“ im Dateinamen zu finden, da wir die gesamte Zeichenfolge nach dem letzten Punkt, der die Dateierweiterung darstellt, entfernen müssen.
Die Methodesubstring() ermöglicht es dem Benutzer, Teilzeichenfolgen mithilfe des Start- und Endindex abzurufen. Wir können die Teilzeichenfolge vom 0. Index bis zum letzten „.“-Zeichenindex abrufen.
Grammatik
Benutzer können Dateierweiterungen aus Dateinamenzeichenfolgen mithilfe der Methoden substring und lastIndexOf() gemäß der folgenden Syntax entfernen.
let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);
In der obigen Syntax ermitteln wir zunächst die Länge des Dateinamens mithilfe der Längeneigenschaft. Danach finden wir den letzten Index des Punkts und verwenden dann die Methode substring(), um den Teilstring vor dem letzten Punkt abzurufen.
Beispiel 3
Wenn der Benutzer im folgenden Beispiel eine Datei hochlädt, löst die Eingabe das onchange-Ereignis aus und ruft die Javascript-Funktion „removeExtension()“ auf. In der Funktion verwenden wir die Methode lastIndexOf() und die Methode substring(), um die Dateierweiterung aus dem Dateinamen der hochgeladenen Datei zu entfernen.
<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>
Das obige ist der detaillierte Inhalt vonWie entferne ich eine Dateierweiterung mit JavaScript aus einer Zeichenfolge?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!