Ekspresi reguler merupakan cara ampuh untuk mencari dan mengganti string.
Di JavaScript, mereka tersedia melalui objek RegExp dan juga terintegrasi dalam metode string.
Ekspresi Reguler
Ekspresi reguler (???regexp???, atau hanya ???reg???) terdiri dari pola dan flag opsional.
Ada dua syntax yang bisa dipakai untuk membuat objek ekspresi reguler.
Syntax panjang:
regexp = new RegExp("pattern", "flag");
Dan yang ???pendek???, menggunakan garis miring "/"
:
regexp = /pattern/; // tanpa flag
regexp = /pattern/gmi; // dengan flag g,m dan i (untuk segera ditutup)
Garis miring /.../
memberitahu JavaScript bahwa kita sedang membuat ekspresi regular. Mereka memiliki peran yang sama dengan tanda petik untuk string.
Untuk kedua kasus di atas regexp
menjadi instance dari built-in object kelas RegExp
.
Perbedaan utama antara kedua syntax ini adalah garis miring /.../
melarang penyisipan ekspresi (seperti string dengan ${...}
). Mereka benar-benar static.
Garis miring digunakan saat kita tahu ekspresi regular saat menulis kode ??? dan itu situasi paling umum. Sedangkan RegExp baru
, lebih sering dipakai saat kita harus membuat regexp baru ???on the fly??? dari string yang dihasilkan secara dinamis. Misalnya:
let tag = prompt("What tag do you want to find?", "h2");
let regexp = new RegExp(`<${tag}>`); // sama dengan /<h2>/ jika dijawab "h2" di prompt di atas
Flag
Expresi regular bisa punya flag yang mempengaruhi pencarian.
Cuma ada 6 di antaranya di JavaScript:
-
i
-
Dengan flag ini pencarian case-insensitive: tak ada perbedaan antara
A
dana
(lihat contoh di bawah). -
g
- Dengan flag ini pencarian mencari semua kecocokan, tanpanya ??? hanya yang pertama yang dikembalikan.
-
m
- Mode baris-ganda (dibahas di bab Multiline mode of anchors ^ $, flag "m").
-
s
-
Menyalakan mode ???dotall???, yang membolehkan dot
.
untuk cocok dengan karakter baris-baru\n
(dibahas di bab Kelas-kelas Karakter (Character classes)). -
u
- Menyalakan dukungan penuh unicode. Flag ini menyalakan pemrosesan yang benar dari pasangan pengganti. Lebih lanjut tentang itu di bab Unicode: flag "u" and class \p{...}.
-
y
- Mode ???sticky???: mencari posisi tepat di dalam teks (dibahas di bab Sticky flag "y", searching at position)
Skema warnanya adalah:
- regexp ???
merah
- string (tempat kita mencari) ???
biru
- result ???
hijau
Pencarian: str.match
Seperti yang dikatakan sebelumnya, expresi regular terintegrasi dengan metode string.
Metode ini str.match(regexp)
mencari semua kecocokan regexp
di dalam string str
.
Ia punya 3 mode kerja:
-
Jika expresi regular punya flag
g
, ia mengembalikan array semua kecocokan:let str = "We will, we will rock you"; alert( str.match(/we/gi) ); // We,we (array 2 substring yang cocok)
Tolong ingat bahwa kedua
We
danwe
ditemukan, karena flagi
membuat regular expression case-insensitive. -
Jika tak ada flag macam ini ia mengembalikan hanya kecocokan pertama dalam bentuk array, dengan kecocokan penuh pada index
0
dan beberapa detil tambahan di properti:let str = "We will, we will rock you"; let result = str.match(/we/i); // tanpa flag g alert( result[0] ); // We (1st match) alert( result.length ); // 1 // Detil: alert( result.index ); // 0 (posisi kecocokan) alert( result.input ); // We will, we will rock you (source string)
Array itu bisa punya index lain, selain
0
jika satu bagian expresi regular disertakan dalam tanda kurung. Kita akan bahas itu di bab Capturing groups. -
Dan, akhirnya, jika tak ada kecocokan,
null
dikembalikan (tak peduli apakah ada flagg
atau tidak).Itu nuansa paling penting. Jika tak ada kecocokan, kita tak mendapatkan array kosong, melainkan
null
. Melupakan itu bisa membawa galat, misal:let matches = "JavaScript".match(/HTML/); // = null if (!matches.length) { // Error: Cannot read property 'length' of null alert("Error in the line above"); }
Jika kita mau hasilnya selalu array, kita bisa menulisnya seperti ini:
let matches = "JavaScript".match(/HTML/) || []; if (!matches.length) { alert("No matches"); // sekarang ini bekerja }
Penggantian: str.replace
Metode str.replace(regexp, replacement)
mengganti kecocokan dengan regexp
dalam string str
dengan replacement
(semua cocok jika ada flag g
, kalau tidak, cuma yang pertama saja).
Misalnya:
// tak ada flag g
alert( "We will, we will".replace(/we/i, "I") ); // I will, we will
// dengan flag g
alert( "We will, we will".replace(/we/ig, "I") ); // I will, I will
Argumen kedua adalah string replacement
. Kita bisa memakai kombinasi karakter spesial di dalamnya untuk menyisipkan fragment kecocokan:
Simbol | Aksi di string pengganti |
---|---|
$& |
menyisipkan seluruh kecocokan |
$` |
menyisipkan bagian string sebelum kecocokan |
$' |
menyisipkan bagian string setelah kecocokan |
$n |
jika n angka 1-2 digit, maka ia menyisipkan konten tanda kurung ke-n, lebih lanjut tentang itu di bab Capturing groups |
$<name> |
menyisipkan konten tanda kurung dengan name yang diberikan, lebih lanjut tentang ini ada di bab Capturing groups |
$$ |
menyisipkan karakter $ |
Contohnya dengan $&
:
alert( "I love HTML".replace(/HTML/, "$& and JavaScript") ); // I love HTML and JavaScript
Pengujian: regexp.test
Metode regexp.test(str)
mencari paling tidak 1 kecocokan, jika ditemukan, mengembalikan true
, kalau tidak false
.
let str = "I love JavaScript";
let regexp = /LOVE/i;
alert( regexp.test(str) ); // true
Lebih lanjut di bab ini kita akan mempelajari lebih expresi regular, menjumpai banyak contoh, dan menemui metode lainnya.
Informasi penuh tentang metode ini diberikan dalam artikel Methods of RegExp and String.
Ringkasan
- Expresi regular terdiri atas pola dan flag opsional:
g
,i
,m
,u
,s
,y
. - Tanpa flag dan simbol spesial yang akan kita pelajari nanti, pencarian menggunakan regexp sama dengan pencarian substring.
- Metode
str.match(regexp)
mencari kecocokan: semuanya jika ada flagg
, kalau tidak, cuma yang pertama saja. - Metode
str.replace(regexp, replacement)
mengganti kecocokan denganregexp
byreplacement
: semuanya jika ada flagg
, selain itu cuma yang pertama. - Metode
regexp.test(str)
mengembalikantrue
jika paling tidak ada satu yang cocok, kalau tidak ada, ia mengembalikanfalse
.