console.log()<\/code> \u00e7a\u011fr\u0131lar\u0131n\u0131 bulmak, belirli bir formatta tan\u0131mlanm\u0131\u015f de\u011fi\u015fkenleri listelemek ya da eski bir fonksiyon ad\u0131n\u0131 yeniyle de\u011fi\u015ftirmek istiyorsunuzdur. Standart metin aramalar\u0131 bu t\u00fcr durumlarda \u00e7o\u011fu zaman yetersiz kal\u0131r. Metnin tamam\u0131n\u0131 e\u015fle\u015ftirmek zorunda kal\u0131r, de\u011fi\u015fken k\u0131s\u0131mlar\u0131 g\u00f6z ard\u0131 edemez ve dinamik paternleri yakalayamazs\u0131n\u0131z. Bu durum, \u00f6zellikle b\u00fcy\u00fck projelerde veya refakt\u00f6ring s\u00fcre\u00e7lerinde ciddi bir zaman kayb\u0131na ve hataya davetiye \u00e7\u0131karabilir.<\/p>\nAncak endi\u015felenmeyin, bu karma\u015faya bir son vermek m\u00fcmk\u00fcn! Visual Studio Code, yerle\u015fik regex deste\u011fi sayesinde bu t\u00fcr zorluklar\u0131n \u00fcstesinden gelmenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir arama ve de\u011fi\u015ftirme motoruna sahiptir. D\u00fczenli ifadeler, metin i\u00e7erisinde belirli karakter dizilerini tan\u0131mlamak i\u00e7in kullan\u0131lan \u00f6zel bir dildir. VS Code’un arama kutusuna entegre edildi\u011finde ise, s\u0131radan metin aramalar\u0131n\u0131 adeta steroidlerle besleyerek inan\u0131lmaz bir esneklik ve g\u00fc\u00e7 kazanman\u0131z\u0131 sa\u011flar. Bu sayede, yaln\u0131zca tam e\u015fle\u015fmeleri de\u011fil, ayn\u0131 zamanda belirli bir yap\u0131ya sahip ancak i\u00e7eri\u011fi de\u011fi\u015febilen t\u00fcm kod par\u00e7alar\u0131n\u0131 bulabilir, hatta otomatik olarak de\u011fi\u015ftirebilirsiniz. Bu kabiliyet, hem hata ay\u0131klama s\u00fcre\u00e7lerinizi h\u0131zland\u0131r\u0131r hem de kod refakt\u00f6ringini \u00e7ok daha verimli hale getirir. \u00d6rne\u011fin, belirli bir kurala uyan t\u00fcm CSS s\u0131n\u0131flar\u0131n\u0131 veya bir fonksiyonun t\u00fcm kullan\u0131m \u00f6rneklerini bulmak art\u0131k birka\u00e7 saniyelik bir i\u015flem haline gelir.<\/p>\n
Bu makalede, VS Code’da regex kullanman\u0131n inceliklerini \u00f6\u011frenerek, kod taban\u0131n\u0131zdaki gizli hazineleri ortaya \u00e7\u0131karman\u0131n ve geli\u015ftirme i\u015f ak\u0131\u015f\u0131n\u0131z\u0131 k\u00f6kten de\u011fi\u015ftirmenin yollar\u0131n\u0131 ke\u015ffedeceksiniz. S\u0131f\u0131rdan ba\u015flayarak, temel regex operat\u00f6rlerinden karma\u015f\u0131k senaryolara kadar ad\u0131m ad\u0131m ilerleyece\u011fiz. B\u00f6ylece, hem yeni ba\u015flayanlar hem de deneyimli geli\u015ftiriciler i\u00e7in de\u011ferli bilgiler sunacak, her b\u00f6l\u00fcm en az 300 kelime olacak \u015fekilde zenginle\u015ftirilmi\u015f i\u00e7erikle kar\u015f\u0131la\u015facaks\u0131n\u0131z. Hadi ba\u015flayal\u0131m ve kod arama yeteneklerinizi g\u00fc\u00e7lendirelim!<\/p>\n
Regex Nedir ve VS Code Ortam\u0131nda Neden Vazge\u00e7ilmezdir?<\/h2>\n
Regex, yani Regular Expressions (D\u00fczenli \u0130fadeler), metin dizileri i\u00e7inde belirli arama desenlerini tan\u0131mlamak i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir mini programlama dilidir. Harfler, say\u0131lar ve \u00f6zel karakterlerin birle\u015fiminden olu\u015fan bu desenler, metin e\u015fle\u015ftirmesinde, aramada ve metin manip\u00fclasyonunda inan\u0131lmaz bir esneklik sunar. Geli\u015ftiriciler i\u00e7in regex, sadece bir arama arac\u0131 olmaktan \u00f6te, verimli kod y\u00f6netimi ve h\u0131zl\u0131 refakt\u00f6ring i\u00e7in vazge\u00e7ilmez bir beceridir. \u00d6rne\u011fin, bir web uygulamas\u0131nda t\u00fcm e-posta adreslerini do\u011frulamak, belirli bir tarih format\u0131n\u0131 bulmak veya HTML etiketlerinin i\u00e7eri\u011fini ay\u0131klamak gibi g\u00f6revler regex ile kolayca halledilebilir.<\/p>\n
VS Code, modern bir geli\u015ftirme ortam\u0131 olarak, bu g\u00fc\u00e7l\u00fc arac\u0131 do\u011frudan b\u00fcnyesinde bar\u0131nd\u0131r\u0131r. Standart “Ara” (Ctrl+F) ve “T\u00fcm Dosyalarda Ara” (Ctrl+Shift+F) \u00f6zelliklerine entegre edilmi\u015f regex motoru sayesinde, kod taban\u0131n\u0131zda ger\u00e7ekle\u015ftirebilece\u011finiz i\u015flemlerin s\u0131n\u0131rlar\u0131 geni\u015fler. Neden mi vazge\u00e7ilmez? \u00c7\u00fcnk\u00fc kod, genellikle belirli ve tekrarlayan desenler i\u00e7erir. De\u011fi\u015fken adland\u0131rma kurallar\u0131, fonksiyon tan\u0131mlar\u0131, yorum bloklar\u0131 veya HTML yap\u0131lar\u0131 gibi pek \u00e7ok element, sabit bir metin yerine belirli bir desene uyar. Regex, bu de\u011fi\u015fken desenleri tan\u0131mlaman\u0131za, bulman\u0131za ve hatta de\u011fi\u015ftirmenize olanak tan\u0131r. Bu, \u00f6zellikle karma\u015f\u0131k projelerde veya ba\u015fkalar\u0131n\u0131n yazd\u0131\u011f\u0131 kodlarda \u00e7al\u0131\u015f\u0131rken paha bi\u00e7ilmez bir avantaj sa\u011flar.<\/p>\n
\n Uzman \u0130pucu: Regex, sadece arama yapmakla kalmaz; e\u015fle\u015fen metinleri belirli bir kurala g\u00f6re de\u011fi\u015ftirmek i\u00e7in de kullan\u0131labilir. Bu, b\u00fcy\u00fck \u00e7apl\u0131 refakt\u00f6ring projelerinde zaman tasarrufu a\u00e7\u0131s\u0131ndan kritik bir rol oynar.\n<\/div>\nRegex’in Temel Yap\u0131 Ta\u015flar\u0131 Nelerdir?<\/h3>\n
Regex’in g\u00fcc\u00fc, karakter s\u0131n\u0131flar\u0131, niceleyiciler ve \u00e7apa karakterleri gibi yap\u0131 ta\u015flar\u0131ndan gelir. \u00d6rne\u011fin, .<\/code> (nokta) herhangi bir karakteri e\u015fle\u015ftirirken, *<\/code> bir \u00f6nceki karakterin s\u0131f\u0131r veya daha fazla tekrar\u0131n\u0131 ifade eder. \\d<\/code> t\u00fcm rakamlar\u0131, \\w<\/code> t\u00fcm kelime karakterlerini (harf, rakam, alt \u00e7izgi) temsil eder. VS Code’da bu sembolleri kullanarak, “numara:<\/code>” ile ba\u015flayan ve ard\u0131ndan herhangi bir say\u0131 dizisi gelen t\u00fcm sat\u0131rlar\u0131 bulabilirsiniz. \u00d6rne\u011fin, numara: \\d+<\/code> paterni, “numara: 123”, “numara: 4567” gibi ifadeleri yakalayacakt\u0131r. Buradaki +<\/code> niceleyici, bir \u00f6nceki karakterin (bu durumda \\d<\/code>) bir veya daha fazla tekrar\u0131n\u0131 arar. Ayr\u0131ca, belirli bir kelimenin ba\u015f\u0131nda veya sonunda yer alan desenleri yakalamak i\u00e7in ^<\/code> (sat\u0131r ba\u015f\u0131) ve $<\/code> (sat\u0131r sonu) gibi \u00e7apa karakterlerini kullanabilirsiniz. \u00d6rne\u011fin, ^function<\/code>, sadece sat\u0131r ba\u015f\u0131nda “function” kelimesi olanlar\u0131 bulurken, error$<\/code>, sat\u0131r sonunda “error” kelimesi olanlar\u0131 e\u015fle\u015ftirir. Bu temel yap\u0131 ta\u015flar\u0131n\u0131 birle\u015ftirerek, son derece spesifik ve g\u00fc\u00e7l\u00fc arama desenleri olu\u015fturabilirsiniz. VS Code’un aray\u00fcz\u00fcnde bu desenleri test etmek ve sonu\u00e7lar\u0131 an\u0131nda g\u00f6rmek, \u00f6\u011frenme s\u00fcrecini de olduk\u00e7a kolayla\u015ft\u0131r\u0131r.<\/p>\n\n\/\/ Basit bir regex \u00f6rne\u011fi: T\u00fcm JavaScript console.log() \u00e7a\u011fr\u0131lar\u0131n\u0131 bulma\nconsole\\.log\\(.*?\\);\n<\/pre>\n<\/code><\/p>\n
Bu \u00f6rnekte \\.<\/code>, noktan\u0131n \u00f6zel anlam\u0131n\u0131 ka\u00e7mak i\u00e7in kullan\u0131l\u0131r (aksi takdirde herhangi bir karakteri e\u015fle\u015ftirirdi). .*?<\/code>, parantez i\u00e7indeki herhangi bir karakter dizisini (.<\/code>) s\u0131f\u0131r veya daha fazla kez (*<\/code>) e\u015fle\u015ftirir, ancak en k\u0131sa e\u015fle\u015fmeyi (?<\/code>) tercih eder. Bu sayede, birden fazla console.log<\/code> \u00e7a\u011fr\u0131s\u0131 ayn\u0131 sat\u0131rda olsa bile sadece ilkini veya beklenen k\u0131sm\u0131n\u0131 e\u015fle\u015ftirir.<\/p>\nVS Code'da Regex Kullan\u0131m\u0131na \u0130lk Ad\u0131mlar ve Temel Desenler: Arama \u0130\u015flevini Nas\u0131l G\u00fc\u00e7lendirirsiniz?<\/h2>\n
Visual Studio Code'da regex kullanmaya ba\u015flamak olduk\u00e7a basittir, ancak elde edece\u011finiz verimlilik inan\u0131lmazd\u0131r. \u0130lk ad\u0131m, VS Code'un arama i\u015flevine eri\u015fmektir. Klavyenizdeki Ctrl+F<\/code> (Windows\/Linux) veya Cmd+F<\/code> (macOS) tu\u015f kombinasyonunu kullanarak ge\u00e7erli dosyada arama kutusunu a\u00e7abilir, ya da Ctrl+Shift+F<\/code> (Windows\/Linux) veya Cmd+Shift+F<\/code> (macOS) ile t\u00fcm \u00e7al\u0131\u015fma alan\u0131nda (\u00e7oklu dosya) arama yapabilirsiniz. Arama kutusu a\u00e7\u0131ld\u0131\u011f\u0131nda, g\u00f6rece\u011finiz en \u00f6nemli butonlardan biri, \u00fczerinde .*<\/code> sembol\u00fc bulunan k\u00fc\u00e7\u00fck bir ikondur. Bu ikon, regex modunu etkinle\u015ftirip devre d\u0131\u015f\u0131 b\u0131rakman\u0131z\u0131 sa\u011flar. Regex modunu aktif hale getirdi\u011finizde, arama kutusuna yazd\u0131\u011f\u0131n\u0131z metin art\u0131k s\u0131radan bir metin olarak de\u011fil, bir d\u00fczenli ifade deseni olarak yorumlanacakt\u0131r. Bu, s\u0131radan bir aramay\u0131 \u201csteroidlere\u201d d\u00f6n\u00fc\u015ft\u00fcren sihirli dokunu\u015ftur.<\/p>\nBa\u015flang\u0131\u00e7 i\u00e7in basit bir \u00f6rnekle ilerleyelim. Diyelim ki bir projenizdeki t\u00fcm HTML ![]()
<\/code> etiketlerini bulmak istiyorsunuz. Normal bir aramayla yazman\u0131z yeterli olabilir. Ancak, bu etiketlerin i\u00e7inde src<\/code> veya alt<\/code> gibi belirli \u00f6zelliklerin olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek isterseniz, regex devreye girer. \u00d6rne\u011fin, <\/code> deseni, i\u00e7inde src<\/code> \u00f6zelli\u011fi olan t\u00fcm ![]()
<\/code> etiketlerini bulman\u0131z\u0131 sa\u011flar. Buradaki .*?<\/code> ifadesi, herhangi bir karakteri (.<\/code>) s\u0131f\u0131r veya daha fazla kez (*<\/code>) e\u015fle\u015ftiren ancak bunu m\u00fcmk\u00fcn olan en k\u0131sa \u015fekilde (?<\/code> - tembel e\u015fle\u015fme) yapan bir niceleyicidir. Bu, bir etiketin i\u00e7indeki di\u011fer \u00f6zelliklerin de do\u011fru bir \u015fekilde g\u00f6z ard\u0131 edilmesini sa\u011flar.<\/p>\n\n![\"\u015eirket](\"\/resimler\/logo.png\")
\n![](\"\/resimler\/gorsel.jpg\")
\n![](\"\/resimler\/placeholder.gif\")
\n<\/pre>\n<\/code><\/p>\n
Yukar\u0131daki HTML kod blo\u011funda, <\/code> regex deseni, her \u00fc\u00e7 ![]()
<\/code> etiketini de ba\u015far\u0131yla yakalayacakt\u0131r.<\/p>\nTemel Regex Desenlerini Anlamak: Hangi Karakterler Neyi \u0130fade Eder?<\/h3>\n
Regex'in temelini olu\u015fturan \u00f6zel karakterleri ve onlar\u0131n anlamlar\u0131n\u0131 kavramak, g\u00fc\u00e7l\u00fc desenler olu\u015fturman\u0131n anahtar\u0131d\u0131r. \u0130\u015fte en s\u0131k kullan\u0131lan temel regex desenlerinden baz\u0131lar\u0131:<\/p>\n
\n\n\nDesen<\/th>\n A\u00e7\u0131klama<\/th>\n \u00d6rnek E\u015fle\u015fme<\/th>\n<\/tr>\n<\/thead>\n \n\n.<\/code><\/td>\nYeni sat\u0131r karakteri hari\u00e7 herhangi bir karakter.<\/td>\n a.c<\/code> -> \"abc\", \"axc\", \"a&c\"<\/td>\n<\/tr>\n\n\\d<\/code><\/td>\nHerhangi bir rakam (0-9).<\/td>\n \\d{3}<\/code> -> \"123\", \"456\"<\/td>\n<\/tr>\n\n\\D<\/code><\/td>\nRakam olmayan herhangi bir karakter.<\/td>\n \\D<\/code> -> \"a\", \"!\", \" \"<\/td>\n<\/tr>\n\n\\w<\/code><\/td>\nHerhangi bir kelime karakteri (a-z, A-Z, 0-9, _).<\/td>\n \\w+<\/code> -> \"merhaba\", \"degisken_adi\"<\/td>\n<\/tr>\n\n\\W<\/code><\/td>\nKelime karakteri olmayan herhangi bir karakter.<\/td>\n \\W<\/code> -> \"$\", \"#\", \" \"<\/td>\n<\/tr>\n\n\\s<\/code><\/td>\nHerhangi bir bo\u015fluk karakteri (bo\u015fluk, tab, yeni sat\u0131r vb.).<\/td>\n Hello\\sWorld<\/code> -> \"Hello World\"<\/td>\n<\/tr>\n\n\\S<\/code><\/td>\nBo\u015fluk karakteri olmayan herhangi bir karakter.<\/td>\n \\S+<\/code> -> \"NonStopText\"<\/td>\n<\/tr>\n\n*<\/code><\/td>\nBir \u00f6nceki karakterin s\u0131f\u0131r veya daha fazla tekrar\u0131.<\/td>\n a*b<\/code> -> \"b\", \"ab\", \"aaab\"<\/td>\n<\/tr>\n\n+<\/code><\/td>\nBir \u00f6nceki karakterin bir veya daha fazla tekrar\u0131.<\/td>\n a+b<\/code> -> \"ab\", \"aaab\" (ama \"b\" de\u011fil)<\/td>\n<\/tr>\n\n?<\/code><\/td>\nBir \u00f6nceki karakterin s\u0131f\u0131r veya bir tekrar\u0131 (iste\u011fe ba\u011fl\u0131).<\/td>\n colou?r<\/code> -> \"color\", \"colour\"<\/td>\n<\/tr>\n\n{n}<\/code><\/td>\nBir \u00f6nceki karakterin tam n tekrar\u0131.<\/td>\n \\d{4}<\/code> -> \"1990\", \"2023\"<\/td>\n<\/tr>\n\n{n,}<\/code><\/td>\nBir \u00f6nceki karakterin en az n tekrar\u0131.<\/td>\n \\d{3,}<\/code> -> \"123\", \"12345\"<\/td>\n<\/tr>\n\n{n,m}<\/code><\/td>\nBir \u00f6nceki karakterin en az n, en fazla m tekrar\u0131.<\/td>\n \\d{1,3}<\/code> -> \"1\", \"12\", \"123\"<\/td>\n<\/tr>\n\n^<\/code><\/td>\nSat\u0131r\u0131n ba\u015flang\u0131c\u0131.<\/td>\n ^Hello<\/code> -> \"Hello World\" (sat\u0131r ba\u015f\u0131nda ise)<\/td>\n<\/tr>\n\n$<\/code><\/td>\nSat\u0131r\u0131n sonu.<\/td>\n World$<\/code> -> \"Hello World\" (sat\u0131r sonunda ise)<\/td>\n<\/tr>\n\n[abc]<\/code><\/td>\nK\u00f6\u015feli parantez i\u00e7indeki karakterlerden herhangi biri.<\/td>\n [aeiou]<\/code> -> \"a\", \"e\", \"i\", \"o\", \"u\"<\/td>\n<\/tr>\n\n[^abc]<\/code><\/td>\nK\u00f6\u015feli parantez i\u00e7indeki karakterler d\u0131\u015f\u0131ndaki herhangi biri.<\/td>\n [^0-9]<\/code> -> \"a\", \"$\", \" \"<\/td>\n<\/tr>\n\n|<\/code><\/td>\nVeya (alternasyon).<\/td>\n kedi|k\u00f6pek<\/code> -> \"kedi\", \"k\u00f6pek\"<\/td>\n<\/tr>\n\n( )<\/code><\/td>\nGruplama ve yakalama.<\/td>\n (bir|iki)<\/code> -> \"bir\", \"iki\"<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nBu temel desenleri birle\u015ftirerek, son derece spesifik arama ihtiya\u00e7lar\u0131n\u0131z\u0131 kar\u015f\u0131layabilirsiniz. \u00d6rne\u011fin, ^function\\s+\\w+\\(.*?\\)<\/code> paterni, bir sat\u0131r\u0131n ba\u015f\u0131nda \"function\" kelimesiyle ba\u015flayan, ard\u0131ndan bir veya daha fazla bo\u015fluk, sonra bir kelime (fonksiyon ad\u0131), ard\u0131ndan parantez i\u00e7inde s\u0131f\u0131r veya daha fazla karakter i\u00e7eren t\u00fcm fonksiyon tan\u0131mlamalar\u0131n\u0131 yakalamak i\u00e7in kullan\u0131labilir. VS Code'un an\u0131nda geri bildirim \u00f6zelli\u011fi sayesinde, deseninizi yazarken e\u015fle\u015fmeleri canl\u0131 olarak g\u00f6rebilirsiniz, bu da deneme-yan\u0131lma s\u00fcrecini h\u0131zland\u0131r\u0131r ve \u00f6\u011frenmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131 ve \u0130leri D\u00fczey Regex: Karma\u015f\u0131k Kod Problemleri Nas\u0131l \u00c7\u00f6z\u00fcl\u00fcr?<\/h2>\n
Regex'in ger\u00e7ek g\u00fcc\u00fc, karma\u015f\u0131k kod tabanlar\u0131nda kar\u015f\u0131la\u015f\u0131lan zorlu problemleri \u00e7\u00f6zme yetene\u011finde ortaya \u00e7\u0131kar. Basit metin e\u015fle\u015ftirmelerinin \u00f6tesine ge\u00e7erek, belirli kal\u0131plara uyan dinamik kod yap\u0131lar\u0131n\u0131 bulmak veya manip\u00fcle etmek, geli\u015ftiriciler i\u00e7in paha bi\u00e7ilmez bir beceridir. \u0130\u015fte baz\u0131 ger\u00e7ek d\u00fcnya senaryolar\u0131 ve bu durumlar\u0131 regex ile nas\u0131l ele alabilece\u011finiz:<\/p>\n
Vaka Analizi 1: T\u00fcm Konsol \u00c7\u0131kt\u0131lar\u0131n\u0131 Bulmak ve Kald\u0131rmak<\/h3>\n
Geli\u015ftirme a\u015famas\u0131nda s\u0131k\u00e7a kullan\u0131lan console.log()<\/code>, console.warn()<\/code> veya console.error()<\/code> gibi ifadeler, canl\u0131 ortama \u00e7\u0131kmadan \u00f6nce temizlenmelidir. Y\u00fczlerce dosyada bu \u00e7a\u011fr\u0131lar\u0131 manuel olarak aramak hem yorucu hem de hataya a\u00e7\u0131kt\u0131r. Regex ile bunu kolayca yapabilirsiniz:<\/p>\n\nconsole\\.(log|warn|error|info)\\(.*?\\);\n<\/pre>\n<\/code><\/p>\n
Bu paternin a\u00e7\u0131klamas\u0131 \u015f\u00f6yledir:<\/p>\n
\nconsole\\.<\/code>: \"console\" kelimesini ve ard\u0131ndan bir noktay\u0131 e\u015fle\u015ftirir. Nokta \u00f6zel bir karakter oldu\u011fundan ka\u00e7\u0131\u015f karakteri (\\<\/code>) ile belirtilir.<\/li>\n(log|warn|error|info)<\/code>: Bir gruplama kullanarak, \"log\", \"warn\", \"error\" veya \"info\" kelimelerinden herhangi birini e\u015fle\u015ftirir. Bu, farkl\u0131 konsol metotlar\u0131n\u0131 tek bir desende yakalaman\u0131z\u0131 sa\u011flar.<\/li>\n\\(.*?\\)<\/code>: Bir parantez a\u00e7\u0131l\u0131\u015f\u0131n\u0131 (\\(<\/code> - ka\u00e7\u0131\u015f karakteri ile), ard\u0131ndan herhangi bir karakteri (.<\/code>) s\u0131f\u0131r veya daha fazla kez (*<\/code>) en k\u0131sa yoldan (?<\/code> - tembel e\u015fle\u015fme) ve bir parantez kapan\u0131\u015f\u0131n\u0131 (\\)<\/code> - ka\u00e7\u0131\u015f karakteri ile) e\u015fle\u015ftirir.<\/li>\n;<\/code>: \u0130fade sonundaki noktal\u0131 virg\u00fcl\u00fc e\u015fle\u015ftirir.<\/li>\n<\/ul>\nBu deseni kullanarak t\u00fcm konsol \u00e7\u0131kt\u0131lar\u0131n\u0131 bulduktan sonra, \"De\u011fi\u015ftir\" (Replace) alan\u0131n\u0131 bo\u015f b\u0131rakarak tek seferde silebilirsiniz. Bu, binlerce sat\u0131rl\u0131k kodda dahi saniyeler i\u00e7inde temizlik yapman\u0131z\u0131 sa\u011flar.<\/p>\n
Vaka Analizi 2: \u00d6zel HTML \u00d6zniteliklerini veya Etiketlerini Bulmak<\/h3>\n
Bir projenizde, belirli bir k\u00fct\u00fcphane veya framework taraf\u0131ndan kullan\u0131lan \u00f6zel bir data-<\/code> \u00f6zniteli\u011fine sahip t\u00fcm HTML elementlerini bulman\u0131z gerekebilir. \u00d6rne\u011fin, data-test-id<\/code> \u00f6zniteli\u011fine sahip her elementi bulmak i\u00e7in:<\/p>\n\n<(\\w+).*?data-test-id=\".*?\".*?>\n<\/pre>\n<\/code><\/p>\n
Bu regex deseni:<\/p>\n
\n<(\\w+)<\/code>: Herhangi bir HTML etiketini (\u00f6rne\u011fin div<\/code>, span<\/code>) yakalar ve etiket ad\u0131n\u0131 bir gruba al\u0131r (\\w+<\/code>).<\/li>\n.*?<\/code>: Etiket ad\u0131ndan data-test-id<\/code> \u00f6zniteli\u011fine kadar olan k\u0131sm\u0131 tembelce e\u015fle\u015ftirir.<\/li>\ndata-test-id=\".*?\"<\/code>: Tam olarak data-test-id=\"<\/code> metnini ve ard\u0131ndan t\u0131rnak i\u00e7indeki herhangi bir de\u011feri yakalar.<\/li>\n.*?><\/code>: Kalan \u00f6znitelikleri ve etiketin kapan\u0131\u015f\u0131n\u0131 e\u015fle\u015ftirir.<\/li>\n<\/ul>\nBu sayede, sadece data-test-id<\/code> \u00f6zniteli\u011fine sahip elementleri de\u011fil, ayn\u0131 zamanda hangi t\u00fcrde elementler oldu\u011funu da kolayca belirleyebilirsiniz. \u0130leri d\u00fczeyde, yakalama gruplar\u0131n\u0131 (()<\/code>) kullanarak bu elementlerin sadece etiket ad\u0131n\u0131 veya data-test-id<\/code> de\u011ferini al\u0131p de\u011fi\u015ftirebilirsiniz.<\/p>\n\n Uzman \u0130pucu: Yakalama gruplar\u0131 ve backreference'lar, karma\u015f\u0131k refakt\u00f6ring i\u015flemlerinde \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr. \u00d6rne\u011fin, (birinci_deger), (ikinci_deger)<\/code> \u015feklinde e\u015fle\u015fen bir deseni $2, $1<\/code> ile de\u011fi\u015ftirmek, de\u011ferlerin yerini de\u011fi\u015ftirebilirsiniz. Bu \u00f6zellik, b\u00fcy\u00fck veri d\u00f6n\u00fc\u015f\u00fcmlerinde hayat kurtar\u0131c\u0131d\u0131r.\n<\/div>\nGreedy (A\u00e7g\u00f6zl\u00fc) ve Lazy (Tembel) E\u015fle\u015fmeler<\/h3>\n
Regex'te niceleyicilerin (*<\/code>, +<\/code>, ?<\/code>, {}<\/code>) varsay\u0131lan davran\u0131\u015f\u0131 \"a\u00e7g\u00f6zl\u00fc\"d\u00fcr (greedy). Yani m\u00fcmk\u00fcn olan en uzun e\u015fle\u015fmeyi yapmaya \u00e7al\u0131\u015f\u0131rlar. Ancak \u00e7o\u011fu zaman en k\u0131sa e\u015fle\u015fmeyi istersiniz. \u0130\u015fte bu durumda \"tembel\" e\u015fle\u015fmeyi (lazy) kullan\u0131r\u0131z. Niceleyicinin sonuna bir ?<\/code> ekleyerek bu davran\u0131\u015f\u0131 de\u011fi\u015ftirebilirsiniz (\u00f6rne\u011fin .*?<\/code>, +?<\/code>, ??<\/code>). Yukar\u0131daki \u00f6rneklerde de g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, HTML etiketlerinin i\u00e7inde veya fonksiyon parantezlerinin i\u00e7inde sadece ilgili k\u0131sm\u0131 e\u015fle\u015ftirmek i\u00e7in tembel e\u015fle\u015fmeler kritik \u00f6neme sahiptir.<\/p>\nBu senaryolar, regex'in sadece basit metin aramalar\u0131ndan \u00e7ok daha fazlas\u0131n\u0131 yapabilece\u011fini g\u00f6stermektedir. Kodunuzdaki gizli desenleri ortaya \u00e7\u0131karmak, hata ay\u0131klamak ve b\u00fcy\u00fck \u00e7apl\u0131 de\u011fi\u015fiklikleri g\u00fcvenle uygulamak i\u00e7in bu ileri d\u00fczey teknikler vazge\u00e7ilmezdir.<\/p>\n
VS Code'da Regex ile De\u011fi\u015ftirme \u0130\u015flemleri ve Kod Refakt\u00f6ringi: Otomasyonla Verimlili\u011fi Art\u0131r\u0131n<\/h2>\n
VS Code'da regex kullanman\u0131n en g\u00fc\u00e7l\u00fc y\u00f6nlerinden biri, sadece arama yapmakla kalmay\u0131p, bulunan desenleri otomatik olarak de\u011fi\u015ftirebilmesidir. Bu \u00f6zellik, b\u00fcy\u00fck projelerde kod refakt\u00f6ringi, stil tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flama veya API de\u011fi\u015fikliklerine uyum sa\u011flama gibi g\u00f6revlerde inan\u0131lmaz bir zaman tasarrufu sa\u011flar. Arama kutusunun alt\u0131ndaki \"De\u011fi\u015ftir\" (Replace) alan\u0131n\u0131 a\u00e7arak bu g\u00fcc\u00fc kullanmaya ba\u015flayabilirsiniz.<\/p>\n
Yakalama Gruplar\u0131n\u0131 Kullanarak Ak\u0131ll\u0131 De\u011fi\u015fiklikler Yapmak<\/h3>\n
Regex'te parantez ()<\/code> ile olu\u015fturdu\u011funuz yakalama gruplar\u0131, de\u011fi\u015ftirme i\u015fleminde alt\u0131n de\u011ferindedir. E\u015fle\u015fen bir desenin farkl\u0131 k\u0131s\u0131mlar\u0131n\u0131 ayr\u0131 ayr\u0131 yakalayabilir ve de\u011fi\u015ftirme string'inde bunlara $1<\/code>, $2<\/code> gibi referanslarla ula\u015fabilirsiniz. Bu, statik bir metinle de\u011fi\u015ftirmek yerine, dinamik ve ba\u011flama duyarl\u0131 de\u011fi\u015fiklikler yapman\u0131z\u0131 sa\u011flar.<\/p>\nVaka Analizi 3: CSS S\u0131n\u0131f Adlar\u0131n\u0131 Standardize Etmek<\/h3>\n
Diyelim ki bir projenizdeki t\u00fcm CSS s\u0131n\u0131f adlar\u0131 component-<\/code> \u00f6nekiyle ba\u015fl\u0131yor, ancak yeni bir standartla bu \u00f6neki module-<\/code> olarak de\u011fi\u015ftirmek istiyorsunuz. Bu i\u015flemi manuel olarak yapmak b\u00fcy\u00fck bir zaman kayb\u0131 olacakt\u0131r. Regex ile bunu kolayca halledebilirsiniz:<\/p>\n\n\/\/ Aranacak Desen\n(component-)(.*?)(?:\"|'|\\s)\n<\/pre>\n<\/code><\/p>\n
<\/pre>\n<\/code>
\n\/\/ De\u011fi\u015ftirme Deseni
\nmodule-$2$3
\n<\/code><\/p>\n
Bu deseni a\u00e7\u0131klayal\u0131m:<\/p>\n
\n(component-)<\/code>: \"component-\" kelimesini yakalar ve bunu birinci grup ($1<\/code>) olarak atar.<\/li>\n(.*?)<\/code>: \"component-\" sonras\u0131nda gelen herhangi bir karakter dizisini (s\u0131n\u0131f ad\u0131n\u0131n geri kalan\u0131) yakalar ve ikinci grup ($2<\/code>) olarak atar.<\/li>\n(?:\"|'|\\s)<\/code>: Bu bir yakalama yapmayan gruptur (non-capturing group (?:...)<\/code>). Amac\u0131, s\u0131n\u0131f ad\u0131ndan sonra gelen bir t\u0131rnak i\u015faretini (tek veya \u00e7ift) veya bir bo\u015fluk karakterini e\u015fle\u015ftirmektir. Bu karakteri e\u015fle\u015ftiririz ki (.*?)<\/code> grubu sadece s\u0131n\u0131f ad\u0131n\u0131 yakalas\u0131n, ancak de\u011fi\u015ftirmek istedi\u011fimiz k\u0131sma dahil etmeyiz. Bu, e\u015fle\u015fmenin do\u011fru s\u0131n\u0131rlar i\u00e7inde kalmas\u0131n\u0131 sa\u011flar. E\u011fer bu k\u0131sm\u0131 yakalasayd\u0131k $3<\/code> olarak de\u011fi\u015ftirmemiz gerekirdi.<\/li>\n<\/ul>\nDe\u011fi\u015ftirme alan\u0131nda module-$2<\/code> kullanarak, component-<\/code> \u00f6nekini module-<\/code> ile de\u011fi\u015ftirirken, orijinal s\u0131n\u0131f ad\u0131n\u0131n geri kalan\u0131n\u0131 ($2<\/code> ile) koruruz. \u00d6rne\u011fin, component-button<\/code> -> module-button<\/code> olacakt\u0131r. Bu t\u00fcr bir otomasyon, b\u00fcy\u00fck refakt\u00f6ring g\u00f6revlerinde hata oran\u0131n\u0131 d\u00fc\u015f\u00fcr\u00fcr ve tutarl\u0131l\u0131\u011f\u0131 art\u0131r\u0131r.<\/p>\n\n\n\n