Bireysel Mesaj Gösterim Modu

Görüntülenme: 26128
RegExp ve Javascript
2011/03/19 5:23
Bildir! Alıntı ile cevap yaz Oyla! (0 oy)

Son günlerde JavaScript ile de kullanılabilen RegExp ifadelerine gereksinim duymaya başladım ve konuyu araştırmaya başladım.

Yer yer karşılaştığım bazı desenler ve ürettikleri sonuçları anlamakta güçlük çektim. O halde bilmediğim bazı noktalar olmalıydı, diye düşünerek daha detaylı araştırma ve incelemelere girişmek durumunda kaldım.

Ulaştığım sonuçları daha sonraları da gereksinebileceğimi öngörerek, çözümlediğim kısımları not etmenin uygun olabileceğine kanaat getirdim. Öyle ya, aynı meseleleri sil baştan araştırmak yerine, geçmiş bulgularımdan yararlansam fena mı olurdu? :)

Geçen senelerde bu "Regular Expressions" konusunu oluşturmakla pek bir akıllılık etmişim... Başkalarının işine yaradı mı bilmem ama, benim için ara ara uğradığım ve takıldığım meselelere hızla çözüm bulduğum bir başvuru kaynağı niteliğinde oldu ve olmaya devam ediyor. 

Neyse, sözü uzatmayayım; odaklanmam gereken kısmı unutacağım değilse. :)


Şu örnek beni haylice oyaladı:

var str = "Watch out for the rock!".match(/r?or?/g)

str then contains ["o","or","ro"]

Burada ilk dikkatimi çeken husus, sonucun bir dizi şeklinde str değişkenine atanmış olmasıdır.
Ne güzel ki, bunun g parametresi sayesinde oluştuğunu anlamam uzun sürmedi. 

g (global search): The global search flag makes the RegExp search for a pattern throughout the string, creating an array of all occurrences it can find matching the given pattern.

Gelgelelim, üretilen sonuçları anlamlandırmakta hayli güçlük çektim ve sinir oldum. :)
Araştırmalar nihayetinde şöyle bir bilgi buldum. Ama buna rağmen umduğum sonuç çıkmıyordu.

? (question mark): Makes the preceding item optional. Greedy, so the optional item is included in the match if possible.
abc? matches ab or abc

Aha da bir şeyi şimdi farkettim!
Açıklamadaki "preceding" ifadesini "proceeding" diye okuyormuşum ben. :P
Haliyle ben sonraki karakterin es geçilmesini bekliyor ve bu yüzden sinir oluyormuştum. Oysa seçmeli olan kısım önceki imiş.
Beni onca gıcık eden şey bu muydu yani!? :)


İşin aslı, elimde bulunan ham bir veri içerisinden istediğim değerleri ayıklamak ve onları işlemlerde kullanabilmek derdindeyim.

Ham veri aşağıdaki gibidir. Kalın olarak vurgulanan değerleri elde etmek ve onları toplamak istemekteyim.

<graph caption='Rented Referral Click Statistics for R518532' bgSWF='graphbg.jpg' yAxisMinValue='0' yAxisMaxValue='10' decimalPrecision='0' formatNumberScale='0' showValues='0' showLabels='0' labelDisplay='NONE' showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' divLineAlpha='20' alternateHGridAlpha='5' ><categories showLabel='0'><category name='03-04-11' showName='0'/><category name='03-05-11' showName='0'/><category name='03-06-11' showName='0'/><category name='03-07-11' showName='0'/><category name='03-08-11' showName='0'/><category name='03-09-11' showName='0'/><category name='03-10-11' showName='0'/><category name='03-11-11' showName='0'/><category name='03-12-11' showName='0'/><category name='03-13-11' showName='0'/><category name='03-14-11' showName='0'/><category name='03-15-11' showName='0'/><category name='03-16-11' showName='0'/><category name='Yesterday' showName='0'/><category name='Today' showName='0'/></categories><dataset seriesName='Referral Clicks' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'><set label='03-04-11' value='5'/><set label='03-05-11' value='2'/><set label='03-06-11' value='0'/><set label='03-07-11' value='4'/><set label='03-08-11' value='0'/><set label='03-09-11' value='3'/><set label='03-10-11' value='1'/><set label='03-11-11' value='3'/><set label='03-12-11' value='5'/><set label='03-13-11' value='0'/><set label='03-14-11' value='3'/><set label='03-15-11' value='4'/><set label='03-16-11' value='3'/><set label='Yesterday' value='3'/><set label='Today' value='0'/></dataset><dataset seriesName='Referral Clicks Credited' color='FFFF00' anchorBorderColor='FFFF00' anchorBgColor='FFFF00'><set label='03-04-11' value='5'/><set label='03-05-11' value='2'/><set label='03-06-11' value='0'/><set label='03-07-11' value='4'/><set label='03-08-11' value='0'/><set label='03-09-11' value='3'/><set label='03-10-11' value='1'/><set label='03-11-11' value='3'/><set label='03-12-11' value='5'/><set label='03-13-11' value='0'/><set label='03-14-11' value='3'/><set label='03-15-11' value='4'/><set label='03-16-11' value='3'/><set label='Yesterday' value='3'/><set label='Today' value='0'/></dataset></graph>

İşte gerekli verileri JS ve RegExp ile ayıklayabilmek için saatlerdir verdiğim mücadele, mutlu sona ulaşmış bulunuyor. 
 

var re = /<dataset seriesName='Referral Clicks Credited'.*<set label=.*? value='.*?'\/>.*?<\/dataset>/g;
var str = chart_518532.variables.dataXML; //Ham veri kaynağı
var m;
str=str.match(re);//Hedeflenen alt bölüm içeriği alınsın
alert(str);

re=/<set label=.*? value='(.*?)'\/>/g;
var myArr = new Array();

while ( m = re.exec(str) ) {
    myArr.push(m[1]); //İlk grup diziye eklensin.
}
// alert(myArr); // Sonuç: ", 5, 2, 0, 4, 0, 3, 1, 3, 5, 0, 3, 4, 3, 3, 0"

var TotalClick=0;
for(var i=0; i<myArr.length; i++){
    TotalClick += parseInt(myArr[i]);
}
alert(TotalClick); //Sonuç: 36. Elemanların toplamı

Aslında söz konusu örnek veri XML biçiminde olduğu için, çok daha pratik yollarla ve kısa sürede belirtilen değerlerin elde edilmesi de mümkün idi. Ancak JS ile RegExp konusunda gelişmiş bazı uygulamalarla ilgilenmek istedim, sanırım. :P


Daha önce pek dikkatimi çekmeyen \1 benzeri bir ifadenin gücünü hissettim bugün. :)

\n (Backreferences): Backreferences are references to the same thing as a previously captured match. n is a positive nonzero integer telling the browser which captured match to reference to.

/(\S)\1(\1)+/g
matches all occurrences of three equal non-whitespace characters following each other.

/<(\S+).*>(.*)<\/\1>/
matches any tag.
matches '<div id="me">text</div>' in "text<div id=\"me\">text</div>text".


Dikkat çeken örnekler:

var mystring="We read 2 chapters in 3 days"
var needle=/(\d+) chapters/

mystring.match(needle) //matches "2 chapters"
alert(RegExp.$1) //alerts captured subpattern, or "2"

Buradaki, RegExp.$1 ifadesi, işlenen son RegEx komutundan türetiliyor sanki. 
Değişik kullanımlar:

"m1gin".match(/m(.*?)gin/g);
RegExp.$1; // Sonuç 1

var re = /m(.*?)gin/g;
re.exec(/mbirgin/); // veya re.exec("mbirgin")
RegExp.$1 // sonuç: bir

Gruplama Örneği:

var str="";
var myregexp = /\d (\w)/g;
var subject="1 a,2 b,3 c,4 d";
var match = myregexp.exec(subject);
while (match != null) {
    str+="\n matched text: " + match[0];
    str+=" - match start: " +match.index;
    str+=" - capturing group 1: " + match[1];
    match = myregexp.exec(subject);
}
alert(str);

Sonuç: 
matched text: 1 a - match start: 0 - capturing group 1: a
matched text: 2 b - match start: 4 - capturing group 1: b
matched text: 3 c - match start: 8 - capturing group 1: c
matched text: 4 d - match start: 12 - capturing group 1: d

Yeri gelmişken, Javascript ile örnek RegExp kullanımlarını ekleyerek bitireyim.

RegExp.exec(string): Applies the RegExp to the given string, and returns the match information.

var match = /s(amp)le/i.exec("Sample text")
match then contains ["Sample","amp"]

* * *

RegExp.test(string): Tests if the given string matches the Regexp, and returns true if matching, false if not.

var match = /sample/.test("Sample text")
match then contains false

* * *

String.match(pattern): Matches given string with the RegExp. With g flag returns an array containing the matches, without g flag returns just the first match or if no match is found returns null.

var str = "Watch out for the rock!".match(/r?or?/g)
str then contains ["o","or","ro"]

* * *

String.search(pattern): Matches RegExp with string and returns the index of the beginning of the match if found, -1 if not.

var ndx = "Watch out for the rock!".search(/for/)
ndx then contains 10

* * *

String.replace(pattern,string): Replaces matches with the given string, and returns the edited string.

var str = "Liorean said: My name is Liorean!".replace(/Liorean/g,'Big Fat Dork')
str then contains "Big Fat Dork said: My name is Big Fat Dork!"

* * *

String.split(pattern): Cuts a string into an array, making cuts at matches.

var str = "I am confused".split(/\s/g)
str then contains ["I","am","confused"]

 Yararlanılan Kaynaklar: 

  • http://www.evolt.org/node/36435
  • http://www.javascriptkit.com/jsref/regexp.shtml
  • http://stackoverflow.com/questions/5166862/javascript-regular-expression-iterator-to-extract-groups

 

İngilizce kelime ezberleme oyunu: vav.mbirgin.com
Abonelik Bilgisi Abonelik
Kullanıcı Adı:
Parola:
Bilgi Hatırlatma Yeni Üyelik
İletişim | Kullanım Şartları | Reklam Bilgileri | Tüm Üyeler | Ne Nasıl Yapılır? | Arama | RSS | Twitter | Facebook | Youtube

Son Üyeler: krmkdr, melis, Gundzilla, Ebenin, guest3,
Son Oturumlar: