آشنایی با عبارت با قاعده یا RegExp در جاوا اسکریپ

تیم تحریریه کلیک اول | شنبه , ۲۵ اسفند ۱۳۹۷ | مدت زمان مطالعه: 12 دقیقه

در این مقاله می خوانید:

در این مطلب قصد داریم با یکی از مهمترین دستورات موجود در برنامه نویسی، یعنی عبارت با قاعده آشنا شویم و با ارائه چند مثال، بتوانیم اعتبار سنجی مناسبی برای ایمیل، آدرس سایت، شماره تلفن و تاریخ به وجود بیاوریم.

آشنایی با عبارت با قاعده

عبارت با قاعده گرامری است که برای تطبیق و کار با رشته های متنی به کار می رود. در هنگام طراحی سایت، از عبارت با قاعده برای اعتبار سنجی های سمت کاربر و سرور استفاده می شود. زمانی که کاربر اطلاعاتی مانند ایمیل، آدرس سایت، شماره تماس و تاریخ را در قالب یک فرم ارسال می کند، ممکن است سهوا یا عمدا دچار اشتباه در فرمت اطلاعات ارسالی شود. این اشتباه اگر پیش از ارسال به سمت سرور، توسط برنامه نویس جاوا اسکریپت بررسی شده و به سرعت به کاربر خطا داده شود، باعث بهبود UX سایت و افزایش سرعت می شود که از عوامل مهم و تاثیرگذار در سئو و بهینه سازی سایت به شمار می رود.

اگر با خط فرمان در ویندوز یا با پوسته در لینوکس کار کرده باشید، احتمالا تاکنون برای پیداکردن فایل ها از کاراکتر ستاره (*) مشابه مثال های زیر، استفاده کرده اید:

dir *.*

dir *.*

یا

dir *.txt

dir *.txt

در زمانی که از کاراکترهای Wildcard مانند کاراکتر فوق استفاده می کنید، در حقیقت یکی از عناصر مربوط به عبارات با قاعده را به کار می برید. کاراکتر ستاره یکی از کاراکترهای مورد استفاده در عبارات با قاعده است. عبارات باقاعده که در جاوا اسکریپت از طریق شی RegExp مورد استفاده قرار می گیرند، روش قدرتمندی را برای کار با رشته های شامل متن یا متن و عدد فراهم می آورد. پیاده سازی عبارات باقاعده در 262-ECMA تا حدود زیادی از پردازش گر عبارات باقاعده در Perl اقتباس شده است. خط زیر عبارت باقاعده ای است که بر کلمه JavaScript تطبیق می کند:

var myRegex = /JavaScript/;

1	var myRegex = /JavaScript/;

از این عبارت باقاعده با کلمه JavaScript، در هرجایی از یک متن که قرار داشته باشد، مطابقت می کند. به طور مثال، عبارت با قاعده فوق بامتن “This is a book about JavaScript” یا با متن به “This IsAJavaScriptBook” نیز مطابقت دارد اما بر متن “This is a book about javascript” تطبيق نخواهد و کرد، چرا که عبارات با قاعده حساس به بزرگی و کوچکی حروف هستند.

می توان این امر یعنی حساسیت به بزرگی یا کوچکی حروف را همان طور که در ادامه خواهید دید، تغيير داد.

گرامر عبارت با قاعده

عبارت با قاعده گرامری مختصر یا به عقیده بعضی رمزگونه دارد. اما اجازه ندهید که این گرامر موجز و مختصر شما را بترساند، زیرا قدرت اصلی در همین گرامر نهفته است. برای نمونه، عبارت با قاعده بعدی جست و جویی برای یافتن اعداد انجام داده و سپس با انجام یک جایگزینی و تکنیک گروه بندی به فرمت بندی دوباره آدرس IP (در فرمت 192.168.0.1) می پردازد. این مثال در واقع چندان به بحث مربوط نمی شود جز اینکه مثالی از یک عبارت باقاعد می دهد.

s/([0-9]+)\.([0-9]+)(\/[0-9]+)/$1\$2\.0$3/;

1	s/([0-9]+)\.([0-9]+)(\/[0-9]+)/$1\$2\.0$3/;

همین عبارت باقاعده را در جاوااسکریپت می توان با استفاده از متد replace به شکل زیر نوشت:

var theIp = "192.168.0.1";
alert(theIp.replace(s/([0-9]+)\.([0-9]+)(\/[0-9]+)/$1\$2\.0$3/;));

1 2	var theIp = "192.168.0.1"; alert(theIp.replace(s/([0-9]+)\.([0-9]+)(\/[0-9]+)/$1\$2\.0$3/;));

گرامر عبارات با قاعده چندین کاراکتر را شامل می شود که هرکدام معنای خاصی دارند. کاراکترهایی که ابتدا یا انتهای یک متن را معین می کنند، یک کاراکتر wildcard و کاراکترهای گروه بندی از آن جمله هستند. جدول زیر چند نمونه مهم از این کاراکترهای ویژه را نشان می دهد.

کاراکتر	شرح
^	ابتدای متن را مشخص می کند. برای انطباق کاراکتر در اول متن به کار می رود. مثلا عبارت /A^/ با حرف A در رشته “an A” مطابقت نمی کند. ولی با حرف A در رشته “An ex” مطابقت دارد.
$	انتهای متن را مشخص می کند. برای انطباق کاراکتر در آخر متن به کار می رود. مثلا عبارت /$t/ با حرف t در رشته “eater” مطابقت نمی کند. ولی با حرف t در رشته “eat” مطابقت دارد.
.	با هر کاراکتری (به جز کاراکتر خط جدید (newline) تطبیق می کند. مثلا عبارت /n./ با حرف n در رشته “on” یا “an” مطابقت می کند. ولی در رشته “nay” مطابقت خیر.
*	با تعداد صفر یا بیشتر از کاراکتر قبلی تطبیق می کند. مثلا عبارت /*bo/ با مقدار boooo در رشته “a ghost booooed” و با حرف b در رشته “A bird warbled” مطابقت می کند اما اصلا بر رشته “A goat grunted” تطبیق نمی کند.
+	با تعداد یک یا بیشتر از کاراکتر قبلی تطبیق می کند. معادل استفاده از {,1} است. مثلا، عبارت /+a/ بر حرف a در رشته “candy” و تمام حروف a در رشته “caaaaaaandy” مطابقت می کند.
?	با تعداد صفر یا یک از کاراکتر قبلی تطبیق می کند. مثلا، عبارت /?e?le/ بر مقدار le در رشته “angle” و مقدار el در رشته “angel” تطبیق دارد.
( )	مورد منطبق با کاراکترهای درون پرانتز را در یک گروه قرار می دهد که از این گروه بعدا می توان استفاده کرد.
{,n}	با حداقل n کاراکتر قبلی تطبیق می کند. توجه کنید که اگر کاما حذف شود، به معنای تطبیق دقیقا n تعداد از کاراکتر قبلی خواهد بود.
{n,m}	با حداقل n و حداکثر m تعداد از کاراکتر قبلی تطبیق می کند.
[ ]	یک کلاس (مجموعه) کاراکتر را تعریف می کند که با هرکدام از کاراکترهای درون کروشه تطبیق می کند. این کاراکتر می تواند یک محدوده مانند 9-0 برای تطبیق با همه ارقام یا a-z برای تطبیق با همه حروف باشد. استفاده از خط فاصله برای مشخص کردن یک محدوده، مثلا a-c نیز معتبر است. مثلا، عبارت [abcd] با عبارت [a-d] کاملا یکسان است و بر حرف b در رشته “brisket” و حرف c در رشته “fche” تطبیق می کند.
[ ^]	استفاده از کاراکتر هشتگ درون یک کلاس، آن کلاس را بی اثر می کند. یعنی کاراکترهای کلاس مزبور نباید در متن وجود داشته باشند. مثلا، عبارت [abc^] کاملا مشابه با عبارت [a-c^] بوده و با حرف r در رشته “brisket” و حرف h در رشته “chop” مطابقت می کند.
\	معمولا به عنوان کاراکتر گریز استفاده می شود و بدین معناست که هرچه بعد از \ قرار بگیرد، یک کاراکتر واقعی تفسیر می شود.

علاوه بر کاراکترهای ویژه، چند رشته نیز وجود دارد که برای تطبیق بر گروهی از کاراکترها یا کاراکترهای غیر الفبا عددی (کاراکترهایی غیر از حرف و عدد) به کار می روند.

کاراکتر	شرح
b\	انطباق در مرز كلمه (ابتدا و انتهای کلمه) مثلا، عبارت /bn\w با مقدار no در رشته “noonday” و با مقدار ly در رشته”possibly yesterday” مطابقت دارد.
B\	انطباق در غیر از مرز كلمه. مثلا، عبارت \w\ Bn\/ با مقدار no در رشته “noonday” و با مقدار ly در رشته”possibly yesterday” مطابقت دارد.
c\	بر کاراکتر کنترل تطبیق می کند که معمولا همراه با کاراکتر دیگری استفاده می شود. برای مثال، cA/ بر مقدار Control-A در یک رشته تطبیق می کند.
d\	بر یک رقم مطابقت میکند. معادل استفاده از [9-0] است.
D\	بر یک کاراکتر غیررقم مطابقت می کند. معادل استفاده از [^9-0] است.
n\	خط جدید
r\	تعویض سطر
s\	یک فضای خالی مانند یک فاصله یا یک تب. مثلا عبارت /*w\s\/ با مقدار bar در “foo bar” مطابقت می کند.
S\	یک کاراکتر غیر از فضای خالی
t\	تب
w\	هر کاراکتر الفباعددی، یعنی حرف یا عدد. مثلا عبارت /w\/ با حرف a در رشته “apple”، مقدار 5 در رشته “,5.28$” و مقدار 3 در رشته “.3D” مطابقت دارد.
W\	هر کاراکتری غیر از کاراکترهای الفباعددی

علاوه بر کاراکترهای معرفی شده در جدول بالا، می توانید دو اصلاح کننده i، برای اینکه پردازش عبارت با قاعده غیر حساب به بزرگی و کوچکی حروف باشد و اصلاح کننده g را برای اینکه تطبیق عبارت با قاعده، بعد از یافتن اولین مورد مطابق، همچنان در بقیه متن ادامه پیدا کند نیز به کار ببرید.

شیء RegExp متدهای خاص خود را دارد؛ مثلا متدهای ()exec و ()test که متد اخیر یک عبارت با قاعده را بر روی یک رشته متنی آزمایش می کند و برحسب اینکه عبارت با قاعده بر آن رشته متنی منطبق شود یا خیر، مقدار true یا false را برمی گرداند. همچنین، برای کار با عبارت با قاعده، استفاده از متدهای نوع داده string، مانند search match و replace نیز کاملا امری معمول و رایج است.

متد ()exec از شیء RegExp برای پردازش یک عبارت با قاعده بر روی یک رشته متنی و برگرداندن نتیجه آن مورد استفاده قرار می گیرد. به طور مثال، پردازش یک URL ساده و استخراج دامنه از آن و به شکل زیر است:

var myString = "https://clickaval.com";
var myRegex = "/https:\/\/\w+\.(.*)/";
var result = myRegex.exec(myString);
alert(result[1]);

var myString = "https://clickaval.com";

var myRegex = "/https:\/\/\w+\.(.*)/";

var result = myRegex.exec(myString);

alert(result[1]);

این قطعه کد، عبارت https://clickaval.com را بر روی صفحه نمایش می دهد.

پس از آن یک عبارت با قاعده تعریف شده و متد ()exec آن فراخوانی می شود تا این عبارت با قاعده را بر روی رشته متنی که در متغير myString قرار دارد پردازش کرده و نتیجه حامد در متغير results ذخیره کند.

var myRegex = "/https:\/\/\w+\.(.*)/";
var result = myRegex.exec(myString);

1 2	var myRegex = "/https:\/\/\w+\.(.*)/"; var result = myRegex.exec(myString);

این عبارت با قاعده از چندین عنصر مهم تشكيل شده است. در ابتدا این عبارت با قاعده به دنبال رشته متنی :https می گردد. سپس دو علامت ممیز (/) قرار داده شده است، اما از آنجا که این کاراکتر یک کاراکتر ویژه در عبارات با قاعده محسوب می شود باید با قراردادن کاراکتر ا قبل از آن از تفسير آن به عنوان کاراکتر ویژه جلوگیری کرد. تا اینجا عبارت با قاعده به شكل \/\/:http در می آید.

بخش بعدی عبارت باقاعده فوق، یعنی w\، به دنبال هر کاراکتر الفباعددی می گردد. آدرس های وب معمولا به شكل www هستند. اما به اشتباه فکر نکنید که این قسمت از عبارت باقاعده به دنبال سه حرف w می گردد میزبان می تواند به هر شکلی، مانند myhost ،host1،web یا www باشد.

چون عبارت w\ با هر کاراکتری تطابق دارد و چون میزبان وب معمولا سه کاراکتر (www) دارد، در این عبارت باقاعده پس از این قسمت، کاراکتر ویژه + اضافه شده است تا نشان دهد که عبارت باقاعده باید هر کاراکتر الفباعددی را حداقل یک بار و احتمالا بیش از یک بار، پیدا کند. تا اینجا عبارت باقاعده به شكل +http://w در آمده است که با قسمت http://www از آدرس موردنظر ما منطبق می شود.

قسمت بعدی که باید مدنظر قرار گیرد، کاراکتر نقطه بین نام میزبان (www) احتمالی و نام دامنه (clickaval.com) است. این مرحله با افزودن کاراکتر نقطه (.) انجام می شود، اما کاراکتر نقطه نیز چون یک کاراکتر ویژه است، باید از تفسير آن با افزودن یک کاراکتر جلوگیری کرد. تا اینجا به عبارت https:\/\/\w+\ رسیده ایم که با تمام عناصر یک آدرس استاندارد تا نام دامنه آن تطابق دارد.

در پایان، نیاز دارید تا نام دامنه را گرفته و از آن در آینده استفاده کنید، پس دامنه بین پرانتز قرار داده می شود. چون نام دامنه و ساختار آن اهمیتی ندارد، فقط کافی است از دو کاراکتر استفاده کنید: کاراکتر نقطه، که بر هر کاراکتری منطبق می شود و کاراکتر ستاره (*) که با هر تعداد از کاراکتر قبلی –که در مثال ما هر کاراکتری است– منطبق می شود. حال عبارت با قاعده نهایی توسط متد ()exec به کار گرفته شده و نتیجه آن در متغير results ذخیره می گردد.

عبارت با قاعده برای ایمیل

برای اینکه بتوانید ایمیل وارد شده توسط کاربر را بررسی کنید، می توانید از تابع زیر استفاده کنید:

function validateEmail(sEmail) {
    var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
    if (filter.test(sEmail)) {
        return true;
    }
    else {
        return false;
    }
}

function validateEmail(sEmail) {

var filter = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;

if (filter.test(sEmail)) {

return true;

}

else {

return false;

}

این تابع، در صورتی که ایمیل به فرمت درستی وارد شده باشد، مقدار true و در غیر این صورت مقدار false را باز میگرداند.

عبارت با قاعده برای شماره موبایل

در بسیاری از موارد، نیاز دارید که شماره تماس کاربر را دریافت کنید. اما این احتمال وجود دارد که کاربر به صورت اشتباه آن را وارد کند. با استفاده از تابع زیر، می توانید درستی شماره تماس وارد شده را مشخص کنید:

function validateUSPhoneNumber(phoneNumber) {
    var regExp = /^(\+98|0)?9\d{9}$/;
    var phone = phoneNumber.match(regExp);
    if (phone) {
        return true;
    }
    return false;
}

function validateUSPhoneNumber(phoneNumber) {

var regExp = /^(\+98|0)?9\d{9}$/;

var phone = phoneNumber.match(regExp);

if (phone) {

return true;

}

return false;

}

تابع بالا نیز در صورت صحیح بودن شماره تماس، مقدار true و در غیر این صورت false را برمی میگرداند.

عبارت با قاعده برای آدرس سایت

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

function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
    return regexp.test(s);
}

function isUrl(s) {

var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/

return regexp.test(s);

}

عبارت با قاعده تاریخ شمسی

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

function checkShamsi(str) {
    var patt = /^[1-4]\d{3}\/((0[1-6]\/((3[0-1])|([1-2][0-9])|(0[1-9])))|((1[0-2]|(0[7-9]))\/(30|31|([1-2][0-9])|(0[1-9]))))$/;
    var result = patt.test(str);
    if (result) {
        var pos = str.indexOf('/');
        var year = str.substring(0,pos);
        var nextPos = str.indexOf('/',pos+1);
        var month = str.substring(pos+1,nextPos);
        var day = str.substring(nextPos+1);
        if(month==12 && (year+1) % 4!=0 && day==30) // kabise = 1379, 1383, 1387,... (year +1) divides on 4 remains 0
            result = false;
    }    
    return result;
}

function checkShamsi(str) {

var patt = /^[1-4]\d{3}\/((0[1-6]\/((3[0-1])|([1-2][0-9])|(0[1-9])))|((1[0-2]|(0[7-9]))\/(30|31|([1-2][0-9])|(0[1-9]))))$/;

var result = patt.test(str);

if (result) {

var pos = str.indexOf('/');

var year = str.substring(0,pos);

var nextPos = str.indexOf('/',pos+1);

var month = str.substring(pos+1,nextPos);

var day = str.substring(nextPos+1);

if(month==12 && (year+1) % 4!=0 && day==30) // kabise = 1379, 1383, 1387,... (year +1) divides on 4 remains 0

result = false;

}

return result;

}

استفاده از توابع بالا می تواند رضایت مندی کاربران را به دلیل سرعت بالای پاسخگویی افزایش داده و در دراز مدت بر روی افزایش بازدید سایت شما موثر باشد.

به صفحه تلگرام کلیک اول بپیوندید.

به صفحه اینستاگرام کلیک اول بپیوندید.

تیم تحریریه کلیک اول

نویسنده در بلاگ کلیک اول

این مقاله به قلم و نویسندگی تیم تحریریه کلیک اول تهیه شده است. هدف ما در کلیک اول، ارائه بستری مناسب برای وب مستران عزیز است که بتوانند مجموعه ای از خدمات مربوط به دیجیتال مارکتینگ، افزایش ترافیک سایت و همچنین شبکه های اجتماعی را به سادگی دریافت کنند.