Selamat datang di panduan lengkap untuk ekspresi reguler dalam JavaScript! Dalam artikel ini, kita akan membahas secara rinci apa itu ekspresi reguler, bagaimana ekspresi reguler digunakan dalam JavaScript, dan bagaimana ekspresi reguler dapat membantu Anda menyederhanakan dan mengoptimalkan kode Anda. Dari dasar hingga contoh praktis, kami akan membahas semua yang perlu Anda ketahui untuk mulai memanfaatkan ekspresi reguler dalam proyek JavaScript Anda. Jadi, mari kita mulai!
Pengantar ekspresi reguler
Ekspresi reguler adalah pola pencarian yang digunakan untuk menemukan dan memanipulasi teks dalam string karakter. Mereka terdiri dari kombinasi karakter literal dan metakarakter, yang menentukan aturan spesifik untuk menemukan kecocokan dalam teks. Aturan-aturan ini dapat mencakup pencarian karakter tertentu, rentang karakter, pengulangan, alternatif, dan banyak lagi.
Dalam JavaScript, ekspresi reguler dibuat menggunakan kelas RegExp atau menggunakan literal /patrón/. Polanya adalah ekspresi reguler itu sendiri, yang diapit oleh garis miring. Mari kita lihat contoh sederhana:
const regex = /hola/;
Dalam contoh ini, kami telah membuat ekspresi reguler yang akan mencari string “halo” dalam teks. Sekarang setelah kita memiliki pemahaman dasar mengenai apa itu ekspresi reguler, mari jelajahi beberapa konsep utama dan teknik lanjutan untuk bekerja dengannya di JavaScript.
Sintaks dasar ekspresi reguler
Ekspresi reguler dalam JavaScript terdiri dari beberapa elemen kunci yang memungkinkan kita menentukan pola pencarian yang lebih kompleks. Elemen-elemen ini mencakup karakter literal, metakarakter, kelas karakter, kuantifier, jangkar, dan banyak lagi. Mari kita lihat beberapa contoh elemen ini:
Karakter harfiah
Karakter literal adalah karakter yang dicari saat muncul dalam teks. Misalnya, ekspresi reguler /hola/ akan mencari urutan karakter “hello” dalam string teks. Penting untuk dicatat bahwa ekspresi reguler peka huruf besar/kecil, jadi /hola/ tidak akan cocok dengan "Halo" atau "HELLO".
Metakarakter
Metakarakter adalah karakter khusus yang memiliki arti khusus dalam ekspresi reguler. Misalnya, metakarakter . Digunakan untuk mewakili karakter apa pun kecuali baris baru. Metakarakter umum lainnya adalah ^, yang digunakan untuk menunjukkan awal rangkaian teks. Misalnya, ekspresi reguler /^hola/ akan cocok dengan string teks apa pun yang dimulai dengan "halo".
Kelas karakter
Kelas karakter digunakan untuk mencari karakter apa pun dalam set tertentu. Misalnya, ekspresi reguler /[aeiou]/ akan mencocokkan vokal apa pun dalam rangkaian teks. Dimungkinkan juga untuk menggunakan rentang karakter dalam kelas karakter. Misalnya, ekspresi reguler /[a-z]/ akan cocok dengan huruf kecil apa pun.
Kuantifier
Kuantifier digunakan untuk menentukan jumlah kemunculan suatu elemen dalam ekspresi reguler. Misalnya, kuantifier * menunjukkan bahwa elemen sebelumnya dapat muncul nol kali atau lebih. Pengukur kuantitas + menunjukkan bahwa elemen sebelumnya harus muncul satu kali atau lebih. Misalnya, ekspresi reguler /a+/ akan mencocokkan satu atau lebih "a" dalam string teks.
Jangkar
Jangkar digunakan untuk menunjukkan posisi kecocokan dalam rangkaian teks. Misalnya saja jangkar \b cocok dengan batas kata. Misalnya, ekspresi reguler /bholab/ hanya akan cocok dengan kata "halo" sebagai kata lengkap, tanpa mencocokkan kata-kata yang lebih panjang yang mengandung "hello" sebagai bagiannya.
Ini hanyalah beberapa contoh sintaks dasar ekspresi reguler di JavaScript. Seiring berjalannya artikel ini , kita akan menjelajahi konsep dan teknik yang lebih canggih untuk bekerja dengan ekspresi reguler di JavaScript.
Pencarian Pencocokan Dasar
Salah satu operasi paling umum yang dilakukan dengan ekspresi reguler adalah mencari kecocokan dalam string teks. Dalam JavaScript, kita dapat menggunakan metode search() untuk menemukan kecocokan pertama dari ekspresi reguler dalam string teks. Mari kita lihat contohnya:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const indice = texto.search(regex); console.log(indice); // 7
Dalam contoh ini, kami menggunakan metode search() untuk menemukan kecocokan pertama dari ekspresi reguler /mundo/ dalam rangkaian teks "Halo, dunia!" Metode search() mengembalikan indeks kecocokan pertama yang ditemukan, atau -1 jika tidak ada kecocokan yang ditemukan.
Selain metode search()JavaScript juga menyediakan metode lain yang berguna untuk bekerja dengan ekspresi reguler, seperti match(), replace(), split() y test(). Masing-masing metode ini memiliki tujuannya sendiri dan dapat digunakan sesuai kebutuhan spesifik Anda.
Menggunakan Modifier dan Flag
Dalam JavaScript, ekspresi reguler dapat berisi pengubah dan tanda yang memungkinkan penelusuran yang lebih fleksibel dan disesuaikan. Pengubah ditambahkan ke akhir ekspresi reguler dan mengubah perilakunya. Beberapa pengubah yang paling umum adalah:
aku (tidak peka)
Pengubah i digunakan untuk melakukan pencarian tanpa memperhatikan huruf besar/kecil. Misalnya, ekspresi reguler /hola/i akan cocok dengan “halo” dan “Halo” atau “HELLO”.
g (dunia)
Pengubah g Digunakan untuk melakukan pencarian global pada keseluruhan rangkaian teks, dan tidak berhenti pada kecocokan pertama yang ditemukan. Misalnya, ekspresi reguler /a+/g akan mencocokkan semua kemunculan satu atau lebih "a" dalam string teks.
m (multigaris)
Pengubah m Digunakan untuk melakukan pencarian pada beberapa baris dalam rangkaian teks. Misalnya, ekspresi reguler /^hola/m akan mencocokkan kata "halo" di awal setiap baris dalam string teks.
Selain pengubah, JavaScript juga memperbolehkan penggunaan bendera dalam ekspresi reguler. Bendera ditambahkan setelah garis miring kedua saat membuat ekspresi reguler menggunakan kelas RegExp. Beberapa bendera yang paling umum adalah:
aku (tidak peka)
Seperti pengubah i, bendera i melakukan pencarian tanpa memperhatikan huruf besar/kecil. Misalnya, ekspresi reguler new RegExp("hola", "i") akan cocok dengan “halo” dan “Halo” atau “HELLO”.
g (dunia)
Seperti pengubah g, bendera g melakukan pencarian global pada keseluruhan rangkaian teks. Misalnya, ekspresi reguler new RegExp("a+", "g") akan mencocokkan semua kemunculan satu atau lebih "a" dalam string teks.
m (multigaris)
Seperti pengubah m, bendera m melakukan pencarian pada beberapa baris dalam rangkaian teks. Misalnya, ekspresi reguler new RegExp("^hola", "m") akan mencocokkan kata "halo" di awal setiap baris dalam string teks.
Penggunaan modifier dan flag dalam ekspresi reguler JavaScript sangat berguna untuk menyesuaikan pencarian dengan berbagai kasus dan persyaratan spesifik. Bereksperimenlah dengan fitur-fitur ini dan temukan bagaimana Anda dapat memanfaatkannya sebaik mungkin dalam kode Anda.
Metakarakter dan karakter khusus
Metakarakter dan karakter khusus adalah elemen kunci dalam ekspresi reguler yang memungkinkan kita melakukan penelusuran yang lebih kuat dan fleksibel. Kami telah menyebutkan beberapa metakarakter, seperti . y ^, tetapi masih banyak lagi yang dapat Anda gunakan dalam ekspresi reguler Anda. Mari kita lihat beberapa metakarakter dan karakter khusus yang paling umum:
. (titik)
Karakter meta . Digunakan untuk mewakili karakter apa pun kecuali baris baru. Misalnya, ekspresi reguler /h.t/ akan cocok dengan “hat,” “hot,” “hit,” dan kata tiga huruf lainnya yang dimulai dengan “h” dan diakhiri dengan “t.”
\ (garis miring terbalik)
Garis miring terbalik digunakan untuk keluar dari karakter khusus dalam ekspresi reguler. Misalnya, jika Anda ingin mencari titik literal dalam rangkaian teks, Anda harus meloloskannya menggunakan garis miring terbalik. Ekspresi reguler /www\.google\.com/ akan cocok dengan string teks “www.google.com”.
\d (angka)
Karakter meta \d digunakan untuk mencari digit apa pun dari 0 hingga 9. Misalnya, ekspresi reguler /\d+/ akan mencocokkan satu atau lebih digit angka dalam string teks.
\w (karakter alfanumerik)
Karakter meta \w digunakan untuk mencari karakter alfanumerik apa pun (huruf besar dan kecil, angka, dan garis bawah). Misalnya, ekspresi reguler /\w+/ akan mencocokkan kata apa pun dari satu atau lebih karakter alfanumerik dalam string teks.
Ini hanyalah beberapa contoh metakarakter dan karakter khusus yang dapat Anda gunakan dalam ekspresi reguler Anda. Saat Anda semakin terbiasa dengan ekspresi reguler di JavaScript, Anda akan menemukan berbagai macam pilihan untuk menyempurnakan penelusuran dan manipulasi teks Anda.
Kelas dan rentang karakter
Kelas karakter merupakan elemen kunci lain dalam ekspresi reguler yang memungkinkan kita mencari karakter apa pun dalam rangkaian tertentu. Dalam JavaScript, kita bisa menggunakan tanda kurung [] untuk mendefinisikan kelas karakter. Mari kita lihat beberapa contoh kelas dan rentang karakter:
[akuu]
Kelas karakter [aeiou] akan mencocokkan vokal apa pun dalam rangkaian teks. Misalnya, ekspresi reguler /[aeiou]/ akan mencocokkan "a", "e", "i", "o", atau "u" dalam string teks.
[az]
Rentang karakter [a-z] akan mencocokkan huruf kecil apa pun dalam alfabet bahasa Inggris. Misalnya, ekspresi reguler /[a-z]/ akan mencocokkan huruf kecil apa pun dalam string teks.
[0-9]
Rentang karakter [0-9] akan mencocokkan digit apa pun dari 0 hingga 9 dalam string teks. Misalnya, ekspresi reguler /[0-9]/ akan cocok dengan nomor satu digit apa pun.
[A-Za-z]
Kelas karakter [A-Za-z] akan mencocokkan huruf besar atau kecil apa pun dalam alfabet bahasa Inggris. Misalnya, ekspresi reguler /[A-Za-z]/ akan mencocokkan huruf apa pun dalam rangkaian teks.
Kelas dan rentang karakter memungkinkan kita menentukan kumpulan karakter tertentu untuk dicari dalam ekspresi reguler. Gunakan untuk menyesuaikan pencarian Anda dengan kebutuhan dan batasan spesifik Anda.
Kuantifier dan pengulangan
Kuantifier dan pengulangan adalah elemen kunci dalam ekspresi reguler yang memungkinkan kita menentukan jumlah kemunculan suatu elemen dalam string teks. Mari kita lihat beberapa quantifier yang paling umum dalam JavaScript:
* (tanda bintang)
Pengukur kuantitas * menunjukkan bahwa elemen sebelumnya dapat muncul nol kali atau lebih. Misalnya, ekspresi reguler /a*/ akan mencocokkan nol atau lebih 'a' dalam string teks.
+ (lebih banyak)
Pengukur kuantitas + menunjukkan bahwa elemen sebelumnya harus muncul satu kali atau lebih. Misalnya, ekspresi reguler /a+/ akan mencocokkan satu atau lebih "a" dalam string teks.
.... (pertanyaan)
Pengukur kuantitas ? menunjukkan bahwa elemen sebelumnya mungkin muncul nol atau satu kali. Misalnya, ekspresi reguler /colou?r/ akan cocok dengan “warna” dan “warna”.
{n} (tepatnya n kali)
Pengukur kuantitas {n} menunjukkan bahwa elemen sebelumnya harus muncul tepat n kali. Misalnya, ekspresi reguler /a{3}/ akan mencocokkan tepat tiga "a" dalam string teks.
{n,} (setidaknya n kali)
Pengukur kuantitas {n,} menunjukkan bahwa elemen sebelumnya harus muncul setidaknya n kali. Misalnya, ekspresi reguler /a{2,}/ akan mencocokkan dua atau lebih 'a' dalam string teks.
{n,m}
Pengukur kuantitas {n,m} menunjukkan bahwa elemen sebelumnya harus muncul sedikitnya n kali dan paling banyak m kali. Misalnya, ekspresi reguler /a{2,4}/ akan mencocokkan dua, tiga, atau empat "a" dalam string teks.
Ini hanyalah beberapa contoh bilangan yang dapat Anda gunakan dalam ekspresi reguler Anda. Kuantifier memungkinkan kita menentukan pola pengulangan pada penelusuran dan manipulasi teks, sehingga memudahkan ekstraksi informasi spesifik dari rangkaian teks.
Jangkar dan batas kata
Jangkar dan batas kata merupakan elemen yang memungkinkan kita menunjukkan posisi kecocokan dalam rangkaian teks. Elemen-elemen ini terutama berguna ketika kita ingin mencari kata lengkap atau memastikan kecocokan ada di awal atau akhir baris. Mari kita lihat beberapa contoh jangkar dan batasan kata:
\b (batas kata)
Batasan kata \b mencocokkan batas antara karakter alfanumerik dan karakter non-alfanumerik. Misalnya, ekspresi reguler /\bjavascript\b/ hanya akan mencocokkan kata “javascript” sebagai kata yang lengkap, tidak akan mencocokkan kata yang lebih panjang yang mengandung “javascript” sebagai bagiannya.
^ (awal baris)
Karakternya ^ Digunakan untuk menunjukkan awal baris dalam rangkaian teks. Misalnya, ekspresi reguler /^hola/ akan mencocokkan kata "halo" di awal setiap baris dalam string teks.
$ (akhir baris)
Karakternya $ Digunakan untuk menunjukkan akhir baris dalam rangkaian teks. Misalnya, ekspresi reguler /mundo$/ akan mencocokkan kata "dunia" di akhir setiap baris dalam string teks.
\A (awal teks)
Karakternya \A Digunakan untuk menunjukkan awal semua teks dalam rangkaian teks, bukan hanya awal baris. Misalnya, ekspresi reguler /^\AHola/ akan mencocokkan kata “Halo” di awal seluruh teks.
\Z (akhir teks)
Karakternya \Z digunakan untuk menunjukkan akhir semua teks dalam string teks, bukan hanya akhir baris. Misalnya, ekspresi reguler /Mundo\Z/ akan mencocokkan kata "Dunia" di akhir seluruh teks.
Jangkar dan batasan kata memungkinkan kita mencari kecocokan pada lokasi tertentu dalam rangkaian teks, yang dapat berguna dalam situasi ketika kita ingin memastikan bahwa kecocokan berada pada posisi tertentu.
Grup dan tangkapan
Grup dan tangkapan adalah elemen lanjutan dalam ekspresi reguler yang memungkinkan kita mengelompokkan subekspresi dan menangkapnya untuk penggunaan selanjutnya. Mari kita lihat bagaimana grup dan tangkapan bekerja:
( ) (tanda kurung)
Tanda kurungnya adalah Mereka biasa mengelompokkan subekspresi dalam ekspresi reguler. Misalnya, ekspresi reguler /(d{2})-(d{2})-(d{4})/ se digunakan untuk mencari tanggal dalam format "dd-mm-yyyy. Kelompok-kelompok ( ) Mereka memungkinkan kita untuk menangkap nilai hari, bulan, dan tahun secara terpisah.
\1, \2, \3 (referensi grup)
Referensi grup digunakan untuk merujuk ke grup yang ditangkap sebelumnya dalam ekspresi reguler. Misalnya, ekspresi reguler /(\w+) \1/ akan mencocokkan kata apa pun yang diikuti oleh kata yang sama yang diulang. Misalnya, “halo halo”, “dunia dunia”, dan lain sebagainya.
?: (kelompok yang tidak menangkap)
Simbol ?: Digunakan untuk membuat grup non-penangkapan. Kelompok ini digunakan saat kita ingin mengelompokkan subekspresi, tetapi kita tidak ingin menangkap hasilnya. Misalnya, ekspresi reguler /https?:\/\/(?:www\.)?google\.com/ akan cocok dengan “http://www.google.com” dan “https://google.com”, tetapi hanya akan menangkap bagian URL yang relevan.
Grup dan tangkapan memungkinkan kita untuk menyusun dan mengatur ekspresi reguler kita dengan cara yang lebih efisien dan mudah dibaca. Mereka juga memberikan kemampuan untuk menangkap nilai-nilai spesifik untuk digunakan kemudian dalam aplikasi kita.
Metode yang berguna untuk bekerja dengan ekspresi reguler
JavaScript menyediakan beberapa metode yang berguna untuk bekerja dengan ekspresi reguler. Metode ini memungkinkan kita melakukan operasi umum seperti mencari, mengganti, dan membagi string teks menggunakan ekspresi reguler. Mari kita lihat beberapa metode ini:
cocok()
Metode match() Digunakan untuk menemukan semua kecocokan ekspresi reguler dalam string teks dan mengembalikan array dengan hasilnya. Misalnya:
const texto = "¡Hola, mundo!"; const regex = /o/g; const coincidencias = texto.match(regex); console.log(coincidencias); // ["o", "o"]
Dalam contoh ini, kami menggunakan metode match() untuk menemukan semua kecocokan ekspresi reguler /o/g dalam rangkaian teks "Halo, dunia!" Metode match() mengembalikan array dengan semua kecocokan yang ditemukan.
ganti ()
Metode replace() digunakan untuk mengganti kecocokan ekspresi reguler dalam string teks dengan nilai baru. Misalnya:
const texto = "¡Hola, mundo!"; const regex = /mundo/; const nuevoTexto = texto.replace(regex, "amigo"); console.log(nuevoTexto); // "¡Hola, amigo!"
Dalam contoh ini, kami menggunakan metode replace() untuk mengganti ekspresi reguler yang cocok /mundo/ dalam rangkaian teks "Halo, dunia!" untuk kata "teman." Metode replace() mengembalikan string teks baru dengan substitusi yang dibuat.
membagi()
Metode split() digunakan untuk membagi string teks menjadi array sub-string menggunakan ekspresi reguler sebagai pemisah. Misalnya:
const texto = "Hola,mundo,amigo"; const regex = /,/g; const subcadenas = texto.split(regex); console.log(subcadenas); // ["Hola", "mundo", "amigo"]
Dalam contoh ini, kami menggunakan metode split() untuk membagi string teks "Halo, dunia, teman" menjadi array substring menggunakan ekspresi reguler /,/g sebagai pemisah. Metode split() mengembalikan array dengan substring yang dihasilkan.
uji()
Metode test() Digunakan untuk memeriksa apakah ekspresi reguler memiliki kecocokan dalam string teks. Metode kembali true jika ada kecocokan dan false jika tidak. Misalnya:
const texto = "Hola, mundo!"; const regex = /mundo/; const resultado = regex.test(texto); console.log(resultado); // true
Dalam contoh ini, kami menggunakan metode test() untuk memeriksa apakah ekspresi reguler /mundo/ memiliki kecocokan dalam string teks "Halo, dunia!". Metode test() bawa kembali true karena ada suatu kebetulan.
Ini hanyalah beberapa metode paling umum untuk bekerja dengan ekspresi reguler di JavaScript. Masing-masing metode ini memiliki tujuannya sendiri dan dapat digunakan sesuai kebutuhan spesifik Anda. Bereksperimenlah dengan mereka dan temukan bagaimana mereka dapat membuat pekerjaan Anda dengan ekspresi reguler lebih mudah dan cepat.
Pertanyaan yang sering diajukan
Apa itu ekspresi reguler dalam JavaScript? Ekspresi reguler dalam JavaScript adalah pola pencarian yang digunakan untuk menemukan dan memanipulasi teks dalam string karakter.
Bagaimana cara membuat ekspresi reguler dalam JavaScript? Ekspresi reguler dalam JavaScript dibuat menggunakan kelas RegExp atau menggunakan literal /patrón/.
Apa perbedaan antara pengubah dan bendera dalam ekspresi reguler? Pengubah ditambahkan ke akhir ekspresi reguler dan mengubah perilakunya. Bendera ditambahkan setelah garis miring kedua saat membuat ekspresi reguler menggunakan kelas RegExp.
Apa perbedaan antara metode tersebut? match() dan metodenya test()? Metode match() Digunakan untuk menemukan semua kecocokan ekspresi reguler dalam string teks dan mengembalikan array dengan hasilnya. Metode test() Digunakan untuk memeriksa apakah ekspresi reguler memiliki kecocokan dalam string teks dan mengembalikan nilai boolean.
Bagaimana saya dapat menangkap nilai tertentu menggunakan grup dalam ekspresi reguler? Kelompok-kelompok ( ) dalam ekspresi reguler memungkinkan Anda menangkap subekspresi tertentu. Anda kemudian dapat merujuk grup ini menggunakan referensi \1, \2, Dll
Metode apa yang dapat saya gunakan untuk bekerja dengan ekspresi reguler di JavaScript? Beberapa metode yang berguna untuk bekerja dengan ekspresi reguler di JavaScript adalah match(), replace(), split() y test(). Masing-masing metode ini memiliki tujuannya sendiri dan dapat digunakan sesuai kebutuhan spesifik Anda.
Kesimpulan
Ekspresi reguler adalah alat yang ampuh untuk bekerja dengan teks di JavaScript. Memahami dasar-dasar , sintaks, dan teknik lanjutan dari ekspresi reguler akan memungkinkan Anda untuk mencari, mengganti, dan memanipulasi string teks secara efisien dan akurat. Dari pencocokan dasar hingga penggunaan pengubah, grup, dan metode berguna lainnya, Anda telah mempelajari cara memaksimalkan ekspresi reguler dalam proyek JavaScript Anda.
Ingatlah untuk berlatih dan bereksperimen dengan berbagai pola dan kasus penggunaan untuk memperkuat pemahaman dan keakraban Anda dengan ekspresi reguler. Jangan ragu untuk menggunakan ekspresi reguler untuk meningkatkan efisiensi dan kualitas kode Anda!