Bayangkan sebuah tugas praktik – kita memiliki sebuah nomor telepon "+7(903)-123-45-67", dan kita harus mengubah nomor telepon tersebut menjadi angka murni: 79031234567.
Untuk melakukan hal itu, kita harus menemukan apapun yang bukan merupakan angka. Kelas karakter dapat membantu membereskan hal tersebut.
Sebuah Kelas Karakter adalah sebuah notasi yang spesial yang membandingkan simbol apapun dengan aturan tertentu.
Untuk memulai, ayo kita explore kelas “angka” (digit). Kelas “angka” ditulis seperti \d dan dapat disamakan dengan “setiap angka yang ada”.
Untuk contoh, kita akan mencoba mencari angka pertama pada nomor telepon:
let str = "+7(903)-123-45-67";
let regexp = /\d/;
alert( str.match(regexp) ); // 7Tanpa tanda g, ekspresi regularnya hanya akan mencari satu kecocokan, yaitu angka pertama \d.
Coba kita tambahkan tanda g untuk mencari seluruh angka:
let str = "+7(903)-123-45-67";
let regexp = /\d/g;
alert( str.match(regexp) ); // array: 7,9,0,3,1,2,3,4,5,6,7
// kita coba untuk membuat "hanya angka" dari nomor teleponnya:
alert( str.match(regexp).join('') ); // 79031234567Itu adalah kelas karakter untuk angka. Tentu saja ada karakter kelas lainnya.
Yang paling banyak digunakan adalah:
\d(“d” untuk “digit” / “angka”)- Angka: adalah karakter dari
0sampai9. \s(“s” untuk “space” / “spasi” / untuk mencari whitespace)- Simbol space / spasi: termasuk spasi, tabs
\t, garis baru\ndan beberapa karakter lainnya yang jarang digunakan, seperti\v,\fdan\r. \w(“w” untuk “word” / “karakter kata”)- “karakter kata”: antara sebuah huruf dari alfabet latin atau sebuah angka atau sebuah underscore
_(a-z, A-Z, 0-9).\wtidak bisa digunakan untuk huruf yang bukan huruf latin (seperti cyrillic atau hindi).
Contohnya, \d\s\w menandakan sebuah “digit” yang diikuti dengan “karakter space” diikuti dengan “karakter kata”, seperti 1 a.
Regular ekspresi mungkin mengandung simbol dan kelas karakter.
Contoh, CSS\d cocok dengan string CSS dengan angka setelahnya:
let str = "Apakah CSS4 telah rilis?";
let regexp = /CSS\d/
alert( str.match(regexp) ); // CSS4Dan juga kita bisa menggunakan banyak kelas karakter:
alert( "I love HTML5!".match(/\s\w\w\w\w\d/) ); // ' HTML5'Kecocokannya (setiap karakter kelas regexp yang menghasilkan hasil yang sesuai):
Kelas kebalikan (Inverse Classes)
Untuk setiap kelas karakter yang ada terdapat sebuah “kelas kebalikan”, ditunjukan dengan huruf yang sama, tapi dengan huruf besar / kapital.
“Kebalikan” berarti kelas tersebut cocok dengan seluruh karakter lainnya, contoh:
\D- Bukan angka: karakter apapun kecuali
\d, contoh huruf. \S- Bukan spasi: karakter apapun kecuali
\s, contoh huruf. \W- Bukan karakter kata: apapun kecuali
\w, contoh huruf yang bukan latin atau sebuah spasi.
Pada awal bab kita melihat bagaimana cara membuat nomor telepon yang hanya angka dari string seperti +7(903)-123-45-67: cari seluruh angka dan gabungkan.
let str = "+7(903)-123-45-67";
alert( str.match(/\d/g).join('') ); // 79031234567Alternatif, cara pendeknya adalah dengan mencari karakter yang bukan angka dan hilangkan dari stringnya:
let str = "+7(903)-123-45-67";
alert( str.replace(/\D/g, "") ); // 79031234567Sebuah titik adalah “karakter apapun”
Sebuah titik . adalah sebuah kelas karakter spesial yang cocok “dengan karakter apapun kecuali garis baru”.
Contoh:
alert( "Z".match(/./) ); // ZAtau ditengah dari sebuah ekspresi regular:
let regexp = /CS.4/;
alert( "CSS4".match(regexp) ); // CSS4
alert( "CS-4".match(regexp) ); // CS-4
alert( "CS 4".match(regexp) ); // CS 4 (spasi juga merupakan karakter)Ingatlah bahwa titik berarti “karakter apapun”, tapi bukan sebuah “ketiadaan karakter”. Harusnya ada karakter yang mirip dengannya:
alert( "CS4".match(/CS.4/) ); // null, tidak ada yang cocok karena tidak terdapat karakter untuk titiknya.Titik secara literal adalah karakter apapun dengan tanda “s”
Pada dasarnya, sebuah titik tidak cocok dengan karakter garis baru \n.
Contoh, ekspresi regular A.B cocok dengan A, dan lalu B dengan karakter apapun diantaranya, kecuali garis baru \n:
alert( "A\nB".match(/A.B/) ); // null (tidak ada yang cocok)Terdapat beberapa situasi ketika kita ingin memperlakukan titik sebagai “karakter apapun”, garis baru termasuk.
Itulah yang dilakukan oleh s. Jika sebuah ekspresi regular memilikinya, maka sebuah titik . secara literal cocok dengan karakter apapun:
alert( "A\nB".match(/A.B/s) ); // A\nB (cocok!)Tanda s tidak didukung pada IE.
Beruntungnya, masih terdapat alternatif untuk hal itu yang mana dapat berjalan dimanapun. Kita bisa menggunakan regexp seperti [\s\S] untuk dicocokan dengan “karakter apapun” (pola ini akan dijelaskan pada bab Sets and ranges [...]).
alert( "A\nB".match(/A[\s\S]B/) ); // A\nB (cocok!)Pola [\s\S] bisa dikatakan: “sebuah karakter spasi ATAU bukan sebuah karakter spasi”. Dengan kata lain, “apapun”. Kita bisa menggunakan kelas komplemen pasangan lainnya, seperti [\d\D], itu tidak penting. Atau bahkan [^] – sama seperti mencocokan karakter apapun kecuali tidak ada.
Kita juga bisa menggunakan trik ini jika kita ingin dua bentuk “titik” didalam pola yang sama: titik yang sebenarnya . bertingkah seperti biasa (“tidak termasuk garis baru”), dan juga sebuah cara untuk mencocokan “karakter apapun” dengan [\s\S] atau sejenisnya.
Biasanya kita hanya memberikan sedikit perhatian pada spasi. Untuk kita string 1-5 dan 1 - 5 adalah hal yang hampir mirip.
Tapi jika sebuah ekspresi regular tidak memperhatikan spasinya, maka pencocokannya akan gagal.
Kita coba untuk mencari angka yang dipisahkan dengan tanda penghubung:
alert( "1 - 5".match(/\d-\d/) ); // null, tidak cocok!Sekarang kita benarkan dengan menambahkan spasi pada regexp-nya \d - \d:
alert( "1 - 5".match(/\d - \d/) ); // 1 - 5, sekarang pencocokannya bekerja
// atau kita bisa menggunakan kelas \s:
alert( "1 - 5".match(/\d\s-\s\d/) ); // 1 - 5, juga bekerjaSebuah spasi adalah sebuah karakter. Sama pentingnya dengan karakter lainnya
Kita tidak bisa menambah atau menghilangkan spasi dari ekspresi regular dan berharap pencocokanya akan berjalan sama.
Dengan kata lain, didalam ekspresi regular seluruh karakter bersifat penting, spasi pun sama.
Ringkasan
Terdapat karakter kelas:
\d– digits / Angka.\D– non-digits / Bukan angka.\s– simbol spasi, tabs, garis baru.\S– semuanya kecuali\s.\w– huruf latin, angka, underscore'_'.\W– semuanya kecuali\w..– karakter apapun jika dengan regexp tanda's', sebaliknya semuanya kecuali sebuah garis baru\n.
…Tapi ini belum semuanya!
Unicode encoding, digunakan oleh Javascript untuk string, menyediakan berbagai properti untuk karakter, seperti: bahasa mana yang cocok dengan surat ini (jika sebuah surat), tanda bacanya, dll.
We can search by these properties as well. That requires flag u, covered in the next article.
Tentu saja kita bisa mencari dengan propertinya. Yang mana membutuhkan tanda u, yang akan dibahas didalam bab selanjutnya.