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

  1. (\.|\#)  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.
  2. ([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.
  3. (\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.
  4. (\{)  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 :P cok da şişmeyelim ama :D
  5. ([^\}\{]+) 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
  6. (}) 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

3 Responses to “regex ile css parser yapalım”

  1. Gercekten başarılı bir anlatım olmuş elinize sağlık.

  2. Burada resimleri ve linkleri nasıl alabiliriz. eger vakit bulursanız yukarıdaki gibi anlatım yapabilirseniz çok sevinirim kısa da olsa özellikleri bahsetseniz yeterli.. teşekkürler.

  3. 
    <a href="http://www.site.com/sayfa5.html" title="sayfa 5 e gidebilirsiniz" rel="nofollow"></a>
    <a href="http://www.site.com/sayfa5.html" title="sayfa 5 e git" rel="nofollow">sayfa 5...</a>
    

Leave a Reply

(required)

(required)


three × 5 =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

© 2012 Tufan Suffusion theme by Sayontan Sinha