💡 ULASAN & REFERENSI • DIPERBARUI: 27 October 2026 • REDAKSI AZWINN

Regex Slug Generator: Pola, Kode, dan Cara Pakai

Regex Slug Generator adalah proses pembersihan string teks menggunakan Regular Expression (Regex) agar aman digunakan sebagai URL atau slug. Proses ini menghilangkan karakter khusus, spasi, huruf besar, dan tanda baca yang tidak valid dalam standar Uniform Resource Identifier (URI), lalu menggantinya dengan tanda hubung (-).

Dalam pengembangan web modern, slug URL sangat penting untuk optimasi mesin pencari (SEO) dan keterbacaan tautan. Alih-alih mengandalkan pustaka eksternal yang berat, pengembang sering kali menggunakan fungsi kustom berbasis Regex untuk mengonversi judul artikel atau produk secara instan di sisi klien maupun server.

Dasar Pola Regex untuk Slug

Untuk membangun generator slug yang andal, Anda memerlukan beberapa pola Regex standar guna menangani pembersihan karakter. Tabel di bawah ini merinci fungsi utama dari setiap pola Regex yang digunakan dalam pembuatan slug.

Fungsi Pembersihan Pola Regex Penjelasan Teknis
Ubah ke Huruf Kecil .toLowerCase() Fungsi string standar untuk menyeragamkan seluruh karakter menjadi huruf kecil.
Hapus Aksen / Diakritik \.normalize('NFD').replace(/[\u0300-\u036f]/g, '') Memecah karakter beraksen (seperti é, à) menjadi huruf dasarnya lalu menghapus tanda diakritiknya.
Hapus Karakter Non-Alfanumerik /[^a-z0-9 -]/g Menghapus semua karakter selain huruf a-z, angka 0-9, spasi, dan tanda hubung.
Kompres Spasi & Tanda Hubung /\s+/g dan /-+/g Mengubah spasi berlebih menjadi satu tanda hubung, serta meratakan tanda hubung beruntun menjadi satu.
Pangkas Ujung Slug /^-+|-+$/g Menghapus tanda hubung yang mungkin tertinggal di awal atau akhir string hasil olahan.

Implementasi Kode Regex Slug Generator

Berikut adalah contoh implementasi fungsi pembuat slug menggunakan JavaScript murni (Vanilla JS) yang dapat langsung diterapkan pada aplikasi web Anda.

function generateSlug(text) {
  return text
    .toString()
    .toLowerCase()
    .normalize('NFD')                   // Pisahkan karakter beraksen
    .replace(/[\u0300-\u036f]/g, '')    // Hapus tanda diakritik
    .trim()                             // Hapus spasi di awal dan akhir
    .replace(/[^a-z0-9 -]/g, '')        // Hapus karakter khusus
    .replace(/\s+/g, '-')               // Ganti spasi dengan tanda hubung
    .replace(/-+/g, '-');               // Gabungkan tanda hubung ganda
}

// Contoh Penggunaan:
const inputString = "Belajar Regex untuk Slug URL yang SEO-Friendly! 2026";
console.log(generateSlug(inputString)); 
// Output: belajar-regex-untuk-slug-url-yang-seo-friendly-2026

Langkah-Langkah Implementasi Teknis

Untuk menerapkan fungsi ini secara optimal di dalam proyek perangkat lunak Anda, ikuti tahapan berikut:

  1. Siapkan fungsi helper di modul JavaScript terpisah atau langsung di dalam komponen input formulir.
  2. Tambahkan event listener (seperti oninput atau keyup) pada kolom input judul artikel agar slug terisi otomatis secara real-time.
  3. Lakukan sanitasi tambahan di sisi server (backend) menggunakan bahasa pilihan Anda (Python, PHP, atau Node.js) untuk mencegah injeksi karakter berbahaya sebelum disimpan ke dalam database.

Tips Troubleshooting Lapangan

Beberapa kendala umum sering terjadi saat mengonversi string khusus menjadi slug:

    Karakter Unicode / Non-ASCII: Jika judul mengandung karakter bahasa daerah atau non-latin (seperti aksara Jawa, Kanji, atau Arab), metode pembersihan standar akan menghapusnya seluruhnya. Gunakan pustaka tambahan jika aplikasi Anda memerlukan slug multibahasa.

    Slug Kosong: Jika pengguna hanya memasukkan simbol atau emoji, fungsi Regex akan menghasilkan string kosong (""). Pastikan Anda memberikan validasi atau nilai fallback di aplikasi Anda.

🔍 Orang Lain Juga Mencari Ini