BAB 26 — Regular Expression (RegExp): Manipulasi dan Validasi Teks di JavaScript

BAB 26 — Regular Expression (RegExp): Manipulasi dan Validasi Teks di JavaScript

Regular Expression adalah tool powerful untuk mencari, memvalidasi, dan memanipulasi string. Menguasai RegExp sangat penting untuk form validation, parsing data, dan text processing.

1. Membuat Pattern

Ada dua cara membuat RegExp di JavaScript:

// 1. Literal
const pattern1 = /hello/;

// 2. Constructor
const pattern2 = new RegExp("hello");
  • /pattern/flags → literal syntax lebih singkat.
  • new RegExp() → berguna saat pattern bersifat dinamis.

Contoh:

const namePattern = /^[A-Z][a-z]+$/;
console.log(namePattern.test("Alice")); // true
console.log(namePattern.test("alice")); // false

2. Flag RegExp

FlagFungsi
gglobal → cari semua match
icase-insensitive
mmulti-line
sdotall → . mencocokkan newline
uunicode
ysticky → cocok mulai posisi lastIndex

Contoh:

const text = "Hello hello HELLO";
console.log(text.match(/hello/gi)); // ["Hello","hello","HELLO"]

3. test() & exec()

3.1 test()

  • Mengembalikan true/false jika string cocok dengan pattern.
const pattern = /abc/;
console.log(pattern.test("abcdef")); // true
console.log(pattern.test("xyz"));    // false

3.2 exec()

  • Mengembalikan array hasil match atau null.
const pattern = /(\d+)-(\w+)/;
const result = pattern.exec("123-abc");
console.log(result[0]); // "123-abc" → full match
console.log(result[1]); // "123"     → group 1
console.log(result[2]); // "abc"     → group 2
  • Gunakan loop untuk global match (g flag).
const pattern = /\d+/g;
const str = "1 2 3 4";
let match;
while((match = pattern.exec(str)) !== null){
    console.log(match[0]);
}
// Output: 1 2 3 4

4. match() & replace()

4.1 match()

const text = "JavaScript 2025";
console.log(text.match(/\d+/));  // ["2025"]
console.log(text.match(/\d+/g)); // ["2025"]

4.2 replace()

const text = "foo bar foo";
const newText = text.replace(/foo/g, "baz");
console.log(newText); // "baz bar baz"

Tips:

  • Gunakan g untuk mengganti semua match, jika tidak → hanya match pertama.

5. Validasi Email, Username, Angka

5.1 Email

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i;
console.log(emailPattern.test("user@example.com")); // true
console.log(emailPattern.test("user@.com"));        // false

5.2 Username (alphanumeric, 3–16 karakter)

const usernamePattern = /^[a-zA-Z0-9]{3,16}$/;
console.log(usernamePattern.test("Alice123")); // true
console.log(usernamePattern.test("Al"));       // false

5.3 Angka (integer positif)

const numberPattern = /^\d+$/;
console.log(numberPattern.test("12345")); // true
console.log(numberPattern.test("12a45")); // false

6. Praktik Terbaik RegExp

  1. Gunakan literal syntax jika pattern statis → lebih cepat.
  2. Gunakan constructor jika pattern dinamis.
  3. Tambahkan flags sesuai kebutuhan → i, g, m umum dipakai.
  4. Hindari regex yang terlalu kompleks → sulit dibaca → pertimbangkan kombinasi string methods.
  5. Simpan regex sebagai konstanta jika digunakan berulang → meningkatkan maintainability.

💡 Insight: RegExp adalah alat yang sangat kuat, tapi juga mudah salah digunakan. Memahami pattern, flags, dan method akan meningkatkan kemampuan manipulasi teks, validasi form, dan parsing data di JavaScript.

Related Posts