merhabalar,
regexp kategorimizi açmışken boş bırakmayalım ilk örneğimiz çok eğlenceli bir parser css parçalicaz. (:
ilk once Css betiğinin yapısını bi görelim
0
1
2
3
4
5
6
7
8
9
10
| #eleman{
font-size:11px;
padding:4px;
color:#fff;
}
.elemanlar{
background-color:#fff;
font-size:12px;
padding:4px;
color:#000;
} |
ilk once blokları bir birinden ayrımamız lazım yani #eleman1 ve .elemanlar kendi ozelliklerini taşıyorlar her birinin ozellikleri kendisine ozel olacağından bunları birbirinden ayırmamız şart
tek bloğun görüntüsü şu şekilde olur
0
| (\.|\#)?([A-Za-z0-9_-]+)(\s)*(\{)?([^\}\{]+)?(})? |
şimdi bunları gruplara ayırarak açıklayalım
- (\.|\#) bu elemanda 2 tane işaretçi kullandık biri (.)nokta diğeri (#)sharp bunları normal bir string olarak kullanacağımızdan başına (\)backslash koyduk arasındaki ((|)cizgi (: ) herhangi biri ile eşleşebilir anlamına geliyor. bunun hemen sonrasına koyduğumuz (?) soru işareti bu katar olmayadabilir anlamında yani 0 ve ya 1 defa bulunabilir anlamındaydı yani 1inci eleman bize null da gelebilir nokta da gelebilir sharp da gelebilr
csste nokta gelince class. sharp gelince id boş gelince de bunun tag olduğunu anlıyoruz.
- ([A-Za-z0-9_-]+) bu grupta bir karakter seti tanımladık . hazır setlerden faydalandık büyük harf kücük harfler ve 0 dan 9 a tüm rakamlar setler [] içinde tanımlanır ve herhangi biri oluna eşleşme kabul edilir. ] dan sonra koyduğumuz (+)artı bunların en az 1 tane içermesi gerektiğini belirtir 1den fazla da olabilir.
- (\s) parantez içinde s kullansaydık bize string olarak s yi belirticekti gerçekte string olan karakterleri işaretçi olarka kullanabilmek için yine başına (\)backslash yazıyoruz. space arıyoruz isimden hemen sonra ama sonunca (*) koyarak olmayadabilir birden fazla da olabilir diyoruz ve kullanıcı için oraya istediği kadar boşluk atabilme özgürlüğü veriyoruz.
- (\{) hemen sonrasında bir { süslü parantez aradık sonuna da ? koyduk yani ya 1 tane olucak ya da hiç olmayacak. aslında bu olmak zorunda neden ? koyduk elimize gelen eşleşen[4] içini kontrol edip nullsa kullanıcıyı uyarabilmek için bu kontrolu koyduk. hiç eşleşmemesi de tabi ki kullanıcıyı zorlar bir derleyici gibi düşünelim kendimizi
cok da şişmeyelim ama
- ([^\}\{]+) katarı oluşturan 5 inci grubumuz ise cok değişik (: [] set tanımlamak istemişiz ama içinde }{ ve ^var
başına konulan ^ bu setten birini içermemesi gerektiğini gösterir yani { ve } içermeyen bir set bunun sonuna bir de + koyduk en az 1 karakter içericek. bu grubun da sonuna ? koyduk ya hiç olmicak ya da 1 tane olucak ki zaten burayı sonsuza kadar da yazsanız burası 1 eleman döndürür ta ki siz } veya { koyana kadar. bu eleman boş dönerse bunu yorumlama dışında bırakabiliriz çunku bir property yazılmamıştır. bi de uyarı veririrz:P
- (}) bu da en son kapatma elemeanımız bununda yine sonuna ? koyduk ki yokluğunda da bize eşleşme hatası vermesin boş dönsün biz de bunu uyaralım
elemanları birbirinden ayırdık dizimiz 7 eleman olarka dönecektir 1 tanesi eşleşen kısm yani [0] eleman. diğer 6 elemean da yukarda anlattıklarım
şimdi bir de propertyleri ayrımaya geldi sıra
propertyler bize 5 inci elemanda dönüyordu şimdi 5 inci elemanı parse edelim
bize gelen 5 inci elemanın içeriği aşağıdaki gibi olur
0
1
2
3
| background-color:#fff;
font-size:12px;
padding:4px;
color:#000; |
düzenli ifadesini yazalımn
Pattern:
0
| ([A-Za-z\-]+)(:)([^;]+)(;)? |
bu da color:#fff; yapısının görüntüsü sonundaki noktali virgul olmasa da olur dedik bazen sonlara konulmuyor şimdi
şimdi burdan da bize 5 eleman dönecek 1 tanesi tamamı yani [0] eleman
1. eleman property adı : 2 eleman noktalı virgul 3 eleman değeri 4 eleman boş ya da noktalı virgul döner
ve biz de bunları istediğimiz şekilde yorumlar derler kullanırız artık
Testleriniz için Regexper exemi indirebilirsiniz.
http://www.tufyta.com/wp-content/uploads/2009/12/Regexper.zip