7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Ekspresi Reguler JavaScript : Melampaui Dasar-Dasar

Read Time: 8 mins

Indonesian (Bahasa Indonesia) translation by Imam Firmansyah (you can also view the original English article)

Dalam tutorial kita sebelumnya tentang ekspresi reguler dalam JavaScript, Anda belajar tentang kegunaan ekspresi reguler dan bagaimana cara menulis beberapa bentuk sederhana milikmu sendiri.

Setelah membaca tutorial sebelumnya, Anda sekarang harus memiliki pemahaman yang baik tentang karakter khusus seperti backslash dan urutan karakter seperti \w atau \W. Berikut ini ringkasan singkat dari urutan karakter tersebut:

  1. Anda dapat menggunakan \d atau \D untuk mencocokkan karakter digit atau non-digit dalam masing-masing string yang diberikan. Karakter digit termasuk 0, 1, 2, 3, 4, 5, 6, 7, 8, dan 9. Semua karakter lain selain kesembilan ini akan dicocokkan dengan \D.
  2. Anda dapat menggunakan \w atau \W untuk mencocokkan kata atau karakter non-kata dalam string yang diberikan. Karakter kata termasuk abjad, angka dan garis bawah. Segala sesuatu yang lain, seperti ₹, %, dan sebagainya. Dianggap sebagai karakter yang bukan kata.
  3. Anda dapat menggunakan \s atau \S untuk mencocokkan karakter spasi atau karakter non-spasi dalam string. Karakter spasi akan mencakup spasi, tab, form feed, dan line feed.

Daripada mencocokkan satu karakter pada satu waktu, Anda dapat menggunakan simbol * untuk mencocokkan ekspresi sebelumnya yang ada sebanyak nol atau lebih. Karakter + juga akan cocok dengan ekspresi sebelumnyaa yang ada sebanyak 1 kali atau lebih.

Anda dapat mencocokkan beberapa kali dari sebuah pola tertentu dengan cara menambahkan {n, m} didalamnya. Disini n merupakan jumlah minimum berapa kali Anda ingin mencocokkannya dan m adalah batas maksimum. Jika Anda tidak menentukan nilai untuk m, ekspresi sebelumnya akan dicocokkan sebanyak mungkin.

Anda harus memeriksa tutorial saya sebelumnya jika apa pun yang kita bahas tidak jelas. Saya telah menjelaskan semuanya secara lebih detail di sana.

Sekarang, mari kita lanjutkan ke beberapa rangkaian karakter yang lebih rumit dalam ekspresi reguler, sehingga Anda bisa mendapatkan hasil maksimal dari ekspresi reguler dan mencari tahu cara menulis ekspresi yang cocok dengan pola yang rumit.

Non-Greedy Cocok Menggunakan Karakter ?

Karakter ? berarti hal yang berbeda dalam situasi yang berbeda.

Saat digunakan sendiri, karakter ini cocok dengan ekspresi yang muncul sebelum 0 atau 1 kali. Dalam pengertian ini, itu sama dengan {0,1}.

Anda juga bisa menggunakan ? secepatnya setelah quantifier lain seperti *+ dan {} untuk mencocokkan kemungkinan jumlah karakter minimum. Dengan kata lain, itu akan mengubah greedy-quantifier menjadi non-greedy. Ini bisa agak sulit dimengerti tanpa melihat contoh langsung jadi mari kita lihat contoh pertama.

Pertimbangkan kalimat berikut:

Saya telah menetapkan 17321HDGE sebagai user id sementara teman saya menetapkan FHES193EK1.

Sekarang, mari kita lihat semua kecocokkan yang akan dikembalikan oleh kuantifier yang berbeda dan pasangan non-greedy mereka.

Jika kita menggunakan ekspresi /\d+/g dalam contoh, itu akan mencocokkan satu atau lebih karakter digit berurutan. Karena global flag, akan ada tiga pertandingan: 17321193 dan 1.

Anda harus mencatat bahwa 193 dan 1 dianggap berbeda pertandingan karena mereka dipisahkan oleh EK.

Contoh berikut menunjukkan kecocokkan tanpa penggunaan quantifier apa pun.

Sekarang, menambahkan karakter ?, setelah \d+ akan mengembalikan sembilan kecocokkan yang berbeda. Pada dasarnya, /\d+?/ akan mengubah setiap karakter digit menjadi kecocokkan terpisah. Mengapa demikian?

Ini karena \d+ menurut definisi seharusnya cocok dengan satu atau lebih digit. Karena karakter ? seharusnya sesuai dengan kemungkinan jumlah karakter minimum, itu hanya cocok satu digit pada suatu waktu.

Non-greedy ? quantifier, kali ini akan menghasilkan 9 digit angka yang lebih kecil. Untuk singkatnya, saya telah menandakan pada suatu baris yang mencatat kecocokkan ke console.

Mari kita ambil contoh lain, regular expression /\w+/ akan menyimpan karakter kata yang cocok asalkan tidak terganggu oleh karakter non-kata seperti spasi. Dalam kasus kita, itu akan menyamakan seluruh kata-kata yang terpisah satu kali seperti assigned dan 17321HDGE.

Jika kita mengganti ekspresi reguler asli kita dengan /\w+/, kita akan mendapatkan 14 kecocokkan yang berbeda. Pada dasarnya, setiap kata akan menjadi pasangannya sendiri. Anda dapat melihat hasilnya sendiri dengan menandakan pada suatu baris.

Sekarang, mengubah ekspresi menjadi /\w+?/ akan mengembalikan setiap karakter kata sebagai pasangan yang terpisah dan Anda akan mendapatkan 68 kecocokkan.

Mari kita lihat satu contoh terakhir sebelum kita melangkah lebih jauh. Ekspresi reguler /\w{4,}/ akan mengembalikan semua kata dalam kalimat kita yang terdiri dari empat karakter atau lebih. Jadi, diantara yang lain havebeenassigned dan 17321HDGE itu cocok. Sekarang mengubahnya menjadi /\w{4,}?/ akan mengembalikan banyak kecocokkan dari kalimat dengan lebih dari empat karakter. Dalam contoh kita, havebeenassigned1732 dan 1HGD kecocokkan yang akan dikembalikan. Karakter E pada akhir 17321HDGE bukan bagian dari kecocokkan apa pun sehingga tidak dapat berada dalam grup dari empat karakter kata yang berurutan.

Menggunakan Tanda Kurung Dengan Karakter ?

Dalam tutorial regex saya sebelumnya, saya secara singkat membahas bagaimana tanda kurung dapat digunakan untuk mengingat bagian dari suatu kecocokkan. Kapan digunakan dengan karakter ?, mereka dapat melayani tujuan lain juga.

Terkadang, Anda menginginkan sekelompok karakter untuk dicocokkan sebagai satu unit. Misalnya, Anda bisa mencari kejadian na sekali atau dua kali sebagai kecocokkan dalam teks berikut.

na naa nnaa nana naana

Untuk klarifikasi, Anda mencari teks yang dicetak tebal sebagai kecocokkan: na naa nna(nana) naana.Bagian dalam kurung seharusnya dicocokkan sebagai satu unit sehingga hanya dihitung sebagai satu kecocokkan.

Hampir semua orang yang baru memulai dengan regex akan menggunakan ekspresi /na{1,2}/ dengan tujuan untuk mendapatkan hasil yang diharapkan. Dalam pikiran mereka, bagian {1,2} seharusnya cocok dengan satu atau dua kejadian dari n dan abersama-sama. Namun, itu benar-benar cocok dengan satu kejadian n diikuti oleh 1 atau 2 kemunculan karakter a.

Saya telah membuat kecocokkan yang dikembalikan oleh /na{1,2}/ dicetak tebal untuk klarifikasi: na naa nnaa (na)(na) (naa)(na). Bagian-bagian dalam kurung adalah kecocokkan terpisah. Seperti yang Anda lihat, kita tidak mendapatkan hasil yang kita inginkan karena {1,2} tidak mempertimbangkan na menjadi satu unit yang harus dicocokkan.

Solusinya di sini adalah menggunakan tanda kurung untuk memberi tahu JavaScript agar mencocokkan na sebagai satu unit. Namun, kita melihat di tutorial sebelumnya, JavaScript akan mulai mengingat kecocokkan karena tanda kurung.

Jika Anda tidak ingin JavaScript mengingat kecocokkan, maka Anda harus menambahkan ?: sebelum grup karakter yang Anda coba samakan. Dalam kasus kita, ekspresi akhir akan menjadi /(?:na){1,2}/. Kelompok na akan dicocokkan sebagai unit sekarang dan tidak akan diingat. Saya telah menandakan kecocokkan final yang akan dikembalikan dengan ekspresi ini dengan huruf tebal: na naa nnaa (nananaana.

Contoh berikut mencatat semua kecocokkan ke console. Karena total ada 6 kecocokkan, jumlah kecocokkan totalnya adalah 6.

Lookahead dan Negated Lookahead

Ada banyak situasi di mana kita ingin mencocokkan satu set karakter tertentu tetapi jika hanya mereka diikuti atau tidak diikuti oleh set karakter lain. Misalnya, Anda bisa mencari kata apples dalam sebuah teks tetapi hanya menginginkan kecocokkan yang diikuti oleh are. Pertimbangkan kalimat berikut.

apples are yummy. We ate apples all day. Everyone who ate apples liked them.

Dalam contoh di atas, kita hanya ingin kata pertama sebagai kecocokkan. Setiap kejadian lain dari kata itu seharusnya tidak ada dalam kecocokkan.

Salah satu cara untuk mencapai ini adalah dengan menggunakan regular expression berikut a(?=b). Kata yang ingin kita cocokkan adalah a dan yang harus datang setelah a adalah b. Dalam kasus kita, ekspresi akan menjadi /apples(?=\sare)/. Ingat bahwa kata are tidak termasuk dalam kecocokkan ini.

Ini merupakan ekspresi reguler di mana kita melihat apa yang terjadi selanjutnya dalam string sebelum memutuskan apakah kata itu cocok, itu disebut dengan lookahead.

Situasi yang sangat mirip akan muncul jika Anda memutuskan untuk mencocokkan apples hanya jika tidak diikuti oleh serangkaian karakter tertentu. Dalam kasus seperti itu, Anda perlu mengganti ?= dengan ?! dalam ekspresi reguler Anda. Jika kita mencari semua kejadian apples yang tidak diikuti oleh kata are, kita akan menggunakan /apples(?!\sare)/ sebagai ekspresi reguler kita. Akan ada dua kecocokkan yang berhasil untuk kalimat yang kita uji.

Satu lagi, Anda tidak perlu menggunakan dua regular expression yang terpisah untuk menemukan semua kecocokkan yang diikuti oleh salah satu dari dua kata yang diberikan. Yang harus Anda lakukan adalah menambahkan pipe operator di antara kata-kata itu dan Anda siap untuk jalankan. Sebagai contoh, jika Anda mencari semua kejadian apel yang diikuti oleh are atau were, Anda harus menggunakan /apples(?!\sare|\swere)/ sebagai ekspres reguler Anda.

Kesimpulan

Dalam tutorial ini, kita belajar bagaimana cara menulis ekspresi reguler yang rumit agar sesuai dengan pola yang kita cari. Kita bisa menggunakan karakter spesial ? untuk mengembalikan jumlah minimum yang diperlukan dari karakter sebelumnya sebagai kecocokkan. Demikian pula, kita dapat menggunakan ? di dalam tanda kurung untuk memastikan bahwa grup yang kita cocokan tidak diingat. Akhirnya, kita belajar bahwa ?= dan ?! urutan karakter dalam regular expression yang memberi kita kesempatan untuk mengembalikan set karakter tertentu sebagai kecocokan hanya jika mereka diikuti atau tidak diikuti oleh set karakter lain yang diberikan.

Jika Anda memiliki pertanyaan terkait tutorial ini, jangan ragu untuk memberi tahu saya dan saya akan melakukan yang terbaik untuk menjelaskannya.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.