Regex: Dasar
Regular expression untuk validasi dan pencarian teks tingkat lanjut: sintaks pola, simbol penting (\d, \w, quantifier), pola siap pakai untuk email dan nomor HP, plus kapan harus berhenti memakai regex.
Kenapa Butuh Regex?
Method string seperti includes hanya bisa mencari teks persis. Bagaimana cara memastikan input "kelihatan seperti email", atau "diawali 08 diikuti 9-11 digit"? Menulisnya dengan if dan loop akan panjang dan rapuh. Regular Expression (regex) adalah bahasa pola mini untuk menjawab pertanyaan "apakah teks ini BENTUKNYA benar?" dalam satu baris.
Regex ditulis di antara dua slash: const pola = /belajar/;. Dua method yang paling sering dipakai adalah pola.test(teks) (me-return true/false) dan teks.match(pola) (me-return hasil yang cocok).
const pola = /belajar/;
console.log(pola.test("Saya belajar JS")); // true
console.log(pola.test("Saya tidur")); // false
console.log("nomor 123 dan 456".match(/\d+/g)); // ["123", "456"]Simbol-Simbol Penting
Regex terlihat menakutkan karena simbolnya padat, tapi hanya segelintir yang dipakai sehari-hari:
| Simbol | Arti | Contoh cocok |
|---|---|---|
\d | digit (0-9) | "5" |
\w | huruf, angka, underscore | "a", "7", "_" |
\s | spasi, tab, enter | " " |
. | karakter apa pun | "x" |
+ | 1 kali atau lebih | "aaa" untuk /a+/ |
* | 0 kali atau lebih | "" untuk /a*/ |
? | opsional (0 atau 1) | "warn" untuk /warna?/ |
{n,m} | diulang n sampai m kali | "1234" untuk /\d{3,5}/ |
^ $ | awal / akhir string | dipakai berpasangan untuk validasi penuh |
[abc] | salah satu dari a, b, atau c | "b" untuk /[abc]/ |
[a-z] | rentang karakter | "m" untuk /[a-z]/ |
Contoh sederhana merangkai simbol:
/\d{3}/.test("abc123"); // true, ada 3 digit berurutan
/^08/.test("08123"); // true, diawali 08
/^08$/.test("08123"); // false, ^$ menuntut SELURUH string cocok^ dan $ adalah pasangan wajib untuk validasi: tanpa mereka, /08/ akan lolos untuk "x08x" yang jelas bukan nomor HP.
Pola Siap Pakai: Email dan Nomor HP
Contoh realistis pertama, validasi email sederhana:
const email = /^[\w.-]+@[\w.-]+\.\w+$/;
console.log(email.test("[email protected]")); // true
console.log(email.test("budi@mail")); // false, tidak ada domain
console.log(email.test("budi mail.com")); // false, ada spasiCara membacanya: satu atau lebih karakter kata/titik/strip, lalu @, lalu nama domain, lalu titik, lalu ekstensi. Contoh realistis kedua, nomor HP Indonesia:
const noHp = /^08\d{9,11}$/;
console.log(noHp.test("081234567890")); // true, 08 + 10 digit
console.log(noHp.test("08123")); // false, terlalu pendek
console.log(noHp.test("6281234567890")); // false, harus diawali 08Dan contoh ketiga, mengekstrak semua angka dari teks bebas:
const teks = "Harga 15000, diskon 2000, total 13000";
const angka = teks.match(/\d+/g).map(Number);
console.log(angka); // [15000, 2000, 13000]Flag g (global) membuat match mengembalikan SEMUA kecocokan, bukan hanya yang pertama.
Jebakan Umum
- Lupa
^$sehingga "validasi" lolos untuk teks yang hanya MENGANDUNG pola, bukan SELURUHNYA cocok. - Regex untuk email "sempurna" itu mustahil dibaca manusia; untuk produksi, validasi format sederhana + kirim email verifikasi sungguhan.
- Karakter spesial seperti
.,+,(harus di-escape (`\.`) kalau maksudmu karakter harfiahnya. Titik tanpa escape berarti "karakter apa pun". - Regex dengan flag
gdipakai berulang pada.test()bisa memberi hasil selang-seling true/false karenalastIndexyang tersimpan. Untuk validasi, hindari flagg.
Ringkasan
Regex adalah bahasa pola untuk validasi bentuk teks: tulis di antara /.../, uji dengan .test(), ambil hasil dengan .match(). Kuasai \d, \w, quantifier (+, *, {n,m}), dan jangkar ^$ untuk validasi penuh. Selalu uji polamu di regex101.com sebelum dipakai, dan tahu kapan harus berhenti: validasi super kompleks lebih baik memakai library atau verifikasi sungguhan.
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Validasi Username
Buat regex: username 3-16 karakter, hanya huruf kecil, angka, underscore, diawali huruf. Uji dengan "budi_123" (valid) dan "1budi" (tidak). Aturan username seperti ini dipakai hampir semua aplikasi saat registrasi untuk mencegah karakter aneh yang bisa merusak URL profil atau query database.
<!doctype html> <html> <head> <meta charset="utf-8" /> </head> <body> <h1>Halo JS</h1> <p>Buka console preview untuk melihat output.</p> <script src="index.js"></script> </body> </html>