JavaScript ile Düzenli İfadeler (Regular Expressions) 1

Öncelikle Regular Expressions ifadesini tanımlayalım. Türkçe karşılığı "Düzenli İfade" anlamına gelmektedir. Küçük bir örnekle; bir değişkenin sadece harf, sadece rakam vs.. şeklinde belirli bir kalıba uymasını sağlayan yapılardır. Web sitelerindeki kullanımına gelince örnekler çoğaltılabilir.
Birkaç kullanım alanını yazalım.
i) Üyelik sisteminde seçilen kullanıcı adının uygun formatta olması (a-z A-Z)
ii) Girilen şifrenin sadece sayısal olması (0-9)
iii) Eposta adresinin doğru formatta olması (abc@abc.com)
iv) Bir değişkenin belirli kalıba uygun olması (sayısal ve harf)
Gibi kullanım alanlarını örnek verebiliriz.

Not: ifadeler (desenler) // arasına yazılır.
Örnek: var desen = /düzenli ifade/;

Örneklere geçmeden önce, düzenli ifade yapısındaki metaları (bir nevi anahtarlar) inceleyelim.

Desen	Açıklama
\d	İfade içerisinde sayı arar. Sayı var ise true sonucunu verir. Sayı yok ise false sonucu döner.
[abcd]	Parantezler arasındaki herhangi bir harfi arar.

1) Verilen bir ifade içerisinde rakam (sayı) varlığını kontrol eden desen: \d

Örnek 1: "ontedi.com sitesi 9 yaşında" ifadesi içerisinde rakam barındırmaktadır. Dolayısıyla desenimizin sonucu true olacaktır

"\d" Deseni (Örnek 1)

var desen = /\d/;
var sonuc = desen.test("ontedi.com sitesi 9 yaşında");
alert(sonuc);

Örnek 1 Çıktısı

Örnek 2: "ontedi.com sitesi dokuz yaşında" ifadesi içerisinde rakam barındırmamaktadır. Dolayısıyla desenimizin sonucu false olacaktır

"\d" Deseni (Örnek 2)

var desen = /\d/;
var sonuc = desen.test("ontedi.com sitesi dokuz yaşında");
alert(sonuc);

Örnek 2 Çıktısı

Örnek 3: "Merhaba, ben Serkan" ifadesi içerisinde rakam barındırmamaktadır. Dolayısıyla desenimizin sonucu false olacaktır

"\d" Deseni (Örnek 3)

var desen = /\d/;
var sonuc = desen.test("Merhaba, ben Serkan");
alert(sonuc);

Örnek 3 Çıktısı

Örnek kod ile canlı test sürüşü yaparak mantığı biraz daha kavrayalım.

"\d" Deseni (Örnek Kod)

<input type="text" class="input" placeholder="Buraya bir şeyler yaz!" />
<button onclick="javascript:return fnDesen();">Girilen İfade İçerisinde Sayı Ara</button>
<p class="icerik"></p>
<script>
function fnDesen()
{
  var strDeger = document.querySelector('.input').value;
  var objHedef = document.querySelector('.icerik');
  var desen = /\d/;
  if (strDeger == '')
  {
    objHedef.innerHTML = "Lütfen test edilecek bir yazı giriniz";
  }
  else
  {
    if (desen.test(strDeger))
    {
      objHedef.innerHTML  = "<strong>" + strDeger + "</strong> cümlesinin içerisinde rakam var";
    }
    else
    {
      objHedef.innerHTML = "<strong>" + strDeger + "</strong> cümlesinin içerisinde rakam yok";
    }
  }
}
</script>

Örneğimizin HTML ve JavaScript betikleri hazırlandı. Şimdi bu betikler üzerinde denemeler yapalım.

"\d" Deseni (Örnek Kod Test Sürüşü)

---

2) Verilen bir ifade içerisinde herhangi bir değerin varlığını kontrol eden desen: []

Örnek 1: "Benim adım Serkan" ifadesi içerisinde "a", "b" veya "c" harflerinden en az biri barındırmaktadır. Dolayısıyla desenimizin sonucu true olacaktır

"[]" Deseni (Örnek 1)

var desen = /[abc]/;
var sonuc = desen.test("Benim adım Serkan");
alert(sonuc);

Örnek 2: "Kitap oku" ifadesi içerisinde "s", "e" veya "r" harflerinden en az birini barındırmamaktadır. Dolayısıyla desenimizin sonucu false olacaktır

"[]" Deseni (Örnek 2)

var desen = /[ser]/;
var sonuc = desen.test("Kitap oku");
alert(sonuc);

Örnek 3: "Bu elbise 20 liradır" ifadesi içerisinde "d", "n", "2", "m" haf veya rakamlarından en az birini barındırmaktadır. Dolayısıyla desenimizin sonucu true olacaktır

"[]" Deseni (Örnek 3)

var desen = /[dn2m]/;
var sonuc = desen.test("Bu elbise 20 liradır");
alert(sonuc);

"[]" Deseni (Test Sürüşü)