Regular Expression (Regex) JavaScript Lengkap

Apakah kamu pernah ingin mencari pola tertentu di dalam teks, memvalidasi input form, atau memproses data string dengan cepat di JavaScript? Jika iya, Regular Expression atau yang sering disingkat Regex adalah alat yang tepat untuk kamu pelajari. Regex memungkinkan kamu menemukan, memeriksa, dan memanipulasi teks dengan cara yang jauh lebih efisien dibandingkan menggunakan logika string biasa.

Dalam artikel ini, kita akan membahas Regex JavaScript secara lengkap, mulai dari dasar-dasar, metode populer seperti test, match, replace, hingga penggunaan regex untuk validasi email, nomor telepon, password, dan berbagai kasus praktis lainnya. Panduan ini dibuat langkah demi langkah, cocok untuk pemula maupun pengembang web yang ingin memperdalam kemampuan pattern matching dan optimasi regex di proyek nyata.

Pengenalan Regular Expression

Pengenalan Regular Expression (Regex) adalah langkah pertama untuk memahami bagaimana pola teks bekerja dalam JavaScript. Regex merupakan sebuah pola karakter yang digunakan untuk mencari, mencocokkan, dan memanipulasi string dengan cara yang efisien. Dibandingkan metode pencarian teks biasa, regex menawarkan fleksibilitas dan kekuatan yang jauh lebih besar—mulai dari pencarian sederhana hingga validasi input kompleks seperti email, nomor telepon, dan password.

Dalam JavaScript, regular expression sudah terintegrasi secara native, sehingga penggunaannya sangat mudah dan tidak memerlukan library tambahan. Materi pengenalan ini akan membahas apa itu regex, bagaimana sejarahnya digunakan dalam berbagai bahasa pemrograman, keunggulannya di JavaScript, hingga contoh studi kasus pencarian teks. Dengan memahami dasar pengenalan regex, kamu akan mampu menggunakan pattern matching dengan lebih percaya diri dan efisien saat membangun aplikasi web modern.

1. Apa itu Regular Expression

Regular Expression atau Regex adalah sebuah pola (pattern) yang digunakan untuk mencari, mencocokkan, dan memanipulasi teks. Dalam JavaScript, regex sangat berguna untuk memvalidasi input, menemukan karakter tertentu, memfilter data, hingga melakukan transformasi teks dengan cara yang jauh lebih efisien dibandingkan metode string biasa. Regex bekerja dengan cara mencocokkan pola tertentu pada string, seperti huruf, angka, simbol, atau kombinasi kompleks.

Dalam pengembangan web modern, regex menjadi salah satu alat penting karena mampu menghemat banyak waktu dan baris kode. Dengan satu pola regex, kamu dapat menyelesaikan tugas yang biasanya membutuhkan kondisi if bertingkat atau loop yang panjang.

2. Sejarah dan penggunaan regex di berbagai bahasa pemrograman

Regular Expression pertama kali diperkenalkan pada tahun 1950-an oleh ilmuwan bernama Stephen Cole Kleene, yang mengembangkan teori matematika tentang pola simbolik. Konsep ini kemudian diadopsi ke dunia pemrograman dan digunakan dalam berbagai utilitas sistem seperti grep, sed, dan awk.

Saat ini, regex digunakan secara luas di berbagai bahasa pemrograman populer seperti:

JavaScript
Python
PHP
Java
C#
Ruby
Perl (bahasa yang dikenal sangat kuat dalam regex)

Meskipun sintaks regex bersifat universal, beberapa bahasa memiliki fitur tambahan atau variasi kecil. Namun secara keseluruhan, dasar penggunaannya tetap sama: membantu developer mengolah teks secara cepat dan efisien.

3. Keunggulan menggunakan regex di JavaScript

JavaScript memiliki dukungan bawaan (native) untuk Regular Expression melalui RegExp object, sehingga penggunaannya sangat fleksibel dan mudah diintegrasikan ke berbagai fungsi string. Berikut beberapa keunggulan utama menggunakan regex di JavaScript:

Native support
Tidak perlu menginstal library tambahan, cukup gunakan /pattern/ atau new RegExp().
Integrasi kuat dengan metode string
Regex dapat digunakan langsung di method seperti match(), replace(), search(), dan split().
Performa tinggi
Regex memungkinkan operasi pencarian dan validasi dilakukan lebih cepat dibandingkan logika manual.
Lebih ringkas dan efisien
Alih-alih menulis banyak kondisi, cukup gunakan satu pola regex untuk hasil yang sama.
Cocok untuk validasi input modern
Mulai dari email, password, nomor telepon, hingga format tanggal.

Dengan berbagai keunggulan ini, regex menjadi alat yang sangat penting bagi developer JavaScript—baik backend, frontend, maupun full stack.

4. Studi kasus sederhana: pencarian teks

Salah satu penggunaan paling dasar dari regex adalah mencari teks. Misalnya, kamu ingin mencari apakah sebuah kata muncul dalam sebuah kalimat. Dengan regex, ini bisa dilakukan dalam satu baris:

const text = "Belajar regex di JavaScript memang menyenangkan!";
const pattern = /regex/;

console.log(pattern.test(text)); // trueCode language: JavaScript (javascript)

Contoh lain: mencari semua huruf vokal dalam sebuah string.

const kalimat = "Regular Expression sangat berguna!";
const vokal = kalimat.match(/[aeiou]/gi);

console.log(vokal);
// Output: ["e", "u", "a", "E", "e", "i", "o", "a", "a", "e", "u", "a"]Code language: JavaScript (javascript)

Penggunaan sederhana ini menggambarkan kekuatan regex sebagai alat pencarian dan analisis teks dengan cara yang cepat dan efisien.

Sintaks Dasar Regex di JavaScript

Sintaks adalah fondasi utama dalam memanfaatkan regular expression JavaScript. Untuk dapat membuat pola yang akurat dan efisien, kamu perlu memahami cara membuat regex, karakter dasar yang digunakan, hingga bagaimana flags bekerja dalam proses pencarian. Bagian ini akan membantu kamu memahami konsepnya secara bertahap.

1. Membuat Regex: Literal vs Constructor

Dalam JavaScript, regex dapat dibuat dengan dua cara:

1. Regex Literal

Cara paling umum dan simpel.

const regex = /hello/;Code language: JavaScript (javascript)

Keunggulannya:

Lebih mudah dibaca
Lebih cepat dituliskan
Ideal untuk pola statis

2. Regex Constructor

Digunakan saat pola regex bersifat dinamis (dibuat dari variable).

const pattern = "hello";
const regex = new RegExp(pattern, "g");Code language: JavaScript (javascript)

Keunggulannya:

Mudah untuk membuat pola runtime
Dapat menggabungkan nilai variable ke dalam regex

Namun syntax-nya sedikit lebih panjang, dan kamu perlu melakukan escape ekstra saat menggunakan karakter khusus.

2. Karakter Biasa dan Meta Character

Regex terdiri dari dua jenis karakter:

1. Karakter Biasa

Digunakan untuk mencocokkan karakter apa adanya. Contoh:

a → mencari huruf “a”
cat → mencari kata “cat”

2. Meta Character (Karakter Khusus)

Digunakan untuk memberi arti tertentu pada pola regex.

Contoh meta character penting:

Meta	Arti
`.`	Mencocokkan sembarang 1 karakter
`\d`	Digit 0–9
`\w`	Alphanumeric + underscore
`\s`	Whitespace
`^`	Awal string
`$`	Akhir string
`*`	0 atau lebih pengulangan
`+`	1 atau lebih pengulangan
`?`	Opsional (0 atau 1 kali)
`[]`	Character set
`()`	Grouping / capturing

Meta character inilah yang membuat regex JavaScript begitu fleksibel dan kuat dalam pattern matching.

3 Flags Regex (g, i, m)

Flags adalah penanda tambahan yang mengubah perilaku regex.

1. g — global

Mencari semua hasil, bukan hanya satu.

"hello hello".match(/hello/g);Code language: JavaScript (javascript)

2. i — case insensitive

Mengabaikan huruf kapital atau kecil.

/hello/i.test("HELLO"); // trueCode language: JavaScript (javascript)

3. m — multiline

Memperlakukan ^ dan $ sebagai awal/akhir setiap baris, bukan keseluruhan string.

/^hi/m.test("hello\nhi"); // trueCode language: JavaScript (javascript)

Flags dapat digabungkan:

/hello/gi;

4. Escape Character dan Special Character

Karena regex memiliki banyak karakter khusus, kamu perlu melakukan escape menggunakan \ ketika ingin mencocokkannya secara literal.

Contoh karakter yang harus di-escape:

. * + ? ^ $ { } ( ) | [ ] \

Contoh penggunaan:

const regex = /\./; // mencari titik "."Code language: JavaScript (javascript)

Jika menggunakan constructor:

const regex = new RegExp("\\.");Code language: JavaScript (javascript)

Karena constructor juga menggunakan escape string JavaScript, kamu harus menggandakan backslash.

Metode Regex di JavaScript

Setelah memahami sintaks dasar regex di JavaScript, langkah berikutnya adalah mempelajari berbagai metode bawaan JavaScript yang sering digunakan bersama regular expression. Metode-metode ini adalah alat utama yang akan kamu pakai untuk melakukan pencocokan pola, mencari teks, memecah string, hingga memodifikasi teks.

Di bagian ini, kita akan membahas semua metode penting yang wajib dikuasai:

test()
match()
replace()
search()
split()

Setiap metode memiliki fungsi berbeda dan sangat berguna dalam berbagai situasi pemrograman.

1. test() → Cek Pattern

Metode test() digunakan untuk mengetahui apakah sebuah string cocok dengan pola regex. Metode ini akan mengembalikan:

true jika ada kecocokan
false jika tidak ada kecocokan

Contoh:

const regex = /hello/;
console.log(regex.test("hello world")); // trueCode language: JavaScript (javascript)

Cocok digunakan untuk validasi sederhana, seperti:

cek apakah input mengandung angka
cek apakah password mengandung huruf besar
cek apakah username valid

Contoh validasi angka:

const numberCheck = /\d/;
console.log(numberCheck.test("aris123")); // trueCode language: JavaScript (javascript)

2. match() → Mengambil Hasil Cocok

Metode match() digunakan untuk mengambil semua hasil yang cocok dengan pola tertentu. Jika regex memiliki flag g, hasilnya berupa array semua kecocokan. Tanpa g, hasilnya akan mengembalikan informasi detail termasuk capturing group.

Contoh tanpa flag g:

const text = "Hello JavaScript";
const result = text.match(/Java/);
console.log(result);Code language: JavaScript (javascript)

Outputnya:

hasil kecocokan
index ditemukan
input asli

Contoh dengan flag g:

const text = "apple, banana, apple, mango";
const result = text.match(/apple/g);
console.log(result); // ["apple", "apple"]Code language: JavaScript (javascript)

Metode ini sangat membantu saat mengambil data seperti:

list kata tertentu
semua angka dalam string
format tertentu (email, URL)

3. replace() → Mengganti Teks

Metode replace() digunakan untuk mengganti bagian string yang cocok dengan regex. Fungsi ini sangat sering dipakai dalam pengolahan teks.

Contoh mengganti satu kata:

const text = "Halo dunia!";
console.log(text.replace(/dunia/, "JavaScript"));Code language: JavaScript (javascript)

Contoh mengganti banyak kata (pakai flag g):

const text = "apple banana apple mango";
const result = text.replace(/apple/g, "orange");
console.log(result);Code language: JavaScript (javascript)

Contoh mengganti pola spesifik:

const text = "ID: 123-456";
console.log(text.replace(/\d/g, "*")); // "ID: ***-***"Code language: JavaScript (javascript)

replace() juga mendukung fungsi callback untuk penggantian yang lebih dinamis.

4. search() → Menemukan Index Pattern

Metode search() digunakan untuk menemukan index pertama dari pattern yang cocok dengan regex. Berbeda dengan match(), metode ini hanya mengembalikan:

posisi index hasil kecocokan pertama, atau
-1 jika tidak ditemukan

Contoh:

const text = "JavaScript sangat keren";
console.log(text.search(/keren/)); // 17Code language: JavaScript (javascript)

Metode ini sangat cocok jika kamu hanya ingin tahu posisi pertama tanpa butuh data detail lain.

5. split() → Memecah String Berdasarkan Pattern

Metode split() digunakan untuk memecah string menjadi array berdasarkan pola regex. Ini lebih fleksibel daripada split biasa yang hanya bisa menggunakan string.

Contoh memecah berdasarkan spasi:

const text = "belajar regex javascript lengkap";
const result = text.split(/\s+/);
console.log(result);Code language: JavaScript (javascript)

Contoh memecah berdasarkan koma dengan optional spasi:

const list = "apel, jeruk,  mangga, pisang";
const result = list.split(/,\s*/);
console.log(result);Code language: JavaScript (javascript)

Contoh mengambil angka dari teks:

const data = "ID-123-456-789";
const numbers = data.split(/\D+/);
console.log(numbers); // ["", "123", "456", "789"]Code language: JavaScript (javascript)

Pattern Matching Lanjutan

Setelah memahami dasar-dasar regex, kini saatnya masuk ke bagian yang lebih seru yaitu pattern matching lanjutan. Di sini kamu akan belajar berbagai teknik yang membuat Regular Expression JavaScript menjadi sangat fleksibel dan kuat. Mulai dari character class, quantifiers, anchors, hingga grouping dan alternation. Semua konsep ini akan memperluas kemampuanmu dalam membuat pola yang lebih kompleks.

Character Class `[abc]`, `[^abc]`

Apa itu Character Class?

Character class adalah fitur regex yang memungkinkan kamu mencocokkan satu karakter dari beberapa kemungkinan karakter.

Contoh [abc]:

Pola ini berarti mencocokkan salah satu karakter: a, b, atau c.

const regex = /[abc]/;
console.log(regex.test("aris")); // true (ada huruf a)Code language: JavaScript (javascript)

[a-z]

Rentang karakter dari a sampai z.

const regex = /[a-z]/;Code language: JavaScript (javascript)

Negated Class [^abc]

^ di dalam bracket berarti bukan salah satu dari a, b, atau c.

const regex = /[^abc]/;
console.log(regex.test("ddd")); // true (karena bukan a b c)Code language: JavaScript (javascript)

Quantifiers `*`, `+`, `?`, `{n}`, `{n,m}`

Quantifier digunakan untuk menentukan jumlah kemunculan dari sebuah karakter atau grup.

* → 0 atau lebih

const regex = /a*/;
console.log("aaa".match(regex)); // ["aaa"]Code language: JavaScript (javascript)

+ → 1 atau lebih

const regex = /a+/;
console.log("baaa".match(regex)); // ["aaa"]Code language: JavaScript (javascript)

? → 0 atau 1 (opsional)

const regex = /colou?r/;
console.log("color".match(regex)); // ["color"]
console.log("colour".match(regex)); // ["colour"]Code language: JavaScript (javascript)

{n} → tepat n kali

const regex = /\d{3}/;
console.log("Kode: 123".match(regex)); // ["123"]Code language: JavaScript (javascript)

{n,} → minimal n kali

const regex = /\d{2,}/;
console.log("12345".match(regex)); // ["12345"]Code language: JavaScript (javascript)

{n,m} → antara n hingga m kali

const regex = /\d{2,4}/;
console.log("12345".match(regex)); // ["1234"]Code language: JavaScript (javascript)

Anchors `^`, `$`, `\b`, `\B`

Anchors digunakan untuk mencocokkan posisi dalam string, bukan karakter.

^ → awal string

const regex = /^Hello/;
console.log(regex.test("Hello world")); // trueCode language: JavaScript (javascript)

$ → akhir string

const regex = /world$/;
console.log(regex.test("Hello world")); // trueCode language: JavaScript (javascript)

\b → word boundary (batas kata)

Digunakan saat ingin mencocokkan pola pada batas kata.

const regex = /\bcat\b/;
console.log(regex.test("black cat white dog")); // trueCode language: JavaScript (javascript)

\B → kebalikan dari \b

const regex = /cat\B/;
console.log(regex.test("category")); // trueCode language: JavaScript (javascript)

Grouping `()` dan Backreference `\1`

Grouping digunakan untuk:

Mengelompokkan pola
Menangkap bagian tertentu (capturing group)
Membuat backreference (mengacu ke hasil sebelumnya)

Contoh grouping sederhana

const regex = /(ha)+/;
console.log("hahaha".match(regex)); // ["hahaha"]Code language: JavaScript (javascript)

Backreference \1

\1 mengacu pada hasil group pertama.

const regex = /(\w+)\s\1/;
console.log(regex.test("hello hello")); // trueCode language: JavaScript (javascript)

Cocok untuk mendeteksi teks duplikat.

Alternation `|`

Fitur ini mirip dengan operator OR, memungkinkan kamu mencocokkan beberapa pola.

Contoh:

const regex = /apple|banana|mango/;
console.log(regex.test("saya makan banana")); // trueCode language: JavaScript (javascript)

Contoh dengan grouping:

const regex = /gr(a|e)y/;
console.log(regex.test("gray")); // true
console.log(regex.test("grey")); // trueCode language: JavaScript (javascript)

Regex untuk Validasi Input

Regex menjadi sangat berguna dalam proses validasi input, terutama pada aplikasi web yang membutuhkan pengecekan cepat sebelum data dikirim ke server. Validasi input dengan regex di JavaScript memberikan fleksibilitas tinggi, efisiensi, dan dapat mencegah berbagai error maupun data tidak valid sejak dini.

Pada bagian ini, kita akan membahas cara membuat pola regex untuk memvalidasi email, nomor telepon, password, URL, hingga IP address, lengkap dengan contoh implementasinya dalam form validation JavaScript.

Validasi Email

Validasi email adalah salah satu penggunaan regex yang paling umum. Tujuan utama regex email adalah memastikan input memiliki struktur:

username @ domain . extension

Regex yang sering digunakan untuk email:

const emailRegex = /^[\w.-]+@[\w.-]+\.\w{2,}$/;Code language: JavaScript (javascript)

Contoh penggunaan:

const email = "user@example.com";
console.log(emailRegex.test(email)); // trueCode language: JavaScript (javascript)

Penjelasan pola:

^[\w.-]+ → username (boleh huruf, angka, titik, dash)
@ → wajib ada
[\w.-]+ → domain
\.\w{2,}$ → extension minimal 2 karakter

Validasi Nomor Telepon

Format nomor telepon berbeda-beda, tetapi kita bisa membuat regex dasar yang fleksibel.

Contoh regex nomor telepon umum:

const phoneRegex = /^\+?\d{9,15}$/;Code language: JavaScript (javascript)

Maksud:

+? → opsional
\d{9,15} → panjang 9–15 digit

Contoh penggunaan:

console.log(phoneRegex.test("+628123456789")); // true
console.log(phoneRegex.test("08123456789")); // trueCode language: JavaScript (javascript)

Contoh format lebih kompleks (dengan spasi dan dash):

const phoneRegex2 = /^[+\d]?(?:[\d-.\s]{7,15})$/;Code language: JavaScript (javascript)

Validasi Password Kuat

Password yang kuat biasanya wajib memenuhi syarat berikut:

Minimal 8 karakter
Ada huruf besar
Ada huruf kecil
Ada angka
Ada simbol

Regex password kuat:

const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;Code language: JavaScript (javascript)

Contoh:

console.log(strongPasswordRegex.test("ArisDev@2025")); // trueCode language: JavaScript (javascript)

Penjelasan:

(?=.*[a-z]) → ada huruf kecil
(?=.*[A-Z]) → ada huruf besar
(?=.*\d) → ada angka
(?=.*[\W_]) → ada simbol
.{8,} → minimal 8 karakter

Validasi URL dan IP Address

Validasi URL

Regex sederhana untuk URL:

const urlRegex = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/.*)?$/;Code language: JavaScript (javascript)

Contoh:

console.log(urlRegex.test("https://arisdev.com")); // trueCode language: JavaScript (javascript)

Penjelasan:

optional http:// atau https://
domain + extension
optional path

Validasi IPv4

Format IPv4: 0-255.0-255.0-255.0-255

Regex:

const ipRegex = /^(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d{2}|[1-9]?\d)){3}$/;Code language: JavaScript (javascript)

Contoh:

console.log(ipRegex.test("192.168.1.1")); // trueCode language: JavaScript (javascript)

Penjelasan:

25[0-5] → 0-255
2[0-4]\d → 0-249
1\d{2} → 0-199
[1-9]?\d → 0-99

Validasi IPv6

Format IPv6: 0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff:0-ffff

Regex:

const ipRegex = /^(?:[A-F0-9]{1,4}:){7}[A-F0-9]{1,4}$/i;Code language: JavaScript (javascript)

Contoh: console.log(ipRegex.test(“2001:0db8:85a3:0000:0000:8a2e:0370:7334”)); // true

Penjelasan:

?:[A-F0-9]{1,4} → 0-ffff
{7} → 7 kali
[A-F0-9]{1,4} → 0-ffff
i → case-insensitive

Contoh Penggunaan Regex di Form Validation JavaScript

Berikut contoh simulasi form sederhana:

HTML (gambaran saja)

<input id="email" type="text">
<input id="password" type="password">
<button onclick="validate()">Submit</button>
<p id="message"></p>Code language: HTML, XML (xml)

JavaScript dengan regex:

function validate() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    const emailRegex = /^[\w.-]+@[\w.-]+\.\w{2,}$/;
    const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/;

    if (!emailRegex.test(email)) {
        return showMessage("Email tidak valid!");
    }

    if (!passwordRegex.test(password)) {
        return showMessage("Password terlalu lemah!");
    }

    showMessage("Semua input valid!");
}

function showMessage(msg) {
    document.getElementById("message").innerText = msg;
}Code language: JavaScript (javascript)

Fitur di atas sangat sering ditemukan pada aplikasi web modern dan bisa dikembangkan menjadi validasi form yang lebih kompleks.

Regex Flags dan Opsi Tambahan

Regex di JavaScript tidak hanya tentang pola, karakter khusus, dan quantifier. Ada juga flags, yaitu opsi tambahan yang dapat mengubah perilaku pencarian pola. Flags ini sangat penting karena memengaruhi cara regex melakukan pencarian dalam string, menangani huruf besar-kecil, baris baru, karakter Unicode, dan lain-lain.

Dalam praktiknya, flags membantu membuat regex menjadi lebih fleksibel dan dapat digunakan pada berbagai kasus kompleks.

Global Flag: `g`

Flag g digunakan untuk mencari semua kecocokan (global match), bukan hanya kecocokan pertama.

Contoh tanpa g:

const text = "apple banana apple mango";
console.log(text.match(/apple/)); 
// output: ["apple"]Code language: JavaScript (javascript)

Hanya menemukan kecocokan pertama.

Contoh dengan g:

console.log(text.match(/apple/g));
// output: ["apple", "apple"]Code language: JavaScript (javascript)

Kapan menggunakan g?

Mencari semua angka di teks
Menghitung jumlah kemunculan kata
Parsing data dengan pola berulang

Case-Insensitive Flag: `i`

Flag i membuat pencarian tidak membedakan huruf besar dan kecil.

Contoh:

const regex = /hello/i;

console.log(regex.test("Hello")); // true
console.log(regex.test("HELLO")); // true
console.log(regex.test("hElLo")); // trueCode language: JavaScript (javascript)

Kapan digunakan?

Validasi email (huruf besar kecil tidak penting)
Mencari kata tertentu dalam paragraf
Mencocokkan username atau nama pengguna

Multiline Flag: `m`

Secara default, ^ dan $ hanya berfungsi di awal dan akhir seluruh string.

Dengan flag m, keduanya berlaku di setiap baris (multi-line mode).

Tanpa m:

const text = "Hello\nWorld";
console.log(text.match(/^World/)); 
// null (karena bukan awal string)Code language: JavaScript (javascript)

Dengan m:

console.log(text.match(/^World/m));
// ["World"]Code language: JavaScript (javascript)

Kapan dipakai?

Membaca file log
Memproses teks yang memiliki banyak baris
Mencocokkan pola pada setiap baris input

Sticky Flag: `y`

Flag y mencocokkan regex mulai dari posisi terakhir (lastIndex), bukan mencari ke seluruh string. Ini lebih ketat dibanding flag g.

Contoh:

const regex = /a/y;
const text = "aaba";

regex.lastIndex = 1;
console.log(regex.test(text)); // false (karena text[1] = a? Tidak—text[1] = a, tapi posisi ketat)Code language: JavaScript (javascript)

Flag y digunakan untuk parsing ketat, misalnya saat membaca token satu per satu.

Unicode Flag: `u`

Regex tanpa flag u kadang gagal saat mencocokkan karakter Unicode seperti emoji, huruf Mandarin, atau bahasa lain.

Misal:

console.log(/💖/.test("💖")); // false di beberapa kasus tanpa uCode language: JavaScript (javascript)

Dengan u:

console.log(/💖/u.test("💖")); // trueCode language: JavaScript (javascript)

Flag u sangat penting dalam aplikasi internasional.

Kombinasi Flags untuk Kasus Kompleks

Flags dapat dikombinasikan sesuai kebutuhan.

Contoh kombinasi umum:

gi — global + case-insensitive

const regex = /apple/gi;
const text = "Apple apple aPPle";

console.log(text.match(regex));
// ["Apple", "apple", "aPPle"]Code language: JavaScript (javascript)

gm — global + multiline

const text = `
    user1
    user2
    user3
    `;

console.log(text.match(/^user\d$/gm));
// ["user1", "user2", "user3"]Code language: JavaScript (javascript)

gim — lengkap

Global, case-insensitive, multiline.

const regex = /^hello/ gim;Code language: JavaScript (javascript)

Contoh kasus nyata, misalnya kamu ingin mencari seluruh kata “error” (tanpa peduli huruf besar kecil) pada setiap baris log:

const logRegex = /^error/ gim;Code language: JavaScript (javascript)

Regex tersebut akan:

Mencari di seluruh file .log (flag g)
Tidak peduli ERROR, Error, error (flag i)
Berlaku untuk setiap baris log (flag m)

Ringkasan Flags Regex

Flag	Deskripsi	Kapan Dipakai
`g`	global match	mencari semua kecocokan
`i`	case-insensitive	pencarian tanpa peduli kapital
`m`	multiline	^ dan $ berlaku di setiap baris
`y`	sticky match	parsing ketat berbasis posisi
`u`	unicode support	emoji, huruf non-latin

Escape Character dan Special Character

Pada bagian ini kita akan membahas escape character dan special character yang menjadi fondasi penting dalam regular expression JavaScript. Banyak pemula yang kesulitan memahami bagian ini karena karakter-karakter tersebut memiliki fungsi khusus dan tidak bisa digunakan sembarangan. Dengan memahami daftar simbol penting ini, kamu akan semakin mahir membuat pattern regex yang kuat, fleksibel, dan tepat sasaran.

Escape Sequence Penting: `\d`, `\w`, `\s`, `\D`, `\W`, `\S`

Escape sequence digunakan untuk mewakili kelompok karakter tertentu tanpa menuliskannya satu per satu. Inilah yang membuat regex sangat efisien.

1. `\d` → digit (0–9)

Mencocokkan angka dari 0 hingga 9.

let regex = /\d+/;
console.log("Hai123".match(regex)); // ["123"]Code language: JavaScript (javascript)

2. `\D` → selain digit

Kebalikan dari \d.

let regex = /\D+/;
console.log("JS123".match(regex)); // ["JS"]Code language: JavaScript (javascript)

3. `\w` → word character (A–Z, a–z, 0–9, _)

Umumnya dipakai untuk validasi username, identifier, dan teks umum.

let regex = /\w+/;
console.log("user_01".match(regex)); // ["user_01"]Code language: JavaScript (javascript)

4. `\W` → selain word character

Kebalikan dari \w.

let regex = /\W+/;
console.log("Hello@2025".match(regex)); // ["@"]Code language: JavaScript (javascript)

5. `\s` → whitespace (spasi, tab, newline, dll.)

let regex = /\s/;
console.log("Hello World".match(regex)); // [" "]Code language: JavaScript (javascript)

6. `\S` → selain whitespace

let regex = /\S+/;
console.log("Hi There".match(regex)); // ["Hi"]Code language: JavaScript (javascript)

Escape sequence ini sangat sering digunakan dalam validasi input seperti email, password, nama, dan format teks lainnya.

Literal Escape: `\\`, `\.`

Beberapa karakter memiliki fungsi khusus dalam regex, sehingga jika kamu ingin menggunakannya sebagai karakter biasa (literal), kamu harus men-escape karakter tersebut.

1. `\\` → mencocokkan backslash literal

Regex untuk mencari backslash harus ditulis \

let regex = /\\/;
console.log("\\folder".match(regex)); // ["\"]Code language: JavaScript (javascript)

2. `\.` → mencocokkan titik literal “.”

Karakter “.” dalam regex berarti “mencocokkan karakter apa saja”, jadi perlu di-escape jika ingin mencari titik sebenarnya.

let regex = /\./;
console.log("v1.2.3".match(regex)); // ["."]Code language: JavaScript (javascript)

Karakter Khusus Regex: `. ^ $ * + ? ( ) [ ] { } |`

Ini adalah karakter-karakter “sakral” dalam regex. Masing-masing memiliki fungsi unik:

Karakter	Fungsi
`.`	mencocokkan semua karakter kecuali newline
`^`	anchor: awal string
`$`	anchor: akhir string
`*`	quantifier: 0 atau lebih
`+`	quantifier: 1 atau lebih
`?`	quantifier opsional / lazy quantifier
`()`	grouping & capturing
`[]`	character class
`{}`	quantifier jumlah
`	`	OR / alternation

Contoh penggunaan beragam karakter khusus

1. Kleene star `*` dan plus `+`

console.log("aaa".match(/a*/)); // ["aaa"]
console.log("aaa".match(/a+/)); // ["aaa"]Code language: JavaScript (javascript)

2. Grouping `()`

let regex = /(ha)+/;
console.log("hahaha".match(regex)); // ["hahaha"]Code language: JavaScript (javascript)

3. Alternation `|`

let regex = /kucing|anjing/;
console.log("Saya punya kucing".match(regex)); // ["kucing"]Code language: JavaScript (javascript)

4. Character class `[]`

let regex = /[aeiou]/;
console.log("halo".match(regex)); // ["a"]Code language: JavaScript (javascript)

5. Anchors `^` dan `$`

let regex = /^Hello/;
console.log("Hello World".match(regex)); // ["Hello"]Code language: JavaScript (javascript)

Mengapa harus tahu karakter khusus?

Karena salah satu kesalahan terbesar pemula dalam regex adalah:

Menggunakan karakter khusus tanpa tahu fungsinya.
Mencari karakter literal tanpa di-escape.
Dengan memahami daftar ini, kamu bisa membuat regex jauh lebih akurat dan efisien.

Kesimpulan

Setelah mempelajari semua bagian dari tutorial lengkap ini, kamu kini telah memahami fondasi kuat tentang bagaimana regular expression JavaScript bekerja, bagaimana cara menulis pattern yang benar, hingga bagaimana melakukan pattern matching untuk kebutuhan validasi maupun manipulasi string.

Kita telah membahas cara membuat regex menggunakan literal dan constructor, memahami karakter dasar hingga meta character, menggunakan escape sequence, serta mengeksplorasi flags seperti g, i, dan m yang sangat penting untuk mengontrol perilaku pencarian. Kamu juga telah belajar berbagai metode bawaan JavaScript seperti test(), match(), replace(), search(), dan split() yang memungkinkan regex digunakan secara praktis dalam skenario nyata.

Tidak berhenti sampai di situ, kamu juga sudah mempelajari pattern matching lanjutan seperti character class, quantifier, anchors, grouping, backreference, hingga alternation |. Untuk penerapan nyata, kamu telah mempelajari cara membuat regex untuk validasi — seperti email, nomor telepon, password, URL, hingga IP address. Semua ini merupakan fondasi penting yang membuatmu siap membangun berbagai fitur berbasis teks yang lebih fleksibel dan canggih.

Dengan memahami seluruh materi dari artikel ini, kamu sudah memiliki dasar kuat untuk menggunakan regex dalam berbagai kebutuhan pengembangan web modern. Teruslah berlatih, eksplorasi pola-pola baru, dan kombinasikan regex dengan JavaScript untuk membangun aplikasi yang lebih cepat, aman, dan elegan.

Regular Expression (Regex) JavaScript Lengkap

Daftar isi

Pengenalan Regular Expression

1. Apa itu Regular Expression

2. Sejarah dan penggunaan regex di berbagai bahasa pemrograman

3. Keunggulan menggunakan regex di JavaScript

4. Studi kasus sederhana: pencarian teks

Sintaks Dasar Regex di JavaScript

1. Membuat Regex: Literal vs Constructor

1. Regex Literal

2. Regex Constructor

2. Karakter Biasa dan Meta Character

1. Karakter Biasa

2. Meta Character (Karakter Khusus)

3 Flags Regex (g, i, m)

1. g — global

2. i — case insensitive

3. m — multiline

4. Escape Character dan Special Character

Metode Regex di JavaScript

1. test() → Cek Pattern

2. match() → Mengambil Hasil Cocok

3. replace() → Mengganti Teks

4. search() → Menemukan Index Pattern

5. split() → Memecah String Berdasarkan Pattern

Pattern Matching Lanjutan

Character Class [abc], [^abc]

Quantifiers *, +, ?, {n}, {n,m}

Anchors ^, $, \b, \B

Grouping () dan Backreference \1

Alternation |

Regex untuk Validasi Input

Validasi Email

Validasi Nomor Telepon

Validasi Password Kuat

Validasi URL dan IP Address

Validasi IPv4

Validasi IPv6

Contoh Penggunaan Regex di Form Validation JavaScript

Regex Flags dan Opsi Tambahan

Global Flag: g

Case-Insensitive Flag: i

Multiline Flag: m

Sticky Flag: y

Unicode Flag: u

Kombinasi Flags untuk Kasus Kompleks

Ringkasan Flags Regex

Escape Character dan Special Character

Escape Sequence Penting: \d, \w, \s, \D, \W, \S

1. \d → digit (0–9)

2. \D → selain digit

3. \w → word character (A–Z, a–z, 0–9, _)

4. \W → selain word character

5. \s → whitespace (spasi, tab, newline, dll.)

6. \S → selain whitespace

Literal Escape: \\, \.

1. \\ → mencocokkan backslash literal

2. \. → mencocokkan titik literal “.”

Karakter Khusus Regex: . ^ $ * + ? ( ) [ ] { } |

1. Kleene star * dan plus +

2. Grouping ()

3. Alternation |

4. Character class []

5. Anchors ^ dan $

Mengapa harus tahu karakter khusus?

Kesimpulan

1 JavaScript Dasar

2 JavaScript Menengah

3 JavaScript Lanjutan

4 JavaScript Mahir

5 JavaScript Ahli

Related article!

Comments

Leave comment

Character Class `[abc]`, `[^abc]`

Quantifiers `*`, `+`, `?`, `{n}`, `{n,m}`

Anchors `^`, `$`, `\b`, `\B`

Grouping `()` dan Backreference `\1`

Alternation `|`

Global Flag: `g`

Case-Insensitive Flag: `i`

Multiline Flag: `m`

Sticky Flag: `y`

Unicode Flag: `u`

Escape Sequence Penting: `\d`, `\w`, `\s`, `\D`, `\W`, `\S`

1. `\d` → digit (0–9)

2. `\D` → selain digit

3. `\w` → word character (A–Z, a–z, 0–9, _)

4. `\W` → selain word character

5. `\s` → whitespace (spasi, tab, newline, dll.)

6. `\S` → selain whitespace

Literal Escape: `\\`, `\.`

1. `\\` → mencocokkan backslash literal

2. `\.` → mencocokkan titik literal “.”

Karakter Khusus Regex: `. ^ $ * + ? ( ) [ ] { } |`

1. Kleene star `*` dan plus `+`

2. Grouping `()`

3. Alternation `|`

4. Character class `[]`

5. Anchors `^` dan `$`