Fungsi Slugify JavaScript: Implementasi dan Kode Efisien

Definisi dan Fungsi Slugify

Slugify adalah proses mengubah string teks menjadi format yang aman untuk URL (URL-friendly). Hasilnya biasanya berupa huruf kecil, tanpa spasi (diganti tanda hubung), dan menghapus karakter khusus atau simbol yang tidak valid dalam alamat web. Fungsi ini krusial untuk SEO dan keterbacaan struktur tautan pada aplikasi web.

Implementasi Kode JavaScript

Berikut adalah fungsi slugify yang paling efisien menggunakan Regular Expression (Regex) untuk menangani berbagai karakter non-alfanumerik.

function slugify(text) {
  return text
    .toString()
    .toLowerCase()
    .trim()
    .replace(/\s+/g, '-')     // Ganti spasi dengan -
    .replace(/[^\w\-]+/g, '') // Hapus karakter non-word
    .replace(/\-\-+/g, '-');  // Ganti multiple - dengan single -
}

// Contoh penggunaan:
console.log(slugify('Fungsi Slugify JavaScript!')); 
// Output: fungsi-slugify-javascript

Tabel Analisis Transformasi Karakter

InputProsesOutput
SpasiRegex /\s+/g-
Huruf Kapital.toLowerCase()huruf kecil
Simbol (!@#)Regex /[^\w\-]+/gdihapus
Multiple DashRegex /\-\-+/gsatu dash

Langkah Teknis Implementasi

  1. Normalisasi: Gunakan .toString() untuk memastikan input adalah string.
  2. Case Sensitivity: Selalu gunakan .toLowerCase() agar URL konsisten.
  3. Pembersihan Karakter: Gunakan Regex untuk membuang karakter yang tidak diizinkan dalam URL standar RFC 3986.
  4. Trimming: Gunakan .trim() untuk menghapus spasi di awal dan akhir string agar tidak menghasilkan dash di ujung URL.

Troubleshooting Lapangan

  • Karakter Non-Latin: Jika aplikasi Anda mendukung multibahasa (seperti aksara Arab atau Kanji), pertimbangkan menggunakan pustaka pihak ketiga seperti slugify dari npm karena Regex standar JavaScript tidak menangani transliterasi karakter non-ASCII secara otomatis.
  • Kinerja: Fungsi di atas memiliki kompleksitas O(n), sangat ringan untuk penggunaan di sisi klien (browser) maupun sisi server (Node.js).