Tukar Tajuk String kepada Slug dalam Javascript

Untuk menukar tajuk kepada format slug menggunakan JavaScript, anda perlu mengubah tajuk menjadi rentetan mesra URL. Ini biasanya melibatkan huruf kecil rentetan, menggantikan ruang dan aksara bukan abjad angka lain dengan sempang dan mengalih keluar sebarang sempang di hadapan atau di belakang. Berikut ialah panduan langkah demi langkah tentang cara mencapai matlamat ini:

Tukar rentetan kepada huruf kecil: Ini memastikan ketekalan dalam format slug.

1. Gantikan ruang dan aksara bukan abjad angka dengan sempang: 2. Ini menjadikan rentetan mesra URL.
2. Alih keluar tanda sempang di hadapan dan di belakang: Bersihkan sebarang sempang tambahan yang ditambahkan pada permulaan atau penghujung rentetan.

Berikut ialah contoh fungsi JavaScript untuk melakukan ini:

function stringToSlug(title) {
  return title
    .toLowerCase()                           // Convert to lowercase
    .replace(/[^a-z0-9 -]/g, '')             // Remove invalid characters
    .replace(/\s+/g, '-')                    // Replace spaces with hyphens
    .replace(/-+/g, '-')                     // Replace multiple hyphens with a single hyphen
    .replace(/^-+|-+$/g, '');                // Remove leading and trailing hyphens
}

// Example usage:
const title = "This is a Sample Title!";
const slug = stringToSlug(title);
console.log(slug);  // Output: "this-is-a-sample-title"

Penjelasan:

1. toLowerCase(): Menukar keseluruhan rentetan kepada huruf kecil.
2. ganti(/[^a-z0-9 -]/g, ''): Mengalih keluar sebarang aksara yang bukan huruf kecil, nombor, ruang atau sempang.
3. ganti(/s+/g, '-'): Menggantikan satu atau lebih ruang dengan 4. tanda sempang tunggal.
4. ganti(/-+/g, '-'): Menggantikan berbilang sempang berturut-turut dengan satu sempang.
5. ganti(/^-+|-+$/g, ''): Mengalih keluar tanda sempang di hadapan dan di belakang.

Fungsi ini akan membantu anda menukar sebarang rentetan tajuk menjadi slug mesra URL yang bersih.

Atas ialah kandungan terperinci Tukar Tajuk String kepada Slug dalam Javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!