Regex tarayıcınızda nasıl çalışır?
Her JavaScript çalışma zamanı yerel bir düzenli ifade motoru ile birlikte gelir — new RegExp(pattern, flags) deseninizi derler, ardından String.prototype.match, String.prototype.replace ve RegExp.prototype.exec gibi metotlar onu herhangi bir giriş dizesine karşı çalıştırır. Bu test aracı, o motoru bir arayüze sararak deseni tarayıcıdan çıkmadan düzenlemenize, çalıştırmanıza ve incelemenize olanak tanır. Yazdığınız hiçbir şey — desen, bayraklar, test dizesi veya değiştirme — ağ üzerinden gönderilmez.
Regex test aracı nasıl çalışır?
İşlem hattı birkaç kısa adımdan oluşur ve her hepsi her tuş vuruşunda istemci tarafında çalışır (yazmanın akıcı kalması için 150 ms debounce ile):
- Deseninizin gövdesi yukarıdaki alandan okunur (başta veya sonda
/ayırıcısı yok — onlar sadece dekoratif). Seçili bayrak rozetlerigiveyagimsuygibi bir bayrak dizesinde birleştirilir. new RegExp(patternBody, flags)deseni derler. Motor birSyntaxErroratarsa (örneğin eşleşmeyen parantez veya geçersiz kaçış), mesaj test dizesinin üzerinde görüntülenir ve eşleşme listesi temizlenir. Derleme hatası V8 / SpiderMonkey / JavaScriptCore'un gerçekerr.messagedeğeridir, dolayısıyla DevTools'ta göreceğinizle aynıdır.- Eşleşme listesi için araç her zaman sentetik bir global bayrakla sıralama yapar — yani
g'yi kapatsanız bile liste her eşleşmeyi gösterir. Standart sıfır genişlikli eşleşme koruması (if (m.index === rx.lastIndex) rx.lastIndex++) boş dizeyle eşleşen desenlerde döngünün takılmasını engeller. Değiştirme modu sizin gerçek bayrak kümenize saygı duyar, böylece$&String.prototype.replaceile aynı davranır. - Her yineleme arasında araç
performance.now() - start'ı kontrol eder ve 50 ms geçtiğinde iptal eder. Bu,(a+)+$gibi girdilerde uzun biradizisine karşı felaket geri izlemeden korur — aksi takdirde sekme donardı. Koruma en iyi çabayla işler: tek eşleşmeli patolojik bir desen tek birexecçağrısı içinde yine de zaman tüketebilir. Bu olursa sekmeyi yenileyin ve deseni açgözlü olmayan bir niceleyici ya da atomik tipte sahiplenici stil ile yeniden yazın (örneğin[^x]*x). - Test dizesi her eşleşmenin aralığında segmentlere bölünür ve eşleşen segmentler
<mark class="rx-match rx-cap-N">öğelerine sarılır; buradaNaltı palet rengi arasında döner, böylece komşu eşleşmeler bir bakışta ayırt edilir. Her eşleşmenin numaralı grupları (m[1],m[2], …) ve adlandırılmış grupları (m.groups) altta etiketli satırlar olarak gösterilir;dbayrağı aktifse her grup için[start, end]dizinleri de gösterilir.
Bu regex test aracını neden kullanmalı?
- Gizlilik: her desen, test dizesi ve değiştirme tarayıcınızda yerleşik JavaScript RegExp motoruyla çalışır. Hiçbir şey sekmeden çıkmaz — giriş bir müşteri günlüğü, sızdırılmış kimlik bilgisi deseni veya barındırılan bir SaaS regex oyun alanına yapıştırmayacağınız başka bir şey olduğunda önemlidir.
- Dürüst lezzet: araç tam olarak Node.js, Chrome, Safari, Firefox ve her tarayıcı tabanlı form doğrulayıcının çalıştırdığı regex motorunu sergiler. İnce farkları gizleyen Perl tadına çeviren bir katman yoktur — burada ne işe yarıyorsa kodunuzda da işe yarar.
- Yakalama ve adlandırılmış grup hata ayıklama: her numaralı grup (
$1,$2, …) ve adlandırılmış grup ($<year>) her eşleşme için gösterilir, böylece bir ayrıştırıcı kurabilir ve slotları tahmin etmeden okuyabilirsiniz. Değiştirme modu grupları serbestçe karıştırmanıza izin verir —$2-$1ilk iki slotu yer değiştirir,$<name>adlandırılmış bir slot ekler ve$&tüm eşleşmeyi yansıtır. - Felaket geri izleme koruması: numaralandırmada 50 ms'lik tavan,
(a+)+$gibi patolojik desenleri sekmeyi dondurmadan iptal eder. Donmuş bir tarayıcı yerine açıklayıcı bir hata görürsünüz ve sayfa hemen toparlanır.
Bir regex test aracının yaygın uygulamaları nelerdir?
Düzenli ifadeler web geliştirme, güvenlik ve veri çalışmalarında karşımıza çıkar — bu araç en yaygın kullanım durumlarına odaklanır:
- Form doğrulama: bir e-posta, telefon veya posta kodu deseninin prototipini oluşturun, örnek girdileri test dizesine yapıştırın ve deseni üretim koduna göndermeden önce her olumlu vakanın eşleştiğini ve her olumsuz vakanın eşleşmediğini doğrulayın.
- Günlük tarama: NGINX, uygulama veya denetim günlüğü çıktısının bir parçasını yapıştırın, ilgilendiğiniz bölümler için adlandırılmış gruplarla bir desen yazın (
(?<ip>…) (?<path>…)) ve ayrıştırıcınızın doğruluğunu doğrulamak için her eşleşmenin yakalanan slotlarını okuyun. - Refaktör için bul-değiştir: bir snippet'teki tanımlayıcıları yeniden yazmak için Değiştirme modunu kullanın —
(\w+)\.set(\w+)\(→$1.$2 =setter çağrılarını özellik atamalarına dönüştürür ve canlı önizleme, sonucu bir codemod'a işlemeden önce gösterir.
Bir regex örneği nasıl görünür?
Şu deseni alın: (\d{4})-(\d{2})-(\d{2}) g bayrağıyla, release 2025-11-15, prerelease 2026-05-25 test dizesine karşı çalıştırılıyor. Motor iki eşleşme bulur. İlk eşleşme 2025-11-15'tir; grup 1 = 2025, grup 2 = 11, grup 3 = 15. İkinci eşleşme 2026-05-25'tir; aynı grup yapısına sahiptir. Değiştirme modunda $3/$2/$1 değiştirme şablonu her iki tarihi 15/11/2025 ve 25/05/2026 olarak yeniden yazar — tek desenle ISO'dan DMY'ye dönüştürmeyi bir komut dosyasına bağlamadan önce görsel olarak doğrulayabilirsiniz.
Bu test aracını herhangi bir regex çalışması için hızlı yol olarak kullanın — desen kurma, hata ayıklama veya yeniden yazma. Her şey yerel olarak çalışır; hiçbir şey kaydedilmez; regex motoru tarayıcınızın getirdiği motordur, dolayısıyla davranış üretim kodunun çalışma zamanında göreceğiyle eşleşir.