Regex در مرورگر شما چگونه کار میکند؟
هر JavaScript runtime یک موتور عبارت منظم بومی دارد — new RegExp(pattern, flags) الگوی شما را کامپایل میکند، سپس متدهایی مانند String.prototype.match، String.prototype.replace و RegExp.prototype.exec آن را در برابر هر رشته ورودی اجرا میکنند. این تستر آن موتور را در یک UI قرار میدهد تا بتوانید الگوها را بدون ترک مرورگر ویرایش، اجرا و بازرسی کنید. هیچچیزی که تایپ میکنید — الگو، flag ها، رشته آزمایشی یا جایگزینی — از شبکه ارسال نمیشود.
تستر regex چگونه کار میکند؟
خط لوله چند مرحله کوتاه است که همه آنها در هر ضربه کلید سمتکلاینت اجرا میشوند (با ۱۵۰ میلیثانیه debounce تا تایپ روان بماند):
- متن الگوی شما از ورودی بالا خوانده میشود (بدون جداکنندههای
/پیشرو یا پسرو — آنها تزئینی هستند). pill های flag انتخابی به یک رشته flag مانندgiیاgimsuyمتصل میشوند. new RegExp(patternBody, flags)الگو را کامپایل میکند. اگر موتور یکSyntaxErrorبیندازد (مثلاً یک پرانتز باز نشده یا یک escape نامعتبر)، پیام بالای رشته آزمایشی نمایش داده میشود و لیست تطابق پاک میشود. خطای کامپایلerr.messageواقعی از V8 / SpiderMonkey / JavaScriptCore است بنابراین با آنچه در DevTools میبینید مطابقت دارد.- برای لیست تطابق، تستر همیشه با یک flag global مصنوعی شمارش میکند — بنابراین حتی اگر
gرا خاموش کنید، لیست هنوز همه تطابقها را نشان میدهد. محافظ استاندارد تطابق صفر-عرض (if (m.index === rx.lastIndex) rx.lastIndex++) از چرخیدن حلقه روی الگوهایی که یک رشته خالی تطابق میدهند جلوگیری میکند. حالت Replace مجموعه flag واقعی شما را رعایت میکند بنابراین$&مثلString.prototype.replaceرفتار میکند. - بین هر iteration تستر
performance.now() - startرا بررسی میکند و وقتی ۵۰ میلیثانیه گذشت متوقف میشود. این از backtracking فاجعهبار در ورودیهایی مثل(a+)+$در برابر یک رشته طولانی ازaمحافظت میکند — وگرنه تب میآویخت. اگر این اتفاق افتاد، تب را بازخوانی کنید و الگو را با یک کمیتدهنده non-greedy بازنویسی کنید. - رشته آزمایشی در هر بازه تطابق به بخشهایی تقسیم میشود و بخشهای تطابقیافته در عناصر
<mark class="rx-match rx-cap-N">پیچانده میشوند کهNدر شش رنگ palette چرخش میکند تا تطابقهای مجاور به راحتی از هم تشخیص داده شوند. گروههای شمارهدار هر تطابق (m[1]،m[2]، …) و گروههای نامگذاریشده (m.groups) به عنوان ردیفهای برچسبدار زیر نمایش داده میشوند؛ اگر flagdتنظیم شد، ایندکسهای[start, end]به ازای هر گروه نیز نمایش داده میشوند.
چرا از این تستر regex استفاده کنیم؟
- حریم خصوصی: هر الگو، رشته آزمایشی و جایگزینی در مرورگر شما با استفاده از موتور RegExp داخلی JavaScript اجرا میشود. هیچچیز تب را ترک نمیکند — مهم وقتی ورودی یک لاگ مشتری، یک الگوی اعتبارنامه فاششده یا هر چیز دیگری است که نمیخواهید در یک playground SaaS میزبانیشده پیست کنید.
- طعم صادقانه: تستر دقیقاً موتور regex ای را نمایش میدهد که Node.js، Chrome، Safari، Firefox و هر اعتبارسنج فرم مبتنی بر مرورگر اجرا میکند. هیچ لایه ترجمه طعم Perl وجود ندارد که تفاوتهای ظریف را پنهان کند — آنچه اینجا کار میکند در کدتان کار میکند.
- اشکالزدایی گروه capture و نامگذاریشده: هر گروه شمارهدار (
$1،$2، …) و گروه نامگذاریشده ($<year>) به ازای هر تطابق نمایش داده میشود تا بتوانید یک parser بسازید و slot ها را بدون حدس بخوانید. حالت Replace به شما امکان میدهد گروهها را آزادانه مخلوط کنید —$2-$1دو slot اول را جابجا میکند،$<name>یک slot نامگذاریشده را میاندازد، و$&کل تطابق را بازتاب میدهد. - محافظ backtracking فاجعهبار: یک سقف ۵۰ میلیثانیه روی شمارش الگوهای آسیبرسان مثل
(a+)+$را قبل از یخ زدن تب متوقف میکند. به جای یک مرورگر آویخته یک خطای توضیحی میبینید، و صفحه فوراً بازیابی میشود.
کاربردهای رایج تستر regex چیست؟
عبارات منظم در سراسر توسعه وب، امنیت و کار با داده ظاهر میشوند — این تستر رایجترین موارد استفاده را هدف میگیرد:
- اعتبارسنجی فرم: یک الگوی ایمیل، تلفن یا کدپستی را نمونهسازی کنید، ورودیهای نمونه را در رشته آزمایشی پیست کنید، و تأیید کنید که هر مورد مثبت تطابق دارد و هر مورد منفی ندارد قبل از اینکه الگو را به کد تولید ارسال کنید.
- استخراج از لاگ: یک قطعه از خروجی لاگ NGINX، اپلیکیشن یا حسابرسی پیست کنید، یک الگو با گروههای نامگذاریشده برای بخشهایی که اهمیت دارند بنویسید (
(?<ip>…) (?<path>…))، و slot های capture شده را به ازای هر تطابق بخوانید تا parser شما درست باشد. - Refactor جستجو و جایگزینی: از حالت Replace برای بازنویسی شناسهها در یک snippet استفاده کنید —
(\w+)\.set(\w+)\(→$1.$2 =فراخوانیهای getter را به انتساب ویژگی تبدیل میکند، و پیشنمایش زنده نتیجه را قبل از commit در یک codemod نمایش میدهد.
یک مثال regex چه شکلی است؟
الگوی (\d{4})-(\d{2})-(\d{2}) را با flag g در برابر رشته آزمایشی release 2025-11-15, prerelease 2026-05-25 اجرا کنید. موتور دو تطابق پیدا میکند. اولین تطابق 2025-11-15 با گروه ۱ = 2025، گروه ۲ = 11، گروه ۳ = 15 است. دومین تطابق 2026-05-25 با همان شکل گروه است. در حالت Replace، قالب جایگزینی $3/$2/$1 هر دو تاریخ را به 15/11/2025 و 25/05/2026 بازنویسی میکند — یک تبدیل ISO به DMY با یک الگو که میتوانید قبل از قرار دادن الگو در یک اسکریپت به صورت بصری تأیید کنید.
از این تستر به عنوان مسیر سریع برای هر کار regex استفاده کنید — ساختن، اشکالزدایی یا بازنویسی الگوها. همهچیز به صورت محلی اجرا میشود؛ هیچچیز لاگ نمیشود؛ موتور regex هر چیزی است که مرورگر شما ارائه میدهد، بنابراین رفتار با آنچه کد تولید در زمان اجرا خواهد دید مطابقت دارد.