Regex, singkatan dari regular expression, adalah pola yang menggambarkan ciri-ciri teks yang kamu cari. Ctrl+F cuma bisa mencari satu tulisan yang persis sama. Regex bisa mencari semua teks yang cocok dengan ciri-cirinya, misalnya "semua nomor HP", walau tiap nomornya beda. Bayangin Bu Ratna, admin PO kue Lebaran, minta adiknya mencatat semua nomor HP di grup WhatsApp. Dia gak menyebut nomornya satu per satu, karena dia sendiri belum tahu. Dia menyebut cirinya: "yang diawali 08 atau +62, lalu angka-angka". Ciri-ciri itulah regex.
Sepanjang track ini kita pakai satu teks yang sama, chat PO Dapur Ratna: grup WhatsApp tempat Bu Ratna menerima pesanan kue. Isinya berantakan seperti chat sungguhan: nama, nomor HP dengan tiga gaya tulis, harga Rp85.000 dan 90rb, tanggal, dan kode order. Tiap pelajaran mengambil lebih banyak isi dari chat ini.
[12/03/26 08.15] Ratna (Admin): Open PO kue Lebaran! *Nastar* Rp85.000/toples, *Kastengel* 90rb, *Putri Salju* 75k. Kode PO-0412
[12/03/26 08.17] Dina: kak, nastarnya 2 toples ya. WA aku 0812-3456-7890
[12/03/26 08.20] Bayu: Saya kastengel 1, putri salju 1. Total brp? hp +62 857-1122-3344
[12/03/26 08.22] Ratna (Admin): @Bayu total Rp165.000 ya kak, transfer ke BCA 1234567890 a.n. Ratna
[12/03/26 08.25] Sari: NASTAR 3 toples = 255rb kan? no saya 081298765432, kirim tgl 25/03
[12/03/26 08.31] Dina: sudah transfer Rp170.000, bukti ke [email protected]. Kode PO-0413
🧪 Tebakan cepat: di chat itu ada tulisan
Nastar,nastarnya, danNASTAR.chat.match(/nastar/g)menemukan berapa: 1, 2, atau 3? Tebak dulu, jawabannya ada di bagian "Flag g dan i".
Regex pertamamu di JavaScript
Di JavaScript, chat di atas kita simpan di variabel chat, lalu kita tanya dua hal: ada atau gak, dan apa yang cocok.
const chat = `[12/03/26 08.15] Ratna (Admin): ...`; // 6 baris chat di atas
console.log(/PO-0413/.test(chat)); // true
console.log(/PO-0414/.test(chat)); // false
console.log(chat.match(/nastar/)); // ['nastar'], index: 157
/PO-0413/adalah regex literal: polanya ditulis di antara dua garis miring. Garis miringnya cuma pembungkus, bukan bagian dari pola.- Huruf dan angka biasa di pola cocok dengan dirinya sendiri, huruf demi huruf.
PO-0413cocok dengan tulisanPO-0413. pola.test(teks)menjawabtruekalau polanya ketemu di mana pun di teks,falsekalau gak ada. Cocok buat pertanyaan "ada atau gak?".teks.match(pola)mengembalikan yang cocok dalam array. Tanpa flag, dia berhenti di yang pertama dan ikut memberiindex, posisinya di teks (dihitung dari 0).
Yang pertama ketemu adalah nastar di index 157, potongan dari kata nastarnya. Regex mencari potongan teks, bukan kata utuh. Cara membatasi ke kata utuh ada di pelajaran Anchors.
Cara mesin regex mencari
Mesin regex mulai di karakter pertama teks dan mencocokkan pola huruf demi huruf. Begitu ada yang beda, dia geser satu karakter ke kanan dan mencoba lagi. Posisi pertama yang cocok penuh, itu hasilnya. Contoh kecil: pola as di teks Nastar.
| Mulai di index | Yang dibandingkan | Hasil |
|---|---|---|
| 0 | N dengan a |
beda, geser |
| 1 | a dengan a, lalu s dengan s |
cocok: as di index 1 |
Flag g dan i
Flag adalah huruf setelah garis miring penutup. Dia mengubah cara mencari, bukan polanya.
console.log(chat.match(/nastar/g)); // ['nastar']
console.log(chat.match(/nastar/gi)); // ['Nastar', 'nastar', 'NASTAR']
console.log(chat.match(/nastar/i)); // ['Nastar'], index: 54
g(global): cari semua yang cocok, bukan cuma yang pertama. Dengang,match()mengembalikan array berisi semua yang cocok, tanpaindex.i(ignore case): huruf besar dan kecil dianggap sama.- Flag boleh digabung:
/nastar/gi.
Regex membedakan huruf besar dan kecil. Jadi /nastar/g cuma menemukan 1, yaitu yang di nastarnya. Nastar dan NASTAR baru ikut setelah ditambah i. Itu jawaban tebakannya.
Kapan pakai regex, kapan gak
Regex paling sering dipakai buat validasi format: memeriksa isian email, nomor HP, atau kode pos sesuai pola yang diharapkan. Selain itu:
- Mengambil data dari teks: semua harga, semua kode order, semua nomor HP di chat.
- Find & replace: menyensor nomor HP, mengubah format tanggal.
- Mencari di editor: kotak Find di VS Code punya tombol
.*untuk mencari pakai regex.
Kalau yang dicari tulisan tetap, regex gak perlu. chat.includes("PO-0413") juga menjawab true, dan lebih gampang dibaca. Buat membaca HTML atau JSON, pakai alat khususnya (JSON.parse, DOMParser), karena isinya bertingkat dan regex gampang salah di situ.
⚠️ Jebakan yang sering ketemu
- Lupa huruf besar-kecil.
/po-0413/.test(chat)hasilnyafalse, karena di chat tulisannyaPO-0413. Tambah flagikalau besar-kecilnya gak penting. match()tanpa hasil mengembalikannull, bukan array kosong.chat.match(/martabak/g).lengthlangsung error:TypeError: Cannot read properties of null (reading 'length'). Tulis(chat.match(/martabak/g) || []).length, hasilnya0.- Lupa
g. Tanpag,match()berhenti di yang pertama. Kalau butuh semua, tambahkang.
TL;DR: Regex (regular expression) adalah pola yang menggambarkan ciri-ciri teks. Di JavaScript ditulis /pola/flag. Huruf dan angka biasa cocok dengan dirinya sendiri, dan yang dicari potongan teks, bukan kata. pola.test(teks) menjawab true atau false; teks.match(pola) mengembalikan yang cocok, atau null kalau gak ada. Flag g mencari semua, flag i mengabaikan huruf besar-kecil. Pemakaian paling umum: validasi format seperti email dan nomor HP. Buat tulisan tetap, includes() sudah cukup.
