در جاوا اسکریپت می توان از عبارات منظم (RegEx) برای تطبیق رشته ها یا بخش هایی از رشته ها استفاده کرد. برای ایجاد یک عبارت منظم، می توانید از سازنده RegEx یا نماد واقعی (/pattern/flags) استفاده کنید.
این را در یوتیوب مشاهده کنید
https://www.youtube.com/watch?v=5vmhTcJ3KGI
با استفاده از سازنده RegExp
let pattern = new RegExp("hello");
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);
با استفاده از نمادگذاری تحت اللفظی
let pattern = /hello/;
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);
علاوه بر test() روش، می توانید از روش های دیگری مانند exec()، match()، search()، و replace() برای کار با عبارات منظم
استفاده از متد match()
let pattern = /\d+/g;
let input = "I have 5 apples and 2 oranges.";
let result = input.match(pattern); // ["5", "2"]
console.log(result);
پرچم های RegEx
همچنین می توانید از پرچم ها برای تغییر رفتار عبارت منظم استفاده کنید. برخی از پرچم های رایج عبارتند از g (جهانی)، i (بدون حساس به حروف کوچک و بزرگ)، و m (چند خطی).
در اینجا یک مثال از استفاده از i پرچم:
let pattern = /hello/i;
let input = "Hello World";
let result = pattern.test(input); // true
console.log(result);
در این مثال، i flag عبارت منظم را حساس به حروف بزرگ می کند، بنابراین با Hello مطابقت دارد.
الگوها و معنی آنها
الگو چیست /\d+/g یعنی در مثال سوم من؟
بیان منظم /\d+/g از سه قسمت تشکیل شده است: اسلش های جلو (/)، الگو \d+، و پرچم g.
- جلو بریده می شود
/شروع و پایان عبارت منظم را تعریف کنید. - الگو
\d+مجموعه کاراکتری است که با یک یا چند رقم مطابقت دارد. این\dکاراکتر مختصر برای هر رقم (0-9) تنظیم شده است+کمیت مشخص می کند که یک یا چند عنصر قبلی باید وجود داشته باشد. بنابراین، یک یا چند رقم را با هم مطابقت خواهد داد. - پرچم
gمخفف global است، به این معنی که به جای توقف بعد از اولین مسابقه، همه مسابقات را پیدا می کند. بدون این پرچم، عبارت منظم فقط اولین مسابقه را برمی گرداند.
بنابراین، عبارت منظم /\d+/g یک یا چند رقم را با هم تطبیق می دهد و تمام رخدادهای آن مطابقت را در رشته ورودی برمی گرداند.
در کد مثال سوم، با تمام ارقام رشته ورودی مطابقت دارد.
در مورد String ReGex با استفاده از عبارات چطور؟
در جاوا اسکریپت می توانید از عبارات منظم با متدهای رشته ای مانند match()، search()، replace()، و split(). این روش‌ها به شما امکان می‌دهند تا با استفاده از قابلیت‌های تطبیق الگوی عبارات منظم، با رشته‌ها به روشی قدرتمندتر کار کنید.
متد match().
let input = "Hello World";
let result = input.match(/world/i); // ['World', index: 6, input: 'Hello World', groups: undefined]
console.log(result);
در این مثال، match() متد رشته ورودی را برای اولین رخداد جهان الگو، بدون حساس به حروف بزرگ، جستجو می کند. آرایه ای حاوی رشته همسان را برمی گرداند.
متد ()replace
let input = "Hello World";
let result = input.replace(/world/i, "javascript"); // "Hello javascript"
console.log(result);
در این مثال، replace() متد رشته ورودی را برای اولین اتفاق جهان الگو، بدون حساس به حروف بزرگ و کوچک جستجو می کند و آن را با “جاوا اسکریپت”.
روش search()
let input = "Hello World";
let result = input.search(/world/i); // 6
console.log(result);
در این مثال، search() متد رشته ورودی را برای اولین رخداد جهان الگو، بدون حساس به حروف بزرگ، جستجو می کند. ایندکس اولین کاراکتر رشته مطابق را برمی گرداند.
روش split().
let input = "Hello World";
let result = input.split(/\s+/); // ["Hello", "World"]
console.log(result);
در این مثال، split() متد رشته ورودی را با استفاده از الگو به آرایه‌ای از رشته‌های فرعی تقسیم می‌کند \s+ (یک یا چند فضای خالی) به عنوان جداکننده.
همچنین می توانید به جای نمایش رشته ای از الگو، شی عبارت منظم را به این متدها ارسال کنید. به عنوان مثال، می توانید به نحوه انجام آن در مثال سوم اشاره کنید.
دریافت متغیرهای دامنه از یک رشته
اگر در حال ایجاد روتر برنامه تک صفحه ای خود هستید، این regex بسیار مفید است. ممکن است آن را در دیگر آموزش های من یا حتی در ویدیوهای دیگر من دیده باشید.
برای دریافت دامنه از یک رشته با استفاده از یک عبارت منظم، می توانید از عبارت استفاده کنید match() روش همراه با یک الگوی عبارت منظم که بخش دامنه یک URL را می گیرد. در اینجا مثالی از نحوه انجام این کار آورده شده است:
let input = "https://thedevdrawer.com/path?query=value#hashtag";
let pattern = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/im;
let result = input.match(pattern);
console.log(result[0]); // https://thedevdrawer.com
console.log(result[1]); // thedevdrawer.com
در این مثال، الگوی عبارت منظم به صورت زیر است:
-
^با شروع رشته مطابقت دارد -
(?:https?:\/\/)?با اختیاری مطابقت دارد “http://” یا “https://” پروتکل،?کمیت این گروه را اختیاری می کند -
(?:[^@\/\n]+@)?با نام کاربری اختیاری مطابقت دارد و “@” نماد، که معمولاً قبل از دامنه در یک URL قرار می گیرد. این?کمیت این گروه را اختیاری می کند -
(?:www\.)?با اختیاری مطابقت دارد “www.” زیر دامنه،?کمیت این گروه را اختیاری می کند -
([^:\/?\n]+)منطبق بر یک یا چند کاراکتر که نیستند “:”، “https://dev.to/”، “؟”، یا الف خط جدید، و نام دامنه را می گیرد. -
/imپرچم ها هستندiبرای حروف کوچک و بزرگ وmبرای چند خط
این match() متد اولین تطابق الگوی عبارت منظم را در رشته ورودی جستجو می‌کند و یک آرایه حاوی رشته منطبق و هر گروه گرفته شده را برمی‌گرداند. در این حالت دامنه در گروه اول (result[1]) آرایه برگشتی.
در این مثال ورودی “https://thedevdrawer.com/path?query=value#hashtag” است و خروجی “https://thedevdrawer.com” در index 0 و “thedevdrawer.com” در شاخص 1 خواهد بود.
Query و Hash را دریافت کنید
برای دریافت پرس و جو و هش از URL با استفاده از یک عبارت منظم، می توانید از متد match() به همراه الگوهای عبارات منظم جداگانه برای هر قسمت استفاده کنید. در اینجا مثالی از نحوه انجام این کار آورده شده است:
let queryPattern = /\?([^#]*)/
let hasOnlyPattern = /#(.*)/
let query = input.match(queryPattern)[1]
let hash = input.match(hasOnlyPattern)[1]
console.log(query)
console.log(hash)
در این مثال از دو الگوی عبارت منظم استفاده می کنیم:
-
/\?([^#]*)/استفاده می کند[^#]*برای مطابقت با هر شخصیت به جز ‘#’ نماد، و همه چیز را بعد از علامت سوال تا زمانی که نشان می دهد، ثبت می کند ‘#’ نماد (در صورت وجود). -
/#(.*)/با نماد هش و به دنبال آن صفر یا چند کاراکتر مطابقت دارد.*، و همه چیز را بعد از هش ضبط می کند. پرانتز()دور و بر.*یک گروه ضبط ایجاد کنید که به ما امکان می دهد فقط قطعه هش را استخراج کنیم.
این match() متد اولین تطابق الگوی عبارت منظم را در رشته ورودی جستجو می‌کند و یک آرایه حاوی رشته منطبق و هر گروه گرفته شده را برمی‌گرداند. در این مورد، گروه گرفته شده را در شاخص 1 (دومین مورد در آرایه) استخراج می کنیم تا فقط رشته پرس و جو و قطعه هش را بدست آوریم.
در این مثال، ورودی “https://thedevdrawer.com/path?query=value#hashtag” است و خروجی به صورت زیر خواهد بود:
query: “query=value”
hash: “هشتگ”
مقدار پرس و جو را دریافت کنید
برای اینکه فقط مقدار را از رشته پرس و جو با استفاده از یک عبارت معمولی بدست آورید، می توانید الگوی عبارت منظم را تغییر دهید تا فقط قسمت مقدار از جفت کلید-مقدار را بگیرد. در اینجا مثالی از نحوه انجام این کار آورده شده است:
let queryOnlyPattern = /(?:[?&])(query)=([^&#]+)/
let match = input.match(queryOnlyPattern)[2]
console.log(match)
در این مثال، الگوی عبارت منظم به صورت زیر است:
-
(?:[?&])با علامت سوال یا علامت علامت که یک جفت کلید-مقدار را شروع می کند، مطابقت دارد، اما آن را ثبت نمی کند. -
(query)کلید را می گیرد “پرس و جو” در یک گروه. -
=([^&#]+)با علامت مساوی مطابقت دارد و همه چیز بعد از آن را تا نماد یا علامت هش بعدی ثبت می کند. پرانتز()دور و بر[^&#]+یک گروه ضبط ایجاد کنید که به ما امکان می دهد فقط قسمت مقدار جفت کلید-مقدار را استخراج کنیم.
این match() متد اولین تطابق الگوی عبارت منظم را در رشته ورودی جستجو می‌کند و یک آرایه حاوی رشته منطبق و هر گروه گرفته شده را برمی‌گرداند. در این مورد، گروه گرفته شده را در شاخص 2 (سومین مورد در آرایه) استخراج می کنیم تا فقط مقدار کلید “پرس و جو” را بدست آوریم.
در این مثال، ورودی “https://thedevdrawer.com/path?query=value#hashtag” است و خروجی به صورت زیر خواهد بود:
ارزش: “ارزش”
توجه داشته باشید: به خاطر داشته باشید که این الگوی regex برای مطابقت با قالب خاصی از URL طراحی شده است و ممکن است برای همه انواع URL ها یا رشته های جستجو/هش کار نکند. ممکن است برای مطابقت با فرمت‌های دیگر نیاز به اصلاح یا الگوهای اضافی داشته باشد.
امیدواریم، این به شما کمک کند تا عبارات منظم در جاوا اسکریپت را درک کنید، در صورتی که در مورد برخی از ویدیوهای قبلی من که از آنها استفاده می کردند سؤالی دارید. اگر سوالی دارید، در زیر نظر خود را درج کنید.
