Apa itu Regex

Apakah kamu pernah membuat password, dan di sana kita diminta harus menggunakan huruf kapital, angka, dan simbol.

Jika kita tidak mematuhinya, maka akan diberikan peringatan:

new password validation

Bagaimana program bisa tau, kalau kita tidak mematuhinya?

Bagaimana program mampu mengenali password yang kita inputkan?

Ini semua berkat regex.

Di balik program yang terlihat cukup cerdas itu, ada peran regex di sana.

Jadi:

Apa itu Regex?

Regex adalah singkatan dari Regular Expresion.

Regex merupakan sebuah teks (string) yang mendefinisikan sebuah pola pencarian sehingga dapat membantu kita untuk melakukan matching (pencocokan), locate (pencarian), dan manipulasi teks.

Konsep tentang regex pertamakali muncul di tahun 1951, ketika seorang ilmuan matematikan bernama Stephen Cole Kleene memformulasikan definisi tentang bahasa formal.1

Kemudian konsep ini diadopsi di beberapa program dan menjadi umum digunakan pada program pemeroses teks seperti sed, awk, grep, dll.

mindmap regex

Menurut saya, regex itu seperti mantra ajaib yang punya kesaktian tinggi hehe. 😄

Regex memudahkan kita untuk memanipulasi teks, tapi juga kadang berbahaya.. karena bisa mengubah teks yang tidak kita inginkan.

Biasanya itu terjadi karena kesalahan pola yang diberikan.

Manfaat Regex dalam Pemrograman

Berdasarkan definisi regex yang sudah kita pelajari, kita bisa tahu tiga manfaat penting regex yakni pencarian, pencocokan, dan manipulasi teks.

Berikut ini beberapa contoh pemanfaatan regex dalam pemrograman:

1. Regex untuk Validasi Data

Seperti contoh kasus password tadi, regex digunakan untuk matching atau pencocokan teks.

Pertama-tama, kita harus mendefinisikan pola regex untuk data yang valid. Kemudian, kita lakukan pencocokan dengan pola tersebut.

Berikut ini contohnya di HTML dan Javascript.

Kode HTML:

<form id="myform">
    <label for="passowrd">Buat Password</label>
    <input type="password" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" />
    <input type="submit" value="simpan" />
    <p id="invalid-passowrd" style="display:none;color:red">Panjang password minimal 8 kareter, dan harus mengandung huruf kapital, angka, dan simbol</p>
</form>

Perhatikan atribut pattern, atribut ini digunakan untuk menyimpan pola regex. Pada contoh di atas, polanya adalah pengecekan karakter yang diinputkan pada password.

Ini pernah saya bahas juga di: Validasi Data di HTML.

Berikut ini kode Javascript untuk memberikan feedback:

const passwordField = document.querySelector("[name=password]");

passwordField.addEventListener("keyup", (event) => {
    if(!passwordField.validity.valid){
        console.error("passowrd invalid");
        document.getElementById("invalid-passowrd").style.display = "block";
    } else {
         console.info("passowrd valid");
        document.getElementById("invalid-passowrd").style.display = "none";
    }
});

Pada contoh ini, kita tidak menggunakan regex di dalam Javascript. Melainkan kita menggunakannya pada HTML.

Kode javascript di atas, hanya bertugas untuk mengecek.. apakah nilai dari field password sudah sesuai atau tidak dengan yang ada pada atribut pattern.

Berikut ini hasilnya:

Live Demo: Buka di Codepen.io

2. Regex untuk Pencarian

Contoh penerapan regex untuk pencarian sebenarnya hampir sama dengan validasi data.

Pola regex dimasukan dalam kata kunci, lalu dicocokan dengan database atau teks.

Contoh program yang menerapkan ini adalah grep.

Program grep (globally search for a regular expression and print matching lines) biasanya kita temukan di sistem operasi Unix dan Linux, bahkan ini menjadi program yang selalu ada di setiap distro Linux.

Program grep melakukan pencarian berdasarkan pola regex yang diberikan, lalu mencetak output hasilnya.

Contoh:

Misalkan kita ingin mencari teks pada syslog. Kita bisa melihat isi file syslog dengan cat.

cat /var/log/syslog

Perintah ini akan menampilkan banyak sekali teks. Nah di sini kita bisa memanfaatkan grep untuk mencari teks tertentu pada log.

Misalnya:

Saya ingin tau apa saja log yang berkaitan dengan jaringan:

cat /var/log/syslog | grep network

Perhatikan, kata network ini adalah pola regex yang akan menjadi kata kunci pencarian.

Maka hasilnya:

grep network

Grep akan mewarnai hasil teks yang cocok dengan pola regex yang diberikan.

Dari hasil tersebut, saya bisa tahu apa saja log yang sudah dilakukan pada jaringan di komputer saya.

Tidak hanya di grep, pada beberapa teks editor juga menerapkan regex untuk pencarian.

Contohnya: Teks editor VS Code.

Pada VS Code, ada mode pencarian dengan regex. Di sana kita bisa memasukan pola regex.

Misal saya ingin mencari di mana saja penulisan nama file js dalam kode.

regex pada vscode

Ini sangat memudahkan..

Saya sering pakai ini terutama saat melakukan Find and Replace.

3. Regex untuk Find and Replace

Salah satu manfaat regex yang saya suka adalah find and replace. Fitur ini membantu saya untuk mengelola teks dan konten lebih efisien.

Bayangkan saja..

Di petani kode ada ratusan konten dengan format markdown. Lalu di suatu kondisi saya ingin mengubah beberapa teks di semua konten ini.

Jika dilakukan satu-per-satu secara manual, tentu ini akan menguras banyak waktu dan tenaga.

Tapi..

Berkat regex, saya bisa melakukannya dalam hitungan detik. Cukup bikin pola pencarian dan pola untuk mengubahnya (subtitusi).

Contoh:

Saya ingin mengubah ini:

{{< fig "/img/website-cern.png" "Website CERN (2020)"  >}}
{{< fig "/img/tim-robert.jpg" 
"Tim Berners-Lee dan Robert Cailliau" >}}

Menjadi ini:

![Website CERN (2020)](/img/website-cern.png "Website CERN (2020)")
![Tim Berners-Lee dan Robert Cailliau](/img/tim-robert.jpg "Tim Berners-Lee dan Robert Cailliau")

Maka pola pencariannya adalah:

(\{\{< fig) "(.+)"( | \n)"(.+)" (>\}\})

Dan pola untuk mengubahnya adalah:

![$4]($2 "$4")

Maka hasilnya:

find-replace-regex

Pada pola pencarian di atas, saya melakukan pengelompokan atau grouping sebanyak lima kelompok. Lalu melakukan subtitusi atau replace.

regex-grouping

Penjelasan detail tentang pola ini, bisa kamu lihat di regex101.com.

Contoh lainnya:

regex101

Pada kasus ini, saya ingin mengambil data nama:nama/domain dan menghilangkan teks dibelakangnya.

Hasilnya setelah disubtitusi:

regex-subtitusi

Tantangan Belajar Regex

Menurut saya:

Tantangan tersulit dalam belajar Regex adalah membuat sendiri dan menghafal simbol pada pola regex. 😄

Setiap simbol dalam regex, punya arti.

Misalkan untuk simbol \w adalah simbol untuk mencari kata (word) dan jika ditambahkan + mejadi \w+ simbol ini menjadi punya arti yang berbeda.

Beberapa simbol mudah saya ingat karena sering memakainya.

  • () — untuk grouping;
  • | — simbol untuk logika or (atau alternatif);
  • [a-z] — untuk mencari karekter dari huruf a sampai z;
  • [A-Z] — untuk mencari karakter dari huruf A sampai Z;
  • [0-9] — Untuk mencari angka 0 sampai 9;
  • \w — untuk mencari kata;
  • \d — untuk mencari angka;

Sisanya, saya googling sendiri hehe. 😸

Sebenarnya ada cara gampang untuk mengingatnya, yakni dengan mindmap dan sering-sering dipakai.

Berikut ini mindmap simbol regex yang saya buat berdasarkan referensi dari regexr.

regex-simbol

Selain mindmap, kamu juga bisa gunakan cheatsheet. Cheatsheet dicetak, lalu ditempel di dekat meja kerja. Kalau lagi butuh, tinggal contek di cheatsheet 😄 seperti main GTA di PS 2.

Nah untuk cheatsheet ini, kamu bisa cari di Google. Banyak kok.

cheatsheet regex

Oh iya, untuk memudahkan belajar Regex.. kamu bisa gunakan website berikut:

Kedua website ini menyediakan penjelasan detail tentang tiap-tiap simbol regex dan juga di sana kita bisa testing hasilnya.

Apa Selanjutnya?

Jadi intinya:

Regex itu adalah sebuah teks dalam bentuk pola untuk pencarian dan banyak dipakai untuk pencocokan, pencarian, dan manipulasi teks.

Nah, berikutnya..

Silahkan pelajari simbol-simbol regex dan cara menggunakan regex di bahasa pemrograman yang kamu kuasai.

Misalnya regex di Python, PHP, Javascript, Java, dan sebagainya.

Hampir di setiap bahasa pemrograman ada regex. Hanya saja fungsi yang digunakan berbeda-beda.

Selamat belajar.


  1. https://en.wikipedia.org/wiki/Regular_expression “Regular Expression” ↩︎