Mantra Penyihir Teks: Regular Expressions (RegEx)
Pernahkah kamu mengisi Form Pendaftaran lalu muncul tulisan merah peringatan: *"Password harus mengandung
minimal 1 Huruf Besar, 1 Angka, dan 1 Simbol Khusus"*?
Bagaimana komputer bisa mengecek teks serumit itu secepat kilat tanpa harus menulis kode
if-else yang panjangnya ratusan baris? Jawabannya adalah Regular Expressions
(RegEx). Ini adalah bahasa *mantra sihir* level dewa yang dirancang khusus untuk mencari,
mencocokkan, dan merombak pola teks. Walau bentuk mantranya terlihat seperti susunan alien
/^[a-z0-9_-]{3,16}$/, kita akan membedahnya pelan-pelan hari ini!
📜 1. Buku Mantra Dasar RegEx
Dalam JavaScript, RegEx selalu dibungkus di antara dua garis miring /.../. Mari pelajari beberapa
simbol magis (Metacharacters) yang paling sering dipakai di dunia industri.
Jangkar: ^ menandakan awal kalimat,
dan $ menandakan akhir kalimat. Hati-hati jangan sampai bocor polanya!
Karakter: \d berarti *Digit* (Angka
0-9). \w berarti *Word* (Huruf, Angka, Underscore).
Filter Custom: Hanya menerima Huruf Kecil saja (a-z), atau Huruf Besar saja (A-Z).
Pengulang: + (minimal 1 kali
muncul), * (boleh 0 atau banyak kali), ? (opsional, 0 atau 1 kali).
Batas Jumlah: \d{4,8} artinya harus
berupa Angka yang panjang digitnya antara 4 sampai 8 digit persis.
Flags/Bendera: i (Insensitive:
Abaikan huruf besar/kecil), g (Global: Cari semua pola sampai habis, jgn berhenti di 1
aja).
🪄 2. Tiga Jurus Utama Eksekusi RegEx
Setelah meracik mantranya, kita butuh tongkat sihir JavaScript untuk menembakkannya ke sebuah kalimat. Ada 3 jurus (Method) yang paling laku di pasaran web developer:
1. Validasi (.test)
// Apakah ini format PIN 6 digit murni?
const polaPin = /^\d{6}$/;
// Return Boolean (True/False)
console.log( polaPin.test("123456") );
// TRUE ✅
console.log( polaPin.test("12A456") );
// FALSE ❌ (Ada huruf A)
2. Pengekstrak (.match)
// Tolong ambilkan semua angka Harga
const kalimat = "Buku 15rb, Pena 5rb.";
const polaAngka = /\d+/g; // Flag 'g'!
const hasil = kalimat.match(polaAngka);
console.log(hasil);
// Output Array: ["15", "5"]
3. Sensor Teks (.replace)
// Menyensor kata kasar (Abaikan huruf besar/kecil 'i')
const obrolan = "Dasar Babi kamu!";
const sensor = /babi/ig;
const bersih = obrolan.replace(sensor, "****");
console.log(bersih);
// Hasil: "Dasar **** kamu!"
🛡️ 3. Studi Kasus Mahakarya: Validasi Password Militer
Mari kita implementasikan Mantra RegEx kita ke dalam level *Production* yang sesungguhnya. Kita akan memecah 3 Mantra RegEx berbeda untuk menilai Kekuatan Password Pengguna (Real-time). Periksa masing-masing tab HTML, CSS, dan murni JS di bawah untuk melihat arsitektur pemisahannya.
🎯 Demo Live:
Sentuh Kolom Input Berikut
🔒 Buat Password Baru
Sistem akan memindai mantramu secara Real-Time.
- ❌
Minimal 1 Huruf Besar
- ❌
Minimal 1 Angka
- ❌
Minimal 8 Karakter utuh
🔒 Buat Password Baru
Sistem akan memindai mantramu secara Real-Time.
- ❌ Minimal 1 Huruf Besar
- ❌ Minimal 1 Angka
- ❌ Minimal 8 Karakter utuh
Cobalah ketik passwod "Rahasia123" di atas. Kamu akan melihat setiap kali kamu memencet tombol keyboard, JS menangkap teks mentahnya, memasukkannya ke dalam 3 Mesin RegEx, dan memperbarui Checkmark secara cemerlang!