Regular Expression (regex) adalah alat pemrograman yang berguna. Regular Expression adalah kunci pemrosesan teks yang efisien. Mengetahui cara mengatasi masalah menggunakan regex berguna bagi Anda sebagai pengembang dan meningkatkan produktivitas Anda.

Dalam artikel ini, Anda akan mempelajari dasar-dasar regular expression, notasi pola regular expression, cara menafsirkan pola regex sederhana, dan cara menulis pola regex Anda sendiri. Mari kita mulai!

Apa itu Regular Expression?

Regular Expression adalah pola yang memungkinkan Anda mendeskripsikan, mencocokkan, atau mengurai teks. Dengan regular expression, Anda dapat melakukan hal-hal seperti menemukan dan mengganti teks, memverifikasi bahwa data masukan mengikuti format yang diperlukan, dan hal serupa lainnya.

Berikut skenarionya: Anda ingin memverifikasi bahwa nomor telepon yang dimasukkan oleh pengguna pada formulir cocok dengan format, misalnya, ###-###-#### (di mana # mewakili nomor). Salah satu cara untuk mengatasinya adalah:

function isPattern(userInput) {
  if (typeof userInput !== 'string' || userInput.length !== 12) {
    return false;
  }
  for (let i = 0; i < userInput.length; i++) {
    let c = userInput[i];
    switch (i) {
      case 0:
      case 1:
      case 2:
      case 4:
      case 5:
      case 6:
      case 8:
      case 9:
      case 10:
      case 11:
        if (c < 0 || c > 9) return false;
        break;
      case 3:
      case 7:
        if (c !== '-') return false;
        break;
    }
  }
  return true;
}

Alternatifnya, kita dapat menggunakan regular expression di sini seperti ini:

function isPattern(userInput) {
  return /^\d{3}-\d{3}-\d{4}$/.test(userInput);
}

Perhatikan bagaimana kita memfaktorkan ulang kode menggunakan regex. Luar biasa bukan? Itulah kekuatan regular expression.


Cara Membuat Regular expression

Di JavaScript, Anda dapat membuat regular expression dengan salah satu dari dua cara berikut:

  • Metode #1: menggunakan regular expression literal. Ini terdiri dari pola yang diapit garis miring ke depan. Anda dapat menulis ini dengan atau tanpa bendera (kita akan segera melihat apa arti bendera). Sintaksnya adalah sebagai berikut:

    const regExpLiteral = /pattern/;          // Without flags

const regExpLiteralWithFlags = /pattern/; // With flags

    Garis miring ke depan /.../menunjukkan bahwa kita sedang membuat pola regular expression, sama seperti Anda menggunakan tanda kutip “ ”untuk membuat string.

  • Metode #2: menggunakan fungsi konstruktor RegExp. Sintaksnya adalah sebagai berikut:

    new RegExp(pattern [, flags])

    Di sini, polanya diapit tanda kutip, sama dengan parameter flag, yang bersifat opsional.

Jadi kapan Anda menggunakan masing-masing pola ini?

Anda harus menggunakan literal regex ketika Anda mengetahui pola regular expression pada saat menulis kode.

Di sisi lain, gunakan konstruktor Regex jika pola regex ingin dibuat secara dinamis. Selain itu, konstruktor regex memungkinkan Anda menulis pola menggunakan literal templat, tetapi hal ini tidak mungkin dilakukan dengan sintaks literal regex.


Apa itu Regular Expression Flags?

Flag atau pengubah adalah karakter yang mengaktifkan fitur pencarian lanjutan termasuk tidak peka huruf besar-kecil dan pencarian global. Anda dapat menggunakannya secara individu atau kolektif. Beberapa yang umum digunakan adalah:

  • g digunakan untuk pencarian global yang berarti pencarian tidak akan kembali setelah pertandingan pertama.

  • i digunakan untuk penelusuran yang tidak peka huruf besar-kecil yang berarti bahwa kecocokan dapat terjadi apa pun huruf besar/kecilnya.

  • m digunakan untuk pencarian multiline.

  • u digunakan untuk pencarian Unicode.

Mari kita lihat beberapa pola regular expression menggunakan kedua sintaksis.


Cara menggunakan regular expression literal:

// Syntax: /pattern/flags

const regExpStr = 'Hello world! hello there';

const regExpLiteral = /Hello/gi;

console.log(regExpStr.match(regExpLiteral));

// Output: ['Hello', 'hello']

Perhatikan bahwa jika kita tidak menandai polanya dengan i, hanya Hello yang akan dikembalikan.

Pola tersebut /Hello/ merupakan contoh pola sederhana. Pola sederhana terdiri dari karakter yang harus muncul secara harfiah dalam teks sasaran. Agar terjadi kecocokan, teks sasaran harus mengikuti urutan yang sama dengan polanya.

Misalnya, jika Anda menulis ulang teks pada contoh sebelumnya dan mencoba mencocokkannya:

const regExpLiteral = /Hello/gi;

const regExpStr = 'oHell world, ohell there!';

console.log(regExpStr.match(regExpLiteral));

// Output: null

Kita mendapatkan null karena karakter dalam string tidak muncul seperti yang ditentukan dalam pola. Jadi pola literal seperti /hello/, artinya h diikuti oleh e diikuti oleh l diikuti oleh l diikuti oleh o , persis seperti itu.


Cara menggunakan konstruktor regex:

// Syntax: RegExp(pattern [, flags])

const regExpConstructor = new RegExp('xyz', 'g'); // With flag -g

const str = 'xyz xyz';

console.log(str.match(regExpConstructor));

// Output: ['xyz', 'xyz']

Di sini, pola xyz diteruskan sebagai string yang sama dengan flag. Juga kedua kemunculannya xyz cocok karena kami meneruskan flag -g. Tanpa itu, hanya pertandingan pertama yang akan dikembalikan.

Kita juga dapat meneruskan pola yang dibuat secara dinamis sebagai literal templat menggunakan fungsi konstruktor. Misalnya:

const pattern = prompt('Enter a pattern');
// Suppose the user enters 'xyz'

const regExpConst = new RegExp(`${pattern}`, 'gi');

const str = 'xyz XYZ';

console.log(str.match(regExpConst)); // Output: ['xyz', 'XYZ']

Cara Menggunakan Karakter Khusus Regular Expression

Karakter khusus dalam regular expression adalah karakter dengan arti khusus. Dengan menggunakan karakter khusus, Anda dapat melakukan lebih dari sekadar menemukan pasangan langsung.

Misalnya, jika Anda ingin mencocokkan karakter dalam string yang mungkin muncul sekali atau beberapa kali atau tidak, Anda dapat melakukannya dengan karakter khusus. Karakter-karakter ini masuk ke dalam subgrup berbeda yang menjalankan fungsi serupa.

Mari kita lihat masing-masing subgrup dan karakter yang menyertainya.

Anchors dan Boundaries

Anchor adalah metakarakter yang cocok dengan awal dan akhir baris teks yang diperiksa. Anda menggunakannya untuk menegaskan di mana batas seharusnya berada.

Dua karakter yang digunakan adalah ^ dan $.

  • ^ cocok dengan awal baris dan mengaitkan literal di awal baris tersebut. Misalnya:

    const regexPattern1 = /^cat/;

console.log(regexPattern1.test('cat and mouse')); // Output: true

console.log(regexPattern1.test('The cat and mouse')); // Output: false because the line does not start with cat

// Without the ^ in the pattern, the output will return true
// because we did not assert a boundary.

const regexPattern2 = /cat/;

console.log(regexPattern2.test('The cat and mouse')); // Output: true

  • $ cocok dengan akhir baris dan mengaitkan literal di akhir baris itu. Misalnya:

    const regexPattern = /cat$/;

console.log(regexPattern.test('The mouse and the cat')); // Output: true

console.log(regexPattern.test('The cat and mouse')); // Output: false

    Perhatikan bahwa anchor karakter ^ dan $ hanya cocok dengan posisi karakter dalam pola dan bukan karakter sebenarnya.

Boundaries adalah metakarakter yang cocok dengan posisi awal dan akhir sebuah kata – rangkaian karakter alfanumerik. Anda dapat menganggapnya sebagai versi berbasis kata ^ dan $. Anda menggunakan metakarakter bdan Buntuk menegaskan batasan kata.

  • \b cocok dengan awal atau akhir kata. Kata tersebut dicocokkan sesuai dengan posisi metakarakternya. Berikut ini contohnya:

    // Syntax 1: /\b.../ where .... represents a word.

// Search for a word that begins with the pattern ward
const regexPattern1 = /\bward/gi;

const text1 = 'backward Wardrobe Ward';

console.log(text1.match(regexPattern1)); // Output: ['Ward', 'Ward']

// Syntax 2: /...\b/

// Search for a word that ends with the pattern ward
const regexPattern2 = /ward\b/gi;

const text2 = 'backward Wardrobe Ward';

console.log(text2.match(regexPattern2)); // Output: ['ward', 'Ward']

// Syntax 3: /\b....\b/

// Search for a stand-alone word that begins and end with the pattern ward
const regexPattern3 = /\bward\b/gi;

const text3 = 'backward Wardrobe Ward';

console.log(text3.match(regexPattern3)); // Output: ['Ward']

  • \B adalah kebalikan dari \b. Itu cocok dengan setiap posisi \b tidak.


Kode pendek untuk Metakarakter Lainnya:

Selain metakarakter yang telah kami lihat, berikut beberapa karakter meta yang paling umum digunakan:

  • \d – cocok dengan digit desimal apa pun dan merupakan singkatan dari [0-9].
  • \w – cocok dengan karakter alfanumerik apa pun yang dapat berupa huruf, angka, atau garis bawah. \wadalah singkatan dari [A-Za-z0-9_].
  • \s – cocok dengan karakter spasi apa pun.
  • \D – cocok dengan non-digit apa pun dan sama dengan [^0-9.]
  • \W – cocok dengan karakter non-kata (yaitu non-alfanumerik) apa pun dan merupakan singkatan dari [^A-Za-z0-9_].
  • \S – cocok dengan karakter non-spasi.
  • . – cocok dengan karakter apa pun.

Apa itu Kelas Karakter?

Kelas karakter digunakan untuk mencocokkan salah satu dari beberapa karakter pada posisi tertentu. Untuk menunjukkan kelas karakter, Anda menggunakan tanda kurung siku [] dan kemudian mencantumkan karakter yang ingin Anda cocokkan di dalam tanda kurung.

Mari kita lihat sebuah contoh:

// Find and match a word with two alternative spellings

const regexPattern = /ambi[ea]nce/;

console.log(regexPattern.test('ambiance')); // Output: true

console.log(regexPattern.test('ambiance')); // Output: true

// The regex pattern interprets as:  find a followed by m, then b,
// then i, then either e or a, then n, then c, and then e.

Apa itu Kelas Karakter yang Dinegasikan?

Jika Anda menambahkan simbol tanda sisipan di dalam kelas karakter seperti ini [^...], simbol tersebut akan cocok dengan karakter apa pun yang tidak tercantum di dalam tanda kurung siku. Misalnya:

const regexPattern = /[^bc]at/;

console.log(regexPattern.test('bat')); // Output: false

console.log(regexPattern.test('cat')); // Output: false

console.log(regexPattern.test('mat')); // Output: true

Apa itu Rentang?

Tanda hubung - menunjukkan rentang ketika digunakan di dalam kelas karakter. Misalkan Anda ingin mencocokkan sekumpulan angka, misalnya [0123456789], atau sekumpulan karakter, misalnya [abcdefg]. Anda dapat menuliskannya dalam rentang seperti ini, masing-masing [0-9] dan [ag].

Apa itu Pergantian?

Pergantian adalah cara lain untuk menentukan serangkaian opsi. Di sini, Anda menggunakan karakter pipa | untuk mencocokkan salah satu dari beberapa subekspresi. Salah satu subekspresi disebut alternatif.

Simbol pipa berarti 'atau', sehingga cocok dengan serangkaian opsi. Ini memungkinkan Anda menggabungkan subekspresi sebagai alternatif.

Misalnya, (x|y|z)a akan cocok dengan xa atau ya, atau za. Untuk membatasi jangkauan pergantian, Anda dapat menggunakan tanda kurung untuk mengelompokkan alternatif-alternatif tersebut.

Tanpa tanda kurung, x|y|za artinya xatau y atau za. Misalnya:

const regexPattern = /(Bob|George)\sClan/;

console.log(regexPattern.test('Bob Clan')); // Output: true

console.log(regexPattern.test('George Clan')); // Output: true

Apa itu Quantifier?

Quantifier menunjukkan berapa kali sebuah karakter, kelas karakter, atau grup harus muncul dalam teks target agar kecocokan terjadi. Berikut ini beberapa yang aneh:

  • + akan cocok dengan karakter apa pun yang ditambahkan jika karakter tersebut muncul setidaknya sekali. Misalnya:

    const regexPattern = /hel+o/;

console.log(regexPattern.test('helo'));          // Output:true

console.log(regexPattern.test('hellllllllllo')); // Output: true

console.log(regexPattern.test('heo'));           // Output: false

  • * mirip dengan karakter + tetapi dengan sedikit perbedaan. Saat Anda menambahkan * ke sebuah karakter, itu berarti Anda ingin mencocokkan sejumlah karakter tersebut, termasuk tidak ada karakter tersebut. Berikut ini contohnya:

    const regexPattern = /hel*o/;

console.log(regexPattern.test('helo'));    // Output: true

console.log(regexPattern.test('hellllo')); // Output: true

console.log(regexPattern.test('heo'));     // Output: true

// Here the * matches 0 or any number of 'l'

  • ? menyiratkan "opsional". Saat Anda menambahkannya ke karakter, itu berarti karakter tersebut mungkin muncul atau tidak. Misalnya:

    const regexPattern = /colou?r/;

console.log(regexPattern.test('color'));  // Output: true

console.log(regexPattern.test('colour')); // Output: true

// The ? after the character u makes u optional

  • {N}, ketika ditambahkan ke karakter atau kelas karakter, menentukan berapa banyak karakter yang kita inginkan. Misalnya /\d{3}/berarti mencocokkan tiga digit berturut-turut.
  • {N,M}disebut pembilang interval dan digunakan untuk menentukan kisaran kecocokan minimum dan maksimum yang mungkin. Misalnya /\d{3, 6}/berarti mencocokkan minimal 3 dan maksimal 6 digit berturut-turut.
  • {N, }menunjukkan rentang terbuka. Misalnya /\d{3, }/berarti cocok dengan 3 digit atau lebih yang berurutan.

Apa itu Keserakahan di Regex?

Semua bilangan secara default adalah serakah . Artinya mereka akan mencoba mencocokkan semua karakter yang mungkin.

Untuk menghapus status default ini dan menjadikannya tidak serakah, Anda menambahkan a ? ke operator seperti ini +?, *?, {N}?, {N,M}?.....dan seterusnya.

Apa itu Pengelompokan dan Referensi Balik?

Sebelumnya kita telah melihat bagaimana kita dapat membatasi ruang lingkup pergantian menggunakan tanda kurung.

Bagaimana jika Anda ingin menggunakan pembilang seperti + atau * pada lebih dari satu karakter sekaligus – misalnya kelas atau grup karakter? Anda dapat mengelompokkannya secara keseluruhan menggunakan tanda kurung sebelum menambahkan pembilang, seperti dalam contoh ini:

const regExp = /abc+(xyz+)+/i;

console.log(regExp.test('abcxyzzzzXYZ')); // Output: true

Berikut arti polanya: + pertama cocok dengan c dari abc, + kedua cocok dengan z dari xyz, dan + ketiga cocok dengan subekspresi xyz, yang akan cocok jika urutannya berulang.

Referensi balik memungkinkan Anda mencocokkan pola baru yang sama dengan pola yang sebelumnya cocok dalam Regular Expression. Anda juga menggunakan tanda kurung untuk referensi balik karena subekspresi tersebut dapat mengingat subekspresi yang sebelumnya cocok yang disertakannya (yaitu, grup yang ditangkap).

Namun, dimungkinkan untuk memiliki lebih dari satu grup yang diambil dalam Regular Expression. Jadi, untuk mereferensikan kembali grup mana pun yang diambil, Anda menggunakan nomor untuk mengidentifikasi tanda kurung.

Misalkan Anda memiliki 3 grup yang diambil dalam sebuah regex dan Anda ingin mereferensikan kembali salah satu grup tersebut. Anda menggunakan \1, \2, atau \3, untuk merujuk pada tanda kurung pertama, kedua, atau ketiga. Untuk memberi nomor pada tanda kurung, Anda mulai menghitung tanda kurung terbuka dari kiri.

Mari kita lihat beberapa contoh:

(x) cocok dengan x dan mengingat kecocokannya.

const regExp = /(abc)bar\1/i;

// abc is backreferenced and is anchored at the same position as \1
console.log(regExp.test('abcbarAbc')); // Output: true

console.log(regExp.test('abcbar')); // Output: false

(?:x) cocok dengan x tetapi tidak mengingat kecocokan tersebut. Selain itu, \n (di mana n adalah angka) tidak mengingat grup yang diambil sebelumnya, dan akan cocok secara literal. Menggunakan contoh:

const regExp = /(?:abc)bar\1/i;

console.log(regExp.test('abcbarabc')); // Output: false

console.log(regExp.test('abcbar\1')); // Output: true

Aturan Escape

Metakarakter harus di-escape dengan garis miring terbalik jika Anda ingin karakter tersebut muncul sebagai literal dalam Regular Expression Anda. Dengan meloloskan metakarakter dalam regex, metakarakter tersebut kehilangan makna khususnya.


Metode Regular Expression

Metode test

Kami telah menggunakan metode ini beberapa kali dalam artikel ini. Metode ini test()membandingkan teks target dengan pola regex dan mengembalikan nilai boolean yang sesuai. Jika ada yang cocok, maka hasilnya benar, jika tidak maka hasilnya salah.

const regExp = /abc/i;

console.log(regExp.test('abcdef')); // Output: true

console.log(regExp.test('bcadef')); // Output: false

Metode exec

Metode ini exec()membandingkan teks target dengan pola regex. Jika ada kecocokan, ia akan mengembalikan array dengan kecocokan tersebut – jika tidak, ia akan mengembalikan null. Misalnya:

const regExp = /abc/i;

console.log(regExp.exec('abcdef'));
// Output: ['abc', index: 0, input: 'abcdef', groups: undefined]

console.log(regExp.exec('bcadef'));
// Output: null

Selain itu, ada metode string yang menerima regular expression sebagai parameter seperti match(), replace(), replaceAll(), matchAll(), search(), dan split().

Contoh Regex

Berikut beberapa contoh untuk memperkuat beberapa konsep yang telah kita pelajari di artikel ini.

Contoh pertama: Cara menggunakan pola regex untuk mencocokkan alamat email:

const regexPattern = /^[(\w\d\W)+]+@[\w+]+\.[\w+]+$/i;

console.log(regexPattern.test('abcdef123@gmailcom'));
// Output: false, missing dot

console.log(regexPattern.test('abcdef123gmail.'));
// Output: false, missing end literal 'com'

console.log(regexPattern.test('abcdef123@gmail.com'));
// Output: true, the input matches the pattern correctly

Mari kita tafsirkan polanya. Inilah yang terjadi:

  • / mewakili awal dari pola regular expression.
  • ^ memeriksa awal baris dengan karakter di kelas karakter.
  • [(\w\d\W)+ ]+ cocok dengan kata, angka, dan karakter non-kata apa pun di kelas karakter setidaknya satu kali. Perhatikan bagaimana tanda kurung digunakan untuk mengelompokkan karakter sebelum menambahkan pembilang. Ini sama dengan ini [\w+\d+\W+]+.
  • @ cocok dengan @ literal dalam format email.
  • [\w+]+ cocok dengan karakter kata apa pun di kelas karakter ini setidaknya sekali.
  • \. lolos dari titik sehingga muncul sebagai karakter literal.
  • [\w+]+$ cocok dengan karakter kata apa pun di kelas ini. Juga kelas karakter ini berlabuh di akhir baris.
  • / - mengakhiri polanya

Baiklah, contoh selanjutnya: cara mencocokkan URL dengan format http://example.com atau https://www.example.com:

const pattern = /^[https?]+:\/\/((w{3}\.)?[\w+]+)\.[\w+]+$/i;

console.log(pattern.test('https://www.example.com'));
// Output: true

console.log(pattern.test('http://example.com'));
// Output: true

console.log(pattern.test('https://example'));
// Output: false

Mari kita tafsirkan juga pola ini. Inilah yang terjadi:

  • /...../ mewakili awal dan akhir pola regex
  • ^ menegaskan untuk awal baris
  • [https?]+ cocok dengan karakter yang terdaftar setidaknya satu kali, namun ?menjadikan 's' opsional.
  • : cocok dengan titik koma literal.
  • \/\/ lolos dari dua tebasan ke depan.
  • (w{3}\.) cocok dengan karakter w sebanyak 3 kali dan titik berikutnya segera. Namun grup ini bersifat opsional.
  • [\w+]+ cocok dengan karakter di kelas ini setidaknya sekali.
  • \. lolos dari titik
  • [\w+]+$ cocok dengan karakter kata apa pun di kelas ini. Juga kelas karakter ini berlabuh di akhir baris.

Kesimpulan

Pada artikel ini, kita melihat dasar-dasar regular expression. Kami juga menjelaskan beberapa pola regular expression, dan berlatih dengan beberapa contoh.

Dan itu saja untuk tutorial ini. Selamat coding