Bagaimana untuk mengalih keluar sambungan fail daripada rentetan menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk mengalih keluar sambungan fail daripada rentetan menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-25 09:49:08

ke hadapan

1804 orang telah melayarinya

如何使用 JavaScript 从字符串中删除文件扩展名？

Banyak aplikasi web membenarkan pengguna memuat naik fail. Selain itu, ia memaparkan kandungan fail dan nama fail selepas memangkas sambungan fail.

Selain itu, kadangkala kita perlu menyimpan kandungan fail ke dalam pangkalan data dengan nama fail tanpa sambungan sebagai kunci. Oleh itu, pelbagai kes penggunaan memerlukan kami menggunakan nama fail fail yang dimuat naik, tanpa sambungan.

Di sini kita akan mempelajari pelbagai cara untuk mengalih keluar sambungan fail daripada rentetan menggunakan JavaScript.

Gunakan kaedah array.split(), array.pop() dan array.join()

Setiap nama fail termasuk sambungan fail selepas titik terakhir dalam nama fail. Jadi, kita boleh memisahkan nama fail dengan menggunakan "." Selepas itu kita boleh menggunakan kaedah array.pop() untuk mengalih keluar elemen terakhir dan menggabungkan elemen tatasusunan sekali lagi untuk mendapatkan hanya nama fail.

Tatabahasa

Pengguna boleh menggunakan kaedah array.split(), array.pop() dan array.join() mengikut sintaks berikut.

let split = fileName.split('.');
split.pop();
let finalName = split.join(".");

Salin selepas log masuk

Algoritma

Langkah 1 – Dapatkan nama fail fail yang dimuat naik.

Langkah 2 – Pisahkan nama fail dengan menggunakan titik (.) sebagai pemisah.

Langkah 3 – Gunakan kaedah pop() untuk mengalih keluar sambungan daripada tatasusunan.

Langkah 4 – Gunakan kaedah join() untuk menyertai tatasusunan berpecah tanpa sambungan fail.

Langkah 5 – Pembolehubah Nama Akhir mengandungi nama fail dengan sambungan dipangkas.

Contoh 1

Dalam contoh di bawah, kami telah mencipta input pengguna yang membolehkan pengguna memuat naik fail dalam sebarang format. Setiap kali pengguna memuat naik sebarang fail, ia mendapat nama fail menggunakan atribut nama dan memangkas sambungan fail dengan melaksanakan algoritma di atas.

Dalam output, pengguna boleh melihat nama fail dengan atau tanpa sambungan.

<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>

Salin selepas log masuk

Gunakan ungkapan biasa

Kami boleh menggunakan corak carian ungkapan biasa untuk mencari sambungan fail dalam rentetan nama fail. Selepas itu, kita boleh menggunakan kaedah string.replace() untuk menggantikan sambungan fail dengan rentetan kosong.

Tatabahasa

Pengguna boleh mengikut sintaks di bawah untuk mengalih keluar sambungan fail daripada rentetan menggunakan ungkapan biasa dan kaedah penggantian.

let regex = new RegExp(/\.[^/.]+$/)
let fileName = original.replace(regex, "");

Salin selepas log masuk

Kami telah menggunakan pembina RegExp() dalam sintaks di atas untuk mencipta ungkapan biasa.

Ekspresi biasa dijelaskan

. – Mewakili rentetan yang bermula dengan aksara “.

[^/.]+ - Menunjukkan bahawa rentetan mengandungi sekurang-kurangnya satu aksara selain daripada "."

$ - mewakili penghujung rentetan.

Seluruh regex mencari corak yang mengandungi titik pada permulaan, dan kemudian mencari aksara selain daripada aksara titik sebelum penghujung rentetan.

Contoh 2

Contoh di bawah mengambil nama fail sebagai rentetan dengan sambungan ".html" dalam pembolehubah asal. Apabila pengguna menekan butang, kami memanggil fungsi removeExtension().

Dalam fungsi removeExtension(), kami mencipta ungkapan biasa seperti yang dinyatakan di atas dan menyimpannya dalam pembolehubah regex. Selepas itu, kami menggunakan kaedah Ganti() untuk menggantikan corak yang sama (cth. ungkapan biasa) dengan rentetan kosong untuk mengalih keluar sambungan fail daripada rentetan nama fail.

<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>

Salin selepas log masuk

Gunakan kaedah substring() dan lastIndexOf()

Kami boleh menggunakan kaedah lastIndexOf() untuk mencari indeks terakhir aksara "." dalam nama fail kerana kami perlu mengalih keluar keseluruhan rentetan selepas titik terakhir yang mewakili sambungan fail.

Kaedah

substring() membolehkan pengguna mendapatkan subrentetan menggunakan indeks mula dan akhir. Kita boleh mendapatkan subrentetan daripada indeks ke-0 hingga indeks aksara ‘.’ terakhir.

Tatabahasa

Pengguna boleh mengalih keluar sambungan fail daripada rentetan nama fail menggunakan kaedah subrentetan dan lastIndexOf() seperti dalam sintaks berikut.

let nameLength = file.length;
let dotLastIndex = file.lastIndexOf('.');
let finalName = file.substring(0, dotLastIndex);

Salin selepas log masuk

Dalam sintaks di atas, kami mula-mula mendapatkan panjang nama fail menggunakan sifat panjang. Selepas itu, kita mencari indeks terakhir titik dan kemudian menggunakan kaedah subrentetan() untuk mendapatkan subrentetan sebelum titik terakhir.

Contoh 3

Dalam contoh di bawah, apabila pengguna memuat naik mana-mana fail, input akan mencetuskan acara onchange dan memanggil fungsi javascript removeExtension(). Dalam fungsi tersebut, kami menggunakan kaedah lastIndexOf() dan kaedah substring() untuk mengalih keluar sambungan fail daripada nama fail fail yang dimuat naik.

<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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar sambungan fail daripada rentetan menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!