Regular expressions, or regex, are a context-independent syntax that can represent a wide variety of character sets and character set orderings, where these character sets are interpreted according to the current locale. To put it simply, they are a sequence of characters that define a search pattern, often used for string sanitization and validation.
Summary
The following regular expression can be used to validate a URL and will be broken down into it various components in this tutorial to make it easier to understand. There are many components that we will go over in this tutorial. However, there is a lot of information that we will not be covering today due to it not being used in this particular regular expression. If you find this interesting, I strongly suggest practicing using regular expressions and reading more about them. A couple useful sites are Regexr.com and Regex101.com. Both of these sites will help break down the regular expression and explain what is happening.
Regex Matching a URL: `/^[https?:\/\/]?[[\da-z\.-]+]\.[[a-z\.]{2,6}][[\/\w \.-]*]*\/?$/`
Table of Contents
Regex Components
Anchors
Anchor have a special meaning in regular expressions. Instead of matching the character, they match a position before or after a character.
SymbolDescriptionCode in Regular Expression^
The caret anchor asserts the position at the begining of the string./^[h
$
The dollar sign anchor matches the end of the text before the end of the string's line terminator, if present./?$/
Quantifiers
Quantifiers specify how many times a character, group, or character class must be present in the input for a match to be found.
SymbolDescriptionCode in Regular Expression?
The question mark says to match between 0 and 1 of the preceding characters. In the given regular expression, it will match either http or https./^[https?:\/\/]
{}
The curly brackets with match any preceding character within the given range.{2,6}
[*]
Matches the previous token between 0 and unlimited times, as many time as possible, and giving back as needed.^
0^
1Matches the previous token between 1 and unlimited times, as many times as possible, and giving back as needed.^
2Grouping Constructs
Grouping allows you to treat another expression as a single unit.
SymbolDescriptionCode in Regular Expression^
3// will match as a group in the given regular expression due to it being surrounded by parentheses.Bracket Expressions
A bracket expression [an expression enclosed in square brackets, '[]' ] is a regular expression that will match a specific set of single characters, and may match a specific set of multi-character elements, based on the contents of the bracket expression.
SymbolDescriptionCode in Regular Expression^
4Brackets signal to match any character in the set.^
5^
6This bracket expression with try to match any alphanumeric character and any literal periods.^
5Character Classes
Character classes are one of the most commonly used features in regular expressions. They are used to tell the regular expression engine what characters to match and they are also case sensitive
SymbolDescriptionCode in Regular Expression^
8The Range character set matches a character between a and z.^
5/^[h
0The Character matches the given character so the '/^[h
0' will match a '/^[h
0' and a ' ' character will match with a space character.^
5Character Escapes
Escape sequences can be used to insert reserved, special, and unicode characters. All escaped characters begin with the '/^[h
4' character.
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:
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.
Kemudian konsep ini diadopsi di beberapa program dan menjadi umum digunakan pada program pemeroses teks seperti sed
, awk
,
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";
}
}];
0, dll.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:
Buat Password
Panjang password minimal 8 kareter, dan harus mengandung huruf kapital, angka, dan simbol
Perhatikan atribut
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";
}
}];
1, 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
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";
}
}];
1.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
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";
}
}];
0.Program
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";
}
}];
0 [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
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";
}
}];
0 melakukan pencarian berdasarkan pola regex yang diberikan, lalu mencetak output hasilnya.Contoh:
Misalkan kita ingin mencari teks pada
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";
}
}];
6. Kita bisa melihat isi file 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";
}
}];
6 dengan cat.cat /var/log/syslog
Perintah ini akan menampilkan banyak sekali teks. Nah di sini kita bisa memanfaatkan
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";
}
}];
0 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
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";
}
}];
9 ini adalah pola regex yang akan menjadi kata kunci pencarian.Maka hasilnya:
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
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";
}
}];
0, 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.
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:
Pada pola pencarian di atas, saya melakukan pengelompokan atau grouping sebanyak lima kelompok. Lalu melakukan subtitusi atau replace.
Penjelasan detail tentang pola ini, bisa kamu lihat di regex101.com.
Contoh lainnya:
Pada kasus ini, saya ingin mengambil data
cat /var/log/syslog
1 dan menghilangkan teks dibelakangnya.Hasilnya setelah disubtitusi:
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
cat /var/log/syslog
2 adalah simbol untuk mencari kata [word] dan jika ditambahkan cat /var/log/syslog
3 mejadi cat /var/log/syslog
4 simbol ini menjadi punya arti yang berbeda.Beberapa simbol mudah saya ingat karena sering memakainya.
5 — untuk grouping;cat /var/log/syslog
6 — simbol untuk logika or [atau alternatif];cat /var/log/syslog
7 — untuk mencari karekter dari hurufcat /var/log/syslog
8 sampaicat /var/log/syslog
9;cat /var/log/syslog
0 — untuk mencari karakter dari hurufcat /var/log/syslog | grep network
1 sampaicat /var/log/syslog | grep network
2;cat /var/log/syslog | grep network
3 — Untuk mencari angkacat /var/log/syslog | grep network
4 sampaicat /var/log/syslog | grep network
5;cat /var/log/syslog | grep network
2 — untuk mencari kata;cat /var/log/syslog
7 — untuk mencari angka;cat /var/log/syslog | grep network
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.
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.
Oh iya, untuk memudahkan belajar Regex.. kamu bisa gunakan website berikut:
- Regex101.com
- Regexr.com
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.