Belajar Regex Javascript Untuk Level Pemula - CRUDPRO
Home  ›  javascript

Belajar Regex Javascript Untuk Level Pemula

Written By Friday, September 16, 2022

Buat Ekspresi Reguler pertama Anda

Ada dua cara untuk membuat ekspresi reguler, dengan menggunakan literal ekspresi reguler, atau dengan menggunakan konstruktor ekspresi reguler. Di bawah ini, Anda akan melihat contoh masing-masing metode. Masing-masing mewakili pola yang sama — karakter 'c' diikuti oleh 'a' diikuti oleh 't'.

// Regular Expression Literal - Uses slashes ( / ) to enclose
var option1 = /cat/;// Regular Expression Constructor
var option2 = new RegExp("cat");

Sebagai aturan umum, jika ekspresi reguler Anda akan tetap konstan, yaitu ekspresi Anda tidak akan berubah, yang terbaik adalah menggunakan literal regex. Jika ekspresi reguler Anda akan berubah, atau bergantung pada variabel lain, lebih baik menggunakan metode konstruktor.

RegExp.prototype.test()

Ingat ketika saya mengatakan ekspresi reguler adalah objek? Ini berarti mereka memiliki sejumlah metode yang dapat kita gunakan. Metode paling dasar adalah tes, yang mengembalikan Boolean:

  • Benar: string berisi kecocokan pola regex
  • Salah: tidak ditemukan kecocokan 
console.log(/cat/.test(“the cat says meow”));
// trueconsole.log(/cat/.test(“the dog says bark”));
// false

Lembar Cheat Regex Dasar

Sejujurnya, trik untuk mempelajari ekspresi reguler adalah dengan menghafal kelompok karakter umum dan simbol. Saya sangat menganjurkan Anda untuk meluangkan beberapa jam dan menghafal tabel di bawah ini, lalu kembali dan kita akan terus belajar. Jika Anda lebih suka belajar sambil membaca, saya akan tetap memperkenalkan semuanya seiring berjalannya waktu, Anda mungkin perlu merujuk kembali ke sini dari waktu ke waktu.

Simbol

  • . — (period) Matches any single character, except for line breaks.
  • * — Matches the preceding expression 0 or more times.
  • + — Matches the preceding expression 1 or more times.
  • ? — Preceding expression is optional (Matches 0 or 1 times).
  • ^ — Matches the beginning of the string.
  • $ — Matches the end of the string.

Kelompok karakter

  • \d — Mencocokkan karakter satu digit apa pun.
  • \w — Mencocokkan karakter kata apa pun (alfanumerik & garis bawah).
  • [XYZ] — Set Karakter: Mencocokkan karakter tunggal apa pun dari karakter di dalam tanda kurung. Anda juga dapat melakukan rentang seperti [A-Z]
  • [XYZ]+ — Mencocokkan satu atau lebih karakter mana pun dalam set.
  • [^A-Z] — Di dalam set karakter, ^ digunakan untuk negasi. Dalam contoh ini, cocokkan apa pun yang BUKAN huruf besar.

Flags:

  • Ada lima bendera opsional. Mereka dapat digunakan secara terpisah atau bersama-sama dan ditempatkan setelah garis miring penutup. Contoh: /[A-Z]/g Saya hanya akan memperkenalkan 2 di sini.
  • g — Pencarian global
  • i — pencarian peka huruf besar-kecil

Advanced

  • (x) — Menangkap Tanda kurung: Mencocokkan x dan mengingatnya sehingga kita dapat menggunakannya nanti.
  • (?:x) — Tanda kurung tidak menangkap: Cocok dengan x dan tidak mengingatnya.
  • x(?=y) — Lookahead: Cocokkan x hanya jika diikuti oleh y.

Test()-ing Pembelajaran kita:

Sebelum melompat ke proyek di bawah ini, mari kita uji beberapa konsep di atas. Katakanlah kita ingin menguji string untuk digit numerik apa pun. Kita dapat menggunakan \d untuk mencapai ini.

console.log(/\d/.test('12-34'));
// true

Di atas mengembalikan true selama setidaknya ada satu digit numerik dalam string. Bagaimana jika kita ingin mencocokkan formatnya? Kita dapat menggunakan beberapa karakter \d untuk menentukan format:

console.log(/\d\d-\d\d/.test('12-34'));
// trueconsole.log(/\d\d-\d\d/.test('1234'));
// false

Apa yang terjadi jika kita tidak peduli bagaimana mungkin angka sebelum dan sesudah ' - ' selama setidaknya ada satu? Kita dapat menggunakan + untuk mencocokkan \d satu kali atau lebih:

console.log(/\d+-\d+/.test('12-34'));
// trueconsole.log(/\d+-\d+/.test('1-234'));
// trueconsole.log(/\d+-\d+/.test('-34'));
// false

Untuk menyederhanakan, kita dapat menggunakan tanda kurung untuk mengelompokkan ekspresi. Katakanlah kita memiliki kucing yang mengeong dan kita ingin mencocokkannya dengan meong itu:

console.log(/me+(ow)+w/.test('meeeeowowoww'));
// true

Wow. OKE. Mari kita hancurkan itu. Ada banyak hal yang terjadi di sini.

/me+(ow)+w/m     => matching a single letter 'm'
e+    => matching the letter 'e' one or more times
(ow)+ => matching the letters 'ow' one or more times
w     => matching the letter 'w' once'm' + 'eeee' +'owowow' + 'w'

Seperti yang Anda lihat di atas, ketika operator seperti + digunakan segera setelah tanda kurung, mereka mempengaruhi seluruh isi tanda kurung tersebut.

Hal terakhir yang akan kita bahas sebelum masuk ke proyek. ? operator. Ini membuat karakter sebelumnya opsional. Seperti yang akan Anda lihat di bawah, kedua kasus uji kembali benar karena 's telah dianggap opsional.

console.log(/cats? says?/i.test('the Cat says meow'));
// trueconsole.log(/cats? says?/i.test('the Cats say meow'));
// true

Saya juga memasukkan flag /i di atas. Ini membuat pencarian kami tidak peka huruf besar-kecil, itulah sebabnya 'kucing' akan tetap cocok dengan 'Kucing'

Pertimbangan & Tips

  • Karena ekspresi reguler dibungkus dengan garis miring, jika Anda ingin mencari garis miring, Anda harus menghindarinya dengan garis miring terbalik. Hal yang sama berlaku untuk karakter seperti tanda tanya yang memiliki arti khusus. Berikut ini contoh cara menelusuri masing-masing: 
var slashSearch = /\//;
var questionSearch = /\?/;
  • \d sama dengan [0-9] : Masing-masing cocok dengan karakter digit
  • \w sama dengan [A-Za-z0-9_] : Each matches any single alphanumeric character or underscore

Proyek: Tambahkan spasi di CamelCase:

Dalam contoh ini kami benar-benar bosan dengan camelCase dan membutuhkan cara untuk menambahkan spasi di antara kata-kata. Berikut contohnya:

removeCc('camelCase') // => should return 'camel Case'

Dengan Regex, ada solusi yang sangat mudah. Pertama, kita perlu mencari semua huruf kapital. Kita dapat dengan mudah melakukan ini dengan pencarian set Karakter dan pengubah global:

This will match the C in 'camelCase'
/[A-Z]/g

Tapi sekarang, bagaimana kita menambahkan spasi sebelum C?

Kita perlu menggunakan Capturing Parentesis! Menangkap tanda kurung memungkinkan kita untuk mencocokkan suatu nilai, dan mengingatnya, sehingga kita dapat menggunakannya nanti!

Use capturing parenthesis to remember our matched capital letter
/([A-Z])/Access the captured value later with
$1

Di atas, Anda akan melihat kami menggunakan $1 untuk mengakses nilai yang diambil. Sebagai tambahan, jika kita memiliki dua set kurung tangkap, kita akan menggunakan $1 dan $2 untuk mereferensikan nilai yang ditangkap, dan seterusnya untuk jumlah kurung tangkap.

Catatan, jika Anda perlu menggunakan tanda kurung, tetapi tidak perlu menangkap nilainya, Anda dapat menggunakan tanda kurung yang tidak menangkap: (?:x) Dalam contoh ini, x cocok, tetapi tidak diingat.

Baiklah, kembali ke tugas yang ada. Bagaimana kita menerapkan tanda kurung penangkap? Dengan metode String .replace()! Sebagai argumen kedua, kami memasukkan '$1' Penting untuk menggunakan tanda kutip di sini.

function removeCc(str){
  return str.replace(/([A-Z])/g, '$1');  
}

Hmm, tapi tunggu, itu tidak berhasil? Mari kita lihat kodenya lagi. Kami mengambil huruf kapital kami, lalu menggantinya dengan huruf yang sama! Kami masih perlu menambahkan ruang kami! Di dalam kutipan kami, kami memasukkan spasi diikuti oleh variabel $1 kami Hasilnya adalah spasi setelah setiap huruf kapital

function removeCc(str){
  return str.replace(/([A-Z])/g, ' $1');  
}removeCc('camelCase') // 'camel Case'
removeCc('helloWorldItIsMe') // 'hello World It Is Me'

Proyek: Hapus Huruf Kapital:

Sekarang kita memiliki string dengan sekumpulan huruf kapital yang funky. Bisakah Anda mengetahui cara menghapusnya? Yang ini serupa, tetapi sedikit lebih rumit daripada proyek terakhir. Luangkan waktu sebentar dan coba cari tahu, lalu baca terus..

Pertama, kita perlu memilih semua huruf kapital. Ini mirip dengan di atas, pencarian set karakter dengan pengubah global:

/[A-Z]/g

Kami akan menggunakan metode ganti lagi, tetapi kali ini bagaimana kami membuat huruf kecil karakter?

function lowerCase(str){
  return str.replace(/[A-Z]/g, ???);  
}

Berikut petunjuknya: Dengan replace() Anda dapat menentukan fungsi sebagai parameter kedua.

Kami akan menggunakan fungsi panah untuk menghapus huruf besar dari nilai yang cocok. Saat menggunakan fungsi dengan replace() fungsi akan dipanggil setelah kecocokan dilakukan, dan hasil fungsi akan digunakan sebagai string pengganti. Lebih baik lagi, jika kecocokan bersifat global dan beberapa kecocokan ditemukan, fungsi tersebut akan dipanggil untuk setiap kecocokan yang ditemukan.

function lowerCase(str){
  return str.replace(/[A-Z]/g, (u) => u.toLowerCase());
}lowerCase('camel Case') // 'camel case'
lowerCase('hello World It Is Me') // 'hello world it is me'

Proyek: Kapitalisasi Huruf Pertama:

Baiklah, Anda memiliki semua pengetahuan untuk melakukan ini. Lihatlah cuplikan kode di bawah ini dan coba selesaikan sendiri sebelum membaca:

capitalize('camel case') // => should return 'Camel case'

Apakah kamu mengerti? Jika tidak, tidak apa-apa! Saya akan menunjukkan caranya…

Sekali lagi kita akan menggunakan fungsi panah dalam metode replace() kita. Namun kali ini, kita hanya perlu mencari karakter pertama dalam string kita. Ingatlah bahwa untuk inilah ^ digunakan.

Mari kita lihat ^ secara mendalam sebentar. Ingat contoh ini dari sebelumnya:

console.log(/cat/.test('the cat says meow'));
// true

Saat kita menambahkan ^ fungsi tidak lagi mengembalikan nilai true karena fakta bahwa 'cat' tidak berada di awal string:

console.log(/^cat/.test('the cat says meow'));
// false

Kami ingin ^ kami diterapkan ke karakter huruf kecil apa pun di awal string kami, jadi kami akan menambahkannya langsung sebelum set karakter kami [a-z]. Ini hanya akan menargetkan karakter pertama jika itu adalah huruf kecil.

/^[a-z]/

Perhatikan bahwa kami tidak lagi menggunakan pengubah global karena kami hanya menginginkan satu kecocokan. Sekarang, kita dapat memasukkan ekspresi reguler kita ke metode ganti kita dan menambahkan fungsi panah sebagai argumen kedua:

function capitalize(str){
  return str.replace(/^[a-z]/, (u) => u.toUpperCase());
}capitalize('camel case') // 'Camel case'
capitalize('hello world it is me') // 'Hello world it is me'

Proyek: Terus Belajar

Itu adalah akhir dari artikel ini, tetapi teruslah belajar. Beberapa ide proyek:

1. Bisakah Anda menggabungkan tiga fungsi sebelumnya menjadi satu fungsi yang mengubah string camelCase menjadi kalimat biasa?

2. Bisakah Anda menambahkan titik di akhir string?

3. Balikkan semuanya! Ubah string menjadi Hashtag camelCase

Posting proyek dan solusi Anda di komentar! Dan jangan lupa, ini hanyalah awal dari Regular Expressions, masih banyak lagi yang dapat Anda lakukan dengannya!