در این مقاله قصد داریم که به توضیح عبارت های با قاعده یا همان Regular Expression در JavaScript بپردازیم.

RegExp  از مباحث پرکاربرد در برنامه نویسی است و به دلیل پیچیدگی که دارد، برخی از برنامه نویسان کمتر به سراغ آن می روند. اگر بخواهیم تعریف ساده ای از RegExp داشته باشیم، می توان گفت که قواعد و روش هایی است که با استفاده از آن ها می توانیم در متن الگویی را مشخص کنیم.

برای مثال یک آدرس ایمیل را فرض کنید. معمولا فرمت آدرس های ایمیل به صورت local-part@service.domain می باشد. پس الگوی آن به این صورت است که اول یک سری کاراکتر داریم (هر نوع کاراکتری) و به دنبال آن @ داریم. سپس باید سرویسی که ایمیل را در ساخته ایم باشد که می تواند کاراکترهای متفاوتی را در بر بگیرد. بعد از نقطه ( . ) باید باشد و سپس آن دامینی که بر روی آن ایمیل ساخته شده است. ( مانند info@zerotohero.ir)

حال چرا در JavaScript از آن استفاده می شود؟ گفتیم از RegExp برای پیدا کردن الگو در متن استفاده می کنیم. فرض کنید که یک form داریم که از قسمت های مختلف مانند نام و نام خانوادگی ، ایمیل ، پسورد و غیره تشکیل شده باشد. طبیعی است در نام و نام خانوادگی یک نفر نمی تواند عدد یا کاراکتری غیر از حروف باشد. در مورد ایمیل هم گفتیم فرمت آن نوع خاصی است. برای پسورد هم معمولا محدودیت کاراکتری نداریم اما در بعضی اوقات شاید بخواهیم تعداد کاراکتر ها را محدود کنیم و یا وجود حداقل چند کاراکتر را ضروری کنیم.

این کار را می توانیم در Back-end خود مانند PHP هم انجام دهیم، اما مزیت آن این است که کار validation را به مرورگر واگذار می کنیم، تا اینکه با سرور در ارتباط باشیم.

Syntax عبارات با قاعده به صورت زیر است:

/pattern/modifiers;

برای مثال:

var patt = /zerotohero/i;

• /zerotohero/i همان Regular Expression میباشد.
• zerotohero الگویی است که می خواهیم.
• i هم modifier ما هست ( i برای این که به بزرگی و کوچکی حروف حساس باشد، g برای اینکه در اولین تطابق، عملیات تست کردن را تمام نکند و m برای برای این است که اگر چندین خط داشتیم، در تمام خطوط بگردد )

ایجاد Regular Expression

در زبان JavaScript عبارات با قاعده، شی (Object) هستند که به دو صورت قابل پیاده سازی می باشند.

//With Regular Expression Constructor
var reg1 = new RegExp(“zerotohero”);
//with enclosing the pattern in forward slash (/)
var reg2 = /zerotohero/;

این دو  الگویی که تعریف کردیم برای پیدا کردن رشته “zerotohero” در یک متن استفاده می شود. برای مثال رشته “zerotohero.ir” را در نظر بگیرید که حاوی “zerotohero” می باشد، پس الگو در آن صدق می کند و رشته “with zero to hero be your hero” را در نظر بگیرید که در آن الگو “zerotohero” وجود ندارد.

فرق این دو روش این است که در روش دوم اگر بخواهیم کاراکتری به غیر از حرف ، عدد و فاصله داشته باشیم باید قبل از آن backslash ( \ ) بزنیم. برای مثال برای الگوی “+zerotohero” با این روش باید به این گونه آن را تعریف کنیم.

//zerotohero+ pattern with forward slash
var reg3 = /zerotohero\+/;

تست الگوی Regular Expression

برای تست اینکه الگو صدق می کند یا نه از دستورات زیر استفاده می کنیم :

//testing the pattern by given string
/zerotohero/.test(“welcome to zerotohero”);
// -> True
/zerotohero/.exec(“welcome to zerotohero”);
// -> zerotohero
var1.test(“welcome to zerotohero”);
// -> True
var1.exec(“welcome to zerotohero”);
// -> zerotohero
/zerotohero/.test(“welcome to herotozero :|“);
// -> False
/zerotohero/.exec("welcome to herotozero :|")
// -> null
var2.test(“welcome to herotozero :|“);
// -> False
var2.exec(“welcome to herotozero :|“);
// -> null

متودهای دیگر Regular Expression

match : اگر تطابقی را پیدا کند آن را به صورت آرایه بر می گرداند، در غیر این صورت null را بر می گرداند.

search : اگر تطابق را پیدا کند شاخص (index) آن را بر می گرداند، در غیر این صورت ۱- را بر می گرداند.

replace : اگر تطابقی را پیدا کند آن را با عبارتی که به آن دادیم، جایگزین می کند.

str.replace(regexp|substr, newSubstr|function)

قواعد Regular Expression

کروشه

برای محدوده کاراکترها استفاده می شود.

[abcd] برای پیدا کردن کاراکترهایی که درون کروشه وجود دارد.

var str = "this is zerotohero";
var patt1 = /[h]/g; 
var result = str.match(patt1);
// result --> h,h

[A-Z] هر کاراکتر بین A تا Z (حروف بزرگ الفبا)

[a-z] هر کاراکتربین a تا z (حروف کوچک الفبا)

[A-z] هر کاراکتر بین A تا z (حروف بزرگ و کوچک الفبا)

[abcd^] برای پیدا کردن کاراکترهایی که درون کروشه وجود ندارد.

var str = "this is zerotohero";
var patt1 = /[^h]/g;
var result = str.match(patt1);
// result --> t,i,s, ,i,s, ,z,e,r,o,t,o,e,r,o

[0-9] بازه برای پیدا کردن تمامی اعداد.

var str = "963258741";
var patt1 = /[1-4]/g;
var result = str.match(patt1);
// result --> 3,2,4,1

[0-9^] بازه ای که عدد در آن نباشد.

var str = "123456789";
var patt1 = /[^1-4]/g;
var result = str.match(patt1);
// result --> 5,6,7,8,9

(x|y) برای تصمیم گیری بین دو عبارت(x یا y)

var str = "01234567890123456789";
var patt1 = /(0|5|7)/g; 
var result = str.match(patt1);
// result --> 0,5,7,0,5,7

متاکاراکتر

کاراکترهایی هستند که معنای خاصی دارند.

. (نقطه) برای پیداکردن تک کاراکتر به جز کاراکتر خط جدید

var str = "zero to hero!";
var patt1 = /e.o/g;
var result = str.match(patt1);
// result --> ero,ero

w\ برای پیدا کردن کاراکتر کلمه (شامل: (a-z , A-Z , 0-9 , _(underscore )

var str = "be your 100% with zerotohero"; 
var patt1 = /\w/g;
var result = str.match(patt1);
// result --> b,e,y,o,u,r,1,0,0,w,i,t,h,z,e,r,o,t,o,h,e,r,o

W\ برای پیدا کردن به غیر از کاراکتر کلمه

var str = "be your 100% with zerotohero!";
var patt1 = /\W/g;
var result = str.match(patt1);
// result -->  , ,%, , ,!

d\ پیدا کردن عدد

var str = "be your 100% with zerotohero!";
var patt1 = /\d/g;
var result = str.match(patt1);
// result --> 1,0,0

D\ پیدا کردن غیر عدد

var str = "be your 100% with zerotohero!";
var patt1 = /\D/g;
var result = str.match(patt1);
// result --> b,e, ,y,o,u,r, ,%, ,w,i,t,h, ,z,e,r,o,t,o,h,e,r,o,!

s\ پیدا کردن فاصله (space)

var str = "be your 100% with zerotohero!";
var patt1 = /\s/g;
var result = str.match(patt1);
// result -->  , , , (Four spaces)

S\ پیدا کردن غیر از فاصله

var str = "be your 100% with zerotohero!";
var patt1 = /\S/g;
var result = str.match(patt1);
// reslut --> b,e,y,o,u,r,1,0,0,%,w,i,t,h,z,e,r,o,t,o,h,e,r,o,!

b\ پیدا کردن تطبیق در اول یا آخر کلمه

var str = "this is zerotohero a"; 
var patt1 = /\bzero/g;
var result = str.match(patt1);
// result --> zero


var str = "this is zerotohero a"; 
var patt1 = /hero\b/g;
var result = str.match(patt1);
// result --> hero

B\ پیداکردن تطبیق به غیر از اول یا آخر کلمه

var str = "this is zerotohero";
var patt1 = /\Bto/g;
var result = str.match(patt1);
// result --> to

0\ پیداکردن تهی یا NULL

var str = "Visit W3Schools.\0Learn JavaScript."; 
var patt1 = /\0/;
var result = str.search(patt1);
// result --> 26

سورها (Quantifiers)

+ برای تطبیق حداقل ۱ بار آن کاراکتر یا کاراکترها

var str = "Hellooo World! Helloo ZeroToHerO!"; 
var patt1 = /o+/g;
var result = str.match(patt1);
// result --> ooo,o,oo,o,o

* برای تطبیق حداقل ۰ بار آن کاراکتر یا کاراکترها

var str = "Hellooo World! Hello ZeroToHero!"; 
var patt1 = /lo*/g;
var result = str.match(patt1);
// result --> l,looo,l,l,lo

? برای تطبیق ۰ یا ۱ بار آن کاراکتر یا کاراکترها

var str = "1, 100 or 1000?";
var patt1 = /10?/g;
var result = str.match(patt1);
// result --> 1,10,10

{x} برای تطبیق تعداد xتا از آن کاراکتر یا کاراکترها

var str = "100, 1000 or 10000?";
var patt1 = /\d{4}/g;
var result = str.match(patt1);
// result --> 1000,1000

{x,y} برای تطبیق تعداد x تا yتا از آن کاراکتر یا کاراکترها

var str = "100, 1000 or 10000?";
var patt1 = /\d{3,4}/g; 
var result = str.match(patt1);
// result --> 100,1000,1000

{,x} برای تطبیق حداقل xتا از آن کاراکتر یا کاراکترها

var str = "100, 1000 or 10000?";
var patt1 = /\d{3,}/g; 
var result = str.match(patt1);
// result --> 100,1000,10000

$ برای تطبیق وجود کاراکتر یا کاراکترهای مورد نظر در انتهای آن رشته

var str = "zerotohero is really ZeroToHero";
var patt1 = /Hero$/g;
var result = str.match(patt1);
// result --> Hero

^ برای تطبیق وجود کاراکتر یا کاراکترهای مورد نظر در ابتدای آن رشته

var str = "zerotohero is really ZeroToHeros";
var patt1 = /^zero/g;
var result = str.match(patt1);
// result --> zero

تا این جا به قواعد Regular Expression پرداختیم، حال به یک مثال می پردازیم :

نام کاربری می تواند حاوی حروف، اعداد، نقطه، خط تیره، underscore، علامت دلار، علامت @، علامت *، علامت ! و غیره باشد. هم چنین بهتر است تعداد حروف آن را محدود کنیم که برای مثال از ۲۵ کاراکتر بیشتر نباشد و از ۳ کاراکتر هم کمتر نباشد. قابل ذکر است که نام کاربری نمی تواند دارای فاصله (space)، کاما (comma) باشد. پس عبارت باقاعده آن به صورت زیر می شود:

/^[-\w\.\$@\*\!]{3,25}$/

به این صورت هم می توان نوشت:

/^[a-zA-Z0-9\.-_$@*!]{3,25}$/

در این مقاله سعی شده که تقریبا تمامی قواعد Regular Expression در JavaScript پوشش داده شود. پیاده سازی الگوهای دیگر می تواند تمرین خوبی برای درک بیشتر این مبحث باشد.به عنوان تمرین می توانید الگوی ایمیل و یا پسورد را پیاده سازی کنید.