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

Panduan Pemula untuk Ekspresi Reguler dalam JavaScript

Read Time: 8 mins

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

 Setiap orang yang bekerja dengan JavaScript harus berurusan dengan string pada satu titik atau lainnya. Kadang-kadang, Anda hanya perlu menyimpan string di dalam variabel lain dan kemudian menyebarkannya.  Lain kali, Anda akan memiliki untuk memeriksa itu dan melihat apakah mengandung substring tertentu.

Namun, hal-hal tidak selalu mudah. Akan ada waktu ketika Anda akan tidak mencari substring tertentu tetapi sebuah set substring yang mengikuti pola tertentu.

Katakanlah Anda harus mengganti semua kemunculan "Apel" dalam string dengan "apel". Anda hanya dapat menggunakan theMainString.replace ("Apel", "apel"). Baik dan mudah.

Sekarang Katakanlah Anda memiliki untuk menggantikan "apel" dengan "apel" juga. Demikian pula, "apel" harus menjadi "apel" terlalu. Pada dasarnya, semua variasi kasus "Apple" perlu berubah menjadi "apel". Melewati string sederhana sebagai argumen tidak akan praktis atau efisien dalam kasus tersebut.

Ini adalah di mana persamaan reguler datang — Anda bisa saja menggunakan case-sensitive bendera i dan dilakukan dengan hal itu. Dengan bendera di tempat, tidak peduli jika asli string berisi "Apel", "Apel", "Apel", atau "Apel". Setiap contoh penggunaan perkataan akan digantikan dengan "apel".

Seperti bendera case-sensitive, ekspresi reguler menawarkan banyak fitur-fitur lainnya yang akan dibahas dalam tutorial ini.

Menggunakan Regular Expressions di JavaScript

Anda harus menggunakan sintaks yang sedikit berbeda untuk menunjukkan ekspresi reguler di dalam metode String yang berbeda. Tidak seperti sebuah string sederhana, yang disertakan dalam tanda kutip, kalimat biasa terdiri dari sebuah pola yang tertutup antara garis miring. Bendera apapun yang Anda gunakan dalam ekspresi reguler akan ditambahkan setelah garis miring kedua.

Kembali ke contoh sebelumnya, berikut adalah apa yang metode replace() yang akan terlihat seperti dengan ekspresi reguler dan sebuah string sederhana.

Seperti yang Anda lihat, kalimat biasa bekerja dalam kedua kasus. Kita sekarang akan belajar lebih banyak tentang bendera dan karakter khusus yang membentuk pola dalam ekspresi reguler.

Backslash dalam ekspresi reguler

Anda dapat mengubah karakter biasa menjadi karakter khusus dengan menambahkan tanda garis miring terbalik sebelum mereka. Demikian pula, Anda dapat mengubah karakter khusus menjadi karakter biasa dengan menambahkan tanda garis miring terbalik sebelum mereka.

Sebagai contoh, d bukanlah karakter khusus. Namun, \d digunakan untuk menyesuaikan karakter angka dalam string. Demikian pula, D bukanlah karakter khusus baik, tetapi \D digunakan untuk menyesuaikan karakter non-digit dalam string.

Digit karakter termasuk 0, 1, 2, 3, 4, 5, 6, 7, 8, dan 9. Bila Anda menggunakan \d dalam ekspresi reguler, itu akan cocok dengan salah satu karakter sembilan. Bila Anda menggunakan \D dalam ekspresi reguler, itu akan cocok semua karakter non-digit.

Contoh berikut harus membuat hal-hal yang jelas.

Anda harus mencatat bahwa hanya cocok karakter pertama diganti dalam kasus ketiga. Anda juga dapat menggunakan bendera untuk menggantikan pertandingan. Kita akan belajar tentang bendera tersebut kemudian.

Seperti \d dan \D, ada urutan karakter khusus lainnya juga.

  1. Anda dapat menggunakan \w untuk menyesuaikan dengan semua karakter "Firman" dalam string. Di sini, kata karakter merujuk A-Z, a-z, 0-9 dan _. Jadi, pada dasarnya, ini akan mencocokkan semua angka, huruf huruf kecil dan huruf besar semua, dan garis bawah.
  2. Anda dapat menggunakan \W untuk menyesuaikan dengan semua karakter non-kata dalam string. Itu akan cocok dengan karakter seperti % $ #, ₹, dll.
  3. Anda dapat menggunakan \s untuk menyesuaikan karakter tunggal ruang putih, yang mencakup ruang, tab, formulir feed, dan garis feed. Demikian pula, Anda dapat menggunakan \S untuk menyesuaikan semua karakter lain selain spasi.
  4. Anda juga dapat mencari karakter tertentu ruang putih yang menggunakan \f, \n, \r, \t, dan \v, yang berdiri untuk bentuk pakan, garis feed, kereta kembali, horizontal tab dan vertikal tab.

Kadang-kadang, Anda akan menghadapi situasi dimana Anda perlu mengganti kata dengan penggantinya, tetapi hanya jika itu bukan merupakan bagian dari sebuah kata yang lebih besar. Sebagai contoh, perhatikan kalimat berikut:

"Banyak nanas gambar yang diposting di app".

Dalam kasus ini, kami ingin mengganti kata "app" dengan "Dewan". Namun, menggunakan pola kalimat biasa yang sederhana yang akan mengubah "apple" menjadi "boardle", dan putusan final akan menjadi:

"Banyak pineboardle gambar yang diposting di app".

Dalam kasus tersebut, Anda dapat menggunakan karakter khusus Alphabet: \b. Ini memeriksa batas kata. Batas kata dibentuk dengan menggunakan karakter non-kata seperti ruang, "$", "%", "#", dll. Hati-hati, meskipun-itu juga mencakup karakter beraksen seperti "ü".

Demikian pula, Anda dapat menggunakan \B untuk mencocokkan batas non-kata. Misalnya, Anda dapat menggunakan \B untuk hanya cocok "app" ketika itu dalam kata lain, seperti "nanas".

Pencocokan pola "n" jumlah kali

Anda dapat menggunakan ^ untuk memberitahu JavaScript untuk hanya melihat awal string untuk pertandingan. Demikian pula, Anda dapat menggunakan $ untuk hanya melihat di akhir string untuk pertandingan.

Anda dapat menggunakan * untuk cocok dengan ekspresi sebelumnya 0 atau lebih kali. Sebagai contoh, /Ap* / akan cocok A, Ap, App, Appp, dan seterusnya.

Dengan cara yang sama, Anda dapat menggunakan + untuk cocok dengan ekspresi sebelumnya 1 atau lebih kali. Sebagai contoh, /Ap / akan cocok Ap, App, Appp, dan seterusnya. Ekspresi tidak akan cocok A satu kali ini.

Kadang-kadang, Anda hanya ingin sesuai jumlah tertentu kemunculan pola yang diberikan. Dalam kasus tersebut, Anda harus menggunakan urutan karakter {n}, dimana n adalah jumlah. Sebagai contoh, /Ap {2} / akan cocok dengan App tapi tidak Ap. Itu juga akan cocok dua yang pertama ' p di Appp dan meninggalkan yang ketiga tersentuh.

Anda dapat menggunakan {n,} untuk mencocokkan setidaknya 'n' kemunculan ekspresi yang diberikan. Ini berarti bahwa /Ap {2}, / akan cocok dengan App tapi tidak Ap. Itu juga akan cocok semua ' p di Apppp dan menggantinya dengan string pengganti Anda.

Anda juga dapat menggunakan {m n,} untuk menentukan jumlah minimum dan maksimum dan membatasi jumlah kali ekspresi tertentu harus dicocokkan. Sebagai contoh, /Ap {2,4} / akan cocok App, Appp dan Apppp. Ini juga akan sesuai dengan empat yang pertama ' p di Apppppp dan meninggalkan sisa mereka tak tersentuh.

Menggunakan kurung untuk mengingat pertandingan

So far, we have only replaced patterns with a constant string. For example, in the previous section, the replacement we used was always "Add".  Kadang-kadang, Anda akan harus mencari pencocokan pola dalam string tertentu dan menggantinya dengan bagian dari pola.

Katakanlah Anda harus menemukan kata dengan lima atau lebih huruf dalam string dan kemudian menambahkan "s" pada akhir kata. Dalam kasus tersebut, Anda tidak akan dapat menggunakan nilai string konstan sebagai pengganti seperti nilai akhir tergantung pada pencocokan pola itu sendiri.

 Ini adalah contoh sederhana, tetapi Anda dapat menggunakan teknik yang sama untuk menyimpan lebih dari satu pola yang cocok dalam memori. Jumlah sub-pola dalam pertandingan penuh akan ditentukan oleh jumlah tanda kurung yang digunakan. 

Di dalam string pengganti, sub pertandingan pertama akan diidentifikasi dengan menggunakan $1, Kecamatan pertandingan kedua akan diidentifikasi menggunakan $2, dan seterusnya. Berikut adalah contoh lain untuk lebih memperjelas penggunaan tanda kurung.

Menggunakan bendera dengan ekspresi reguler

Seperti yang saya sebutkan dalam pendahuluan, salah satu fitur yang lebih penting dari string biasa adalah penggunaan Khusus bendera untuk mengubah bagaimana pencarian dilakukan. Bendera opsional, tetapi Anda dapat menggunakannya untuk melakukan hal-hal seperti membuat pencarian global atau tidak bersifat case-sensitive.

Ini adalah empat bendera yang umum digunakan untuk mengubah bagaimana JavaScript pencarian atau menggantikan string.

  • g: bendera ini akan melakukan pencarian global bukan berhenti setelah pertandingan pertama.
  • i: bendera ini akan melakukan pencarian tanpa memeriksa kasus pencocokan sama persis. Misalnya, Apple, aPPLe dan apPLE adalah semua diperlakukan sama selama pencarian case-sensitive.
  • m: bendera ini akan melakukan pencarian multi-baris.
  • y: bendera ini akan mencari kecocokan dalam indeks yang ditunjukkan oleh lastIndex properti.

 Berikut beberapa contoh ekspresi reguler yang digunakan dengan bendera: 

Akhir pikiran

Tujuan dari tutorial ini adalah untuk memperkenalkan Anda untuk string biasa dalam JavaScript dan kepentingan mereka. Kami mulai dengan dasar-dasar dan kemudian ditutup backslash dan karakter khusus lainnya. Kita juga belajar bagaimana untuk memeriksa pola berulang dalam string dan cara untuk mengingat parsial pertandingan dalam pola untuk menggunakannya nanti.

Akhirnya, kami belajar tentang umumnya digunakan bendera yang membuat kalimat biasa bahkan lebih kuat. Anda dapat mempelajari lebih lanjut tentang persamaan reguler dalam artikel ini pada MDN.

Jika ada sesuatu yang Anda ingin saya untuk mengklarifikasi dalam tutorial ini, merasa bebas untuk membiarkan saya tahu di komentar.

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.
Advertisement
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.