عبارت های منظم در جاوا اسکریپت , Regular expressions in javascript

Regular expressions in javascript
Regular expressions in javascript


امیدوارم از این سری اموزش های بنده لذت برده باشید و اگر کم و کاستی بود عذرخواهی بنده رو بپذیرید و چنانچه اگر فکر میکنید که بخش هایی از اموزش نیاز به تغییرات داره تو قسمت نظرات اعلام کنید

در این قسمت از اموزش regular expressions که قسمت اخر هست به چند بحث مهم باقی مونده میپردازیم و در نهایت این اموزش رو با یک مثال عملی که در اخر همین بخش هست به پایان میرسونیم


فلگ y

از فلگ y برای جستجو در موقعیت (جایگاه) پترن استفاده میشه قبل اینکه درباره فلگ y مثال بزنم مثال زیر رو ببینید : 

let str = 'let varName';

let regexp = /\w+/g;
console.log(regexp.lastIndex); // 0 (ابتدا ی lastIndex=0)

let word1 = regexp.exec(str);
console.log(word1[0]); // let (1st word)
console.log(regexp.lastIndex); // 3 (اخرین پوزیشن مچ شده )

let word2 = regexp.exec(str);
console.log(word2[0]); // varName (2nd word)
console.log(regexp.lastIndex); // 11 (اخرین پوزیشن مچ شده )

let word3 = regexp.exec(str);
console.log(word3); // null (مقدار منطبق دیگه ای وجود نداره)
console.log(regexp.lastIndex); // 0 
//(در اخر جستجو تظنیم مجدد میشه یعنی دوباره ازاولین پوزیشن که  0  هست شروع میشه)


برای جستجو کردن مقادیری که توی متغییر str وجود دارن میتونیم از متد exec استفاده کنیم

نکته : اگر پترن ما فلگ g یا y رو نداشته باشه به پیدا کردن اولین مقدار منطبق(مچ) بسنده میکنه

اگر فلگ g وجود داشته باشه شروع میکنه به جستجو اولین مقدار ذخیره شده در رشته و پوزیشن(موقعیت,محل) اخرین کاراکتر رو ذخیره میکنه توی پراپرتی lastIndex و اگر مقدار دیگه ای باشه که منطبق باشه دوباره میره تا اخرین پوزیشن و دوباره اون رو میریزه توی lastIndex و به همین ترتیب

نکته : وقتی پترن شروع به مچ شدن میکنه پوزیشن پراپرتی lastIndex برابر با 0 هست

بنابراین بعد از هربار فراخوانی متغییر str درون exec که مثالش بالا هست مقادیر منطبق شده پشت سرهم توی کنسول نمایش داده میشن تا برسه به اخرین مقدار منطبق شده و چنانچه مقدار قابل انطباقی وجود نداشته باشه خروجی null خواهد بود.

هر مقدار منطبق مانند یک ارایه با گروه و پراپرتی های اضافه خودش هست , ما میتونیم بجای مثال بالا از حلقه استفاده کنیم مثال زیر رو ببینید :

let str = 'let varName';
let regexp = /\w+/g;
let result;
while (result = regexp.exec(str)) {
  console.log( `Found ${result[0]} at position ${result.index}` );
  // Found let at position 0, then
  // Found varName at position 4
}


در واقع حلقه while در اینجا کار متد matchAll رو میکنه که توضیح دشواری نداره یادگیری این مورد رو به خودتون واگذار میکنم :) میتونید از لینک زیر هم استفاده کنید :

https://javascript.info/regexp-methods#str-matchall-regexp

ما میتونیم پوزیشن متد lastIndex رو به صورت کاستوم (دستی) هم مقدار بدیم مثال زیر رو ببینید : 


let str = 'let varName = &quotvalue&quot';
let regexp = /\w+/g; //بدون فلگ g 
//متد lastIndex 
//نادیده گرفته میشه
regexp.lastIndex = 4; //پوزیشن دستی که بهش دادیم 
let word = regexp.exec(str);
console.log(word); // varName

نکته مهم : در واقع یکی از تفاوت های فلگ g با y در این است که فلگ g میتونه از قبل یا بعد از اخرین پوزیشن منطبق شده شروع کنه به ثبت پوزیشن توی پراپرتی lastIndex یعنی اگر شما space (فاصله) رو بهش به عنوان پوزیشن بدید میره قبل یا بعدش رو که کاراکتر رشته ای هست رو میگیره اما فلگ y فقط خوده کاراکتر رو به عنوان پوزیشن میریزه توی lastIndex به مثال بالا و پایین توجه کنید .

let str = 'let varName = &quotvalue&quot';
let regexp = /\w+/y;
regexp.lastIndex = 3;
console.log( regexp.exec(str) ); // null (پوزیشن داده شده در اینجا فاصله است نه کاراکتر)
regexp.lastIndex = 4;
console.log( regexp.exec(str) ); // varName (word at position 4)

همانطور که گفتیم و در مثال بالا دیدید در خط چهارم مثال بالا خروجی null شد چون پوزیشن 3 در متغییر str فاصله (space) بود

تصور کنید ما یک متن طولانی داریم و هیچ مقدار قابل انطباقی درونش نیست و شما با فلگ g درونش سرچ میکنید این سرچ تا پایان متن ادامه خواهد داشت این امر زمان قابل ملاحظه ای را بجای سرچ کردن با y خواهد گرفت

در کارهای مانند تحلیل واژگان(lexical analysis) معمولا بسیاری از جستجو ها در نقطه دقیق پوزیشن انجام میگیرد .استفاده از فلگ y کلید پرفرمونس (کارایی,اجرا) خوب است

کاراکتر caret (^)

از کاراکتر caret (^)علاوه بر محدود کردن پترن که در قسمت اول اموزشمون گفتیم میتوان به عنوان محدود کننده کاراکتر ها هم استفاده کرد برای مثال میتونیم کاراکتر هایی مثل # % رو محدود کنید مثال زیر رو ببینید :

let str = 'example@#email.com';
console.log(str.replace(/\w+/g, ''));  //@#.

من برای درک بهتر از متد repalce استفاده کردم برای اینکه نیازی به استفاده از متد نداشته باشید برید تو این سایتی که لینکش رو میدم و اونجا امتحان کنید(البته فک میکنم تحریم باشه) مثل تصویر زیر:

https://www.regexpal.com/
https://www.regexpal.com/


در تصویر بالا همانطور که مشاهده میکنید کاراکتر @ و . نادیده گرفته شدن


نکته : کاراکتر . بیرون از [ ] یک کاراکتر خاص شناخته میشه و درون [ ] یک کاراکتر معمولی هست

فلگ m

این فلگ برای مقادیر چند خطی مورد استفاده قرار میگیره , به مثال های زیر توجه کنید :


توجه داشته باشید که برای تعریف مقادیر چند خطی درون یک متغییر در جاوا اسکریپت باید از بک تیک(``) استفاده کنید (محل قرار گرفتنش کنار عدد یک روی کیبرد هست زیر Esc) 


let str = `Hello
Hello
Hello
`;
console.log(str.replace(/^Hello$/, 'GoodBye')); //پترن نمیتونه شناخته بشه چون مقدار متغییر 
// چند خطی هست str 

//Hello Hello Hello


let str = `Hello
 Hello
 Hello
 `; 
console.log(str.replace(/^Hello$/m, 'GoodBye'));  //پترن رشته رو شناخت 
// GoodBye  Hello Hello

let str = `Hello
Hello
Hello
`;
console.log(str.replace(/^Hello$/mg, 'GoodBye'));   /پترن رشته رو شناخت و بدلیل استفاده از 
// فلگ g 
// تمامی مقادیر متغییر
// str تغییر کرد
 //GoodBye GoodBye GoodBye

مثال عملی :

مثال اعتبار سنجی فرم :


index.html
index.html
style.css
style.css


app.js
app.js


همچنین میتونید کد هارو رو بصورت متنی هم ببینید :


https://codepen.io/mohammadali0120/pen/VwvZvWQ

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


خب امیدوارم از این مجموعه اموزش های Regular Expressions لذت برده باشید و بکارتون اومده بشه سعی کردم در این اموزش اکثر مواردی رو که نیازه پوشش بدم اما اگر دوست دارید عمیق تر این موضوع رو یاد بگیرید میتونید به لینک دوم منابعی که در زیر معرفی کردم مراجعه کنید , پیشنهاد یا انتقادی هم بود زیر همین پست درج کنید .


https://eloquentjavascript.net/09_regexp.html

https://javascript.info/regular-expressions


پایان اموزش