Regex Kullanımı JavaScript'te

JavaScript ekosisteminde metin işleme, doğrulama ve ayrıştırma işlemlerinin vazgeçilmez bir parçası olan düzenli ifadelerden (Regular Expressions, kısaca Regex) bahsetmek istiyorum. Geliştirdiğimiz hemen her uygulamada, kullanıcıdan gelen veriyi kontrol etmekten tutun da karmaşık log dosyalarını analiz etmeye kadar birçok senaryoda Regex'in gücüne ihtiyaç duyuyoruz. Peki, bu gücü JavaScript bağlamında nasıl efektif kullanırız, hangi metotlar işimize yarar ve nelere dikkat etmeliyiz? Hadi, bu konulara birlikte derinlemesine bir bakış atalım.

Regex'e Giriş: Neden İhtiyaç Duyarız?
Düşünsenize, bir kullanıcının e-posta adresini doğrulamanız gerekiyor ya da bir metin içinde belirli bir desenin kaç kez geçtiğini bulmalısınız. Belki de bir URL'den sadece alan adını çekip almak istiyorsunuz... Bu tür işlemleri standart string metotlarıyla yapmak ya çok karmaşık if-else bloklarına yol açar, ya da performans sorunları yaratır. İşte tam bu noktada Regex devreye giriyor. Desenleri tanımlamak ve bu desenlere göre metin üzerinde arama, değiştirme, bölme gibi operasyonları gerçekleştirmek için konsantre bir dil sunuyor bize. Bu dilin sözdizimi ilk başta biraz göz korkutucu gelebilir, kabul etmek lazım, ancak bir kez mantığını kavradığınızda kapılar ardına kadar açılıyor.

Temel Regex Sözdizimi ve Desen Tanımlama
JavaScript'te Regex tanımlamanın iki ana yolu var: literal sözdizimi ve RegExp kurucusu. Çoğunlukla literal sözdizimi tercih edilir, zira daha okunaklıdır ve performans açısından da genellikle daha avantajlıdır.

• Literal Sözdizimi: Eğik çizgiler arasına deseni yazarak oluşturulur.
  
  CODE Copy

  12
  const desen = /abc/; // "abc" metnini arar
  

  
  
• RegExp Kurucusu: Desen dinamik olarak oluşturulacaksa veya string bir değişkenden geliyorsa kullanılır.
  
  CODE Copy

  123
  const desenStr = "abc";
  const desen = new RegExp(desenStr);
  

Peki, bu desenlerin içine neler yazabiliriz? Karakter sınıfları, niteleyiciler ve çapalar gibi temel yapı taşları var.

• Karakter Sınıfları: Belirli karakter kümelerini temsil ederler.
  
  • . (nokta): Yeni satır karakteri hariç herhangi bir karakteri eşleştirir.
    
  • \d: Herhangi bir rakamı (0-9) eşleştirir. \D ise rakam olmayan herhangi bir karakteri.
    
  • \w: Herhangi bir kelime karakterini (harf, rakam veya alt çizgi) eşleştirir. \W ise kelime karakteri olmayan bir karakteri.
    
  • \s: Herhangi bir boşluk karakterini (boşluk, tab, yeni satır vb.) eşleştirir. \S ise boşluk olmayan bir karakteri.
    
  • [abc]: Köşeli parantez içindeki karakterlerden herhangi birini eşleştirir. Örneğin, [aeiou] bir sesli harfi eşleştirir.
    
  • [^abc]: Köşeli parantez içindeki karakterler dışındaki herhangi bir karakteri eşleştirir.
    
  • [a-z]: Bir aralıktaki karakterleri eşleştirir. Örneğin, [A-Z] büyük harfleri, [0-9] rakamları.
• Niteleyiciler (Quantifiers): Bir karakterin veya grubun kaç kez tekrarlanabileceğini belirtir.
  
  • [i]: Sıfır veya daha fazla eşleşme. (Örn: /a[/i]/ -> "", "a", "aa", ...)
    
  • +: Bir veya daha fazla eşleşme. (Örn: /a+/ -> "a", "aa", ...)
    
  • ?: Sıfır veya bir eşleşme. (İsteğe bağlı). (Örn: /colou?r/ -> "color" veya "colour")
    
  • {n}: Tam olarak n kez eşleşme. (Örn: /\d{3}/ -> üç rakam)
    
  • {n,}: En az n kez eşleşme. (Örn: /\d{2,}/ -> iki veya daha fazla rakam)
    
  • {n,m}: En az n, en fazla m kez eşleşme. (Örn: /\d{3,5}/ -> üç, dört veya beş rakam)
• Çapalar (Anchors): Eşleşmenin metnin neresinde olması gerektiğini belirtir.
  
  • ^: Metnin başlangıcı. (Örn: /^Merhaba/ -> "Merhaba dünya" eşleşir, "Dünya merhaba" eşleşmez)
    
  • $: Metnin sonu. (Örn: /dünya$/ -> "Merhaba dünya" eşleşir, "Dünya merhaba" eşleşmez)
• Alternasyon (Alternation): | karakteri, "veya" anlamına gelir.
  
  CODE Copy

  12
  const desen = /elma|armut/; // "elma" veya "armut" kelimesini eşleştirir.
  

  
  
• Kaçış Karakterleri (Escaping): Regex'te özel anlamı olan bir karakteri (örn: ., *, +, ?, ^, $, (, ), [, ], {, }, |, \) literal olarak eşleştirmek isterseniz, önüne ters eğik çizgi (\) koymalısınız.
  
  CODE Copy

  12
  const desen = /\./; // Literal bir noktayı eşleştirir, herhangi bir karakteri değil.
  

JavaScript'te Regex ile Çalışmak: String Metotları
JavaScript, string prototipine eklediği bazı metotlarla Regex kullanımını oldukça kolaylaştırır. Bunlar en sık kullandığımız yöntemlerdir diyebilirim.

[list]

String.prototype.match():
Bir stringdeki Regex desenine uyan tüm eşleşmeleri (veya ilk eşleşmeyi) bir dizi olarak döndürür. Eğer Regex'in g (global) bayrağı yoksa, sadece ilk eşleşmeyi döndürür ve yakalama gruplarını da içeren detaylı bir dizi objesi verir. g bayrağı varsa, tüm eşleşmeleri basit bir dizi olarak döndürür.

CODE Copy

12345678910
const metin = "Merhaba dünya, merhaba JavaScript!";
const desenTek = /merhaba/;
const desenGlobal = /merhaba/g;

console.log(metin.match(desenTek));
// Çıktı: ["merhaba", index: 0, input: "Merhaba dünya, merhaba JavaScript!", groups: undefined]

console.log(metin.match(desenGlobal));
// Çıktı: ["merhaba", "merhaba"]

Gördüğünüz gibi, global bayrak çok şeyi değiştiriyor. Dikkat etmek lazım.

String.prototype.search():
Bir string içinde Regex deseninin ilk eşleşmesinin indeksini döndürür. Eşleşme bulunamazsa -1 döndürür. Sadece varlığını ve konumunu merak ediyorsanız idealdir.

CODE Copy

123456
const metin = "JavaScript harika bir dil.";
const desen = /harika/;

console.log(metin.search(desen)); // Çıktı: 11 (index)
console.log(metin.search(/yok/));  // Çıktı: -1

String.prototype.replace():
Regex desenine uyan kısımları başka bir string veya bir fonksiyonun döndürdüğü değerle değiştirir. g bayrağı olmadan sadece ilk eşleşmeyi değiştirir.

CODE Copy

12345678910
const metin = "Kedi, köpek ve kedi.";
const desen = /kedi/;
const desenGlobal = /kedi/g;

console.log(metin.replace(desen, "kuş"));
// Çıktı: "Kuş, köpek ve kedi."

console.log(metin.replace(desenGlobal, "kuş"));
// Çıktı: "Kuş, köpek ve kuş."

replace() metodu yakalama gruplarıyla birleşince gerçekten güçlü hale geliyor. Örneğin, bir tarihin formatını değiştirmek isteyebilirsiniz:

CODE Copy

123456
const tarih = "Bugün 2023-11-23.";
const desenTarih = /(\d{4})-(\d{2})-(\d{2})/; // Yıl, Ay, Gün yakalama grupları

console.log(tarih.replace(desenTarih, "$3.$2.$1"));
// Çıktı: "Bugün 23.11.2023."

Burada $1, $2, $3 sırasıyla yakalama gruplarını temsil ediyor.

String.prototype.split():
Bir stringi, Regex desenine uyan yerlerden bölerek bir dizi oluşturur.
[code]
const metin = "elma,armut;kiraz.muz";
const desenAyirici = /[,.;]/; // Virgül, noktalı virgül veya nokta ile ayır

console.log(metin.split(desenAyirici));
// Çıktı: ["elma