اشنایی و آموزش عبارات باقاعده (Regex) در جاوااسکریپت

مقدمه

حتماً دیدین که برنامه‌نویسا توی سایت‌ها دنبال اینن که مثلاً:

  • مطمئن شن فقط اعداد گرفته شدن!
  • فقط ایمیل درست قبول بشه!
  • رمز عبور قوی باشه!
    اینجا پای یه ابزار جذاب به اسم عبارت باقاعده (Regular Expression) یا همون Regex وسطه.

عبارت باقاعده یه روش ساده و سریع برای بررسی یا جستجو کردن متن‌ها بر اساس الگو (Pattern) هست.

عبارت باقاعده (Regex) یعنی چی؟

عبارت باقاعده یه رشته‌ی خاصه (مثلاً /^[0-9]+$/) که نشون می‌ده چه شکلی از متن معتبره؛ مثل:

  • فقط عدد
  • فقط حروف
  • فقط ایمیل با ساختار درست

در جاوااسکریپت، regex رو داخل / / می‌نویسیم.

ساختار اولیه Regex

مثال خیلی ساده:

var pattern = /abc/;

این یعنی فقط دنبال “abc” بگرد!

علامت‌های مهم در regex با توضیحات خیلی ساده و مثال

۱. ^ (کلاه: ابتدای رشته)

  • توضیح: هر چیزی با ^ شروع بشه، یعنی می‌خواهیم ببینیم یک متن با چه چیزی شروع شده.
  • مثال:
    /^a/ یعنی متن باید با “a” شروع بشه.
/^a/.test("apple")   // نتیجه: true
/^a/.test("banana")  // نتیجه: false

۲. $ (دلار: انتهای رشته)

  • توضیح: علامت $ یعنی انتهای متن، می‌خواهیم ببینیم آخر متن چی باشه.
  • مثال:
    /z$/ یعنی متن باید با “z” تموم بشه.
/z$/.test("buzz")   // نتیجه: true
/z$/.test("pizza")  // نتیجه: false

۳. . (نقطه: هر کاراکتری)

  • توضیح: نقطه یعنی هر کاراکتری؛ یعنی هرچی به جای نقطه می‌تونه بیاد (حرف، عدد، علامت)
  • مثال:
    /a.c/ یعنی اول “a”، بعد هر کاراکتری، بعدش “c”
/a.c/.test("abc")    // نتیجه: true  (چون "b" هر کاراکتریه)
/a.c/.test("a_c")    // نتیجه: true
/a.c/.test("ac")     // نتیجه: false (چون باید حتماً یک کاراکتر بین a و c باشه)

۴. * (ستاره: صفر یا بیشتر بار)

  • توضیح: یعنی چیزی که قبل ستاره اومده می‌تواند هیچ بار، یک بار یا چند بار تکرار شود.
  • مثال:
    /ab*c/ یعنی “a”، بعدش صفر یا بیشتر “b”، بعدش یک “c”
/ab*c/.test("ac")      // true  (هیچ b نداره)
 /ab*c/.test("abc")     // true (یک بار b)
 /ab*c/.test("abbc")    // true (دو بار b)
 /ab*c/.test("abbbbc")  // true (چهار بار b)

۵. + (جمع: یک یا بیشتر بار)

  • توضیح: چیزی که قبل “+” اومده باید حتماً حداقل یک بار تکرار بشه.
  • مثال:
    /ab+c/ یعنی “a”، بعدش حداقل یک “b”، بعدش “c”
/ab+c/.test("abc")     // true  (یک b)
 /ab+c/.test("abbc")    // true  (دو b)
 /ab+c/.test("ac")      // false (هیچ b نداره)

۶. ? (علامت سوال: صفر یا یک‌بار)

  • توضیح: یعنی چیزی که قبل ? اومده می‌تونه باشد یا نباشد (حداکثر یک بار).
  • مثال:
    /ab?c/ یعنی “a”، بعدش حداکثر یک “b”، بعدش “c”
/ab?c/.test("ac")      // true  (b نیومده)
 /ab?c/.test("abc")     // true  (b فقط یک بار اومده)
 /ab?c/.test("abbc")    // false (b دو بار اومده)

۷. [ ] (براکت: یکی از این‌ها)

  • توضیح: یعنی فقط یکی از کاراکترهای داخل براکت قابل قبول است.
  • مثال:
    /[abc]/ یعنی یا “a”، یا “b”، یا “c”
/[abc]/.test("apple")   // true  (a هست)
 /[abc]/.test("ball")    // true  (b هست)
 /[abc]/.test("dog")     // false (هیچ‌کدوم نیست)

۸. {n,m} (تعداد تکرار بین n تا m بار)

  • توضیح: می‌خواهیم یک چیز بین تعداد مشخصی تکرار شود (حداقل n بار و حداکثر m بار)
  • مثال:
    /a{2,4}/ یعنی a باید حداقل ۲ بار و حداکثر ۴ بار پشت سر هم تکرار شود.
/a{2,4}/.test("aa")      // true  (دو بار)
 /a{2,4}/.test("aaaa")    // true  (چهار بار)
 /a{2,4}/.test("a")       // false  (یک بار)
 /a{2,4}/.test("aaaaa")   // true  (چهار بارش اثر می‌کنه؛ فقط اولین چهارتا حساب میشه، این بستگی به کاربرد داره)

**اگر دقیقا n بار بخواهی، بنویس {n} مثلاً /a{3}/ یعنی دقیقا سه تا “a”.

۹. \d (دی: یک عدد)

  • توضیح: یعنی یک عدد بین 0 تا 9
  • مثال:
    /\d/ یعنی هر جایی که یک عدد باشد.
/\d/.test("a1b")      // true (چون 1 عدد است)
/\d/.test("ab")       // false

۱۰. \w (دبلیو: یک حرف، عدد یا آندرلاین _)

  • توضیح: یعنی هرکدام از حروف انگلیسی (a تا z یا A تا Z) یا هر عدد یا آندرلاین
  • مثال:
    /\w/
/\w/.test("ali")      // true (حرف)
/\w/.test("123")      // true (عدد)
/\w/.test("__")       // true (آندرلاین)
/\w/.test("@!#")      // false (هیچ‌کدام حروف، عدد یا _ نیستند)

۱۱. \s (اس: یک فاصله)

  • توضیح: یعنی space، tab یا enter
  • مثال:
    /\s/
/\s/.test("ali reza")   // true (یک فاصله بین کلمه‌ها هست)
/\s/.test("alireza")    // false (هیچ فاصله‌ای نیست)

۱۲. | (پایپ: یا)

  • توضیح: یعنی “یا این یا آن”
  • مثال:
    /Ali|Reza/
/Ali|Reza/.test("Ali")     // true
/Ali|Reza/.test("Reza")    // true
/Ali|Reza/.test("Sina")    // false

مثال ترکیبی

فرض کن می‌خوای یک رشته فقط با “a” شروع شود و بعدش فقط عدد باشد و در انتها به “b” ختم شود:

  • ^a\d+b$
    این یعنی:
  • ابتدای رشته a باشد،
  • بعدش یک یا چند رقم باشد،
  • انتهای رشته با b تمام شود.

تست با جاوااسکریپت:

/^a\d+b$/.test("a123b")   // true
/^a\d+b$/.test("ab")      // false
/^a\d+b$/.test("a12bb")   // false

مهم‌ترین علامت‌ها در Regex

علامتمعنی ساده‌اش چی هست؟مثال
^ابتدای رشته/^a/ یعنی با a شروع شود
$انتهای رشته/z$/ یعنی با z تمام شود
.هر کاراکتری/a.c/ : “abc”, “axc”
*صفر یا بیشتر بار/ab*c/: “ac”, “abc”, “abbc”
+یک یا بیشتر بار/ab+c/: “abc”, “abbc”
?صفر یا یکبار/ab?c/: “ac”, “abc”
[ ]یکی از بین/[abc]/ یعنی a یا b یا c باشد
{n,m}بین n تا m بار/a{2,4}/: “aa”, “aaa”, “aaaa”
\dیک عدد/\d/: “5”
\wحرف، عدد یا _/\w/: “a”, “1”, “_”
\sفاصله (space, tab)
|یا/a|b/ : “a” یا “b”

تست یک عبارت باقاعده با جاوااسکریپت

می‌خوایم ببینیم داده‌مون با یه pattern مطابقت داره یا نه.
از تابع .test() استفاده می‌کنیم:

مثال: فقط عدد بودن ورودی

var pattern = /^\d+$/; // فقط عدد
console.log(pattern.test("123"));   // true
console.log(pattern.test("abc"));   // false

چند الگوی پرکاربرد

۱. فقط حاوی حروف انگلیسی

var onlyLetters = /^[a-zA-Z]+$/;
console.log(onlyLetters.test("Ali"));     // true
console.log(onlyLetters.test("Ali123"));  // false

۲. فقط عدد

var onlyNumbers = /^\d+$/;
console.log(onlyNumbers.test("123")); // true
console.log(onlyNumbers.test("abc")); // false

۳. بررسی ایمیل ساده

var emailPattern = /^[^@]+@[^@]+\.[a-zA-Z]{2,}$/;
console.log(emailPattern.test("ali@gmail.com")); // true
console.log(emailPattern.test("ali@gmail"));     // false

۴. رمز عبور قوی (حداقل ۸ کاراکتر، حتما عدد و حرف بزرگ و کوچک داشته باشد)

var strongPass = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/;
console.log(strongPass.test("Ali12345"));   // true
console.log(strongPass.test("ali12345"));   // false (حرف بزرگ ندارد)

توضیح قسمت‌ها:

  • (?=.*[a-z]) حداقل یک حرف کوچک
  • (?=.*[A-Z]) حداقل یک حرف بزرگ
  • (?=.*\d) حداقل یک عدد
  • .{8,} حداقل هشت کاراکتر

مثال عملی: فیلتر کردن فقط عدد وارد شده در فرم

<input id="numInput" type="text" placeholder="فقط عدد وارد کنید">
<div id="msg"></div>
<script>
document.getElementById("numInput").addEventListener("input", function(){
  var value = this.value;
  var numberPattern = /^\d*$/;
  if(numberPattern.test(value)){
    document.getElementById("msg").innerText = "درسته!";
  } else {
    document.getElementById("msg").innerText = "فقط عدد وارد کنید!";
  }
});
</script>

کاربردهای دیگر Regex در جاوااسکریپت

۱. پیدا کردن بخش خاصی از متن:

"سلام123خوبی؟".match(/\d+/); // ['123']

۲. جایگزین کردن متن:
مثلاً حروف کوچک را با بزرگ عوض کن:

"ali".replace(/[a-z]/g, function(c){ return c.toUpperCase(); }); // "ALI"

نکات جمع‌بندی و تجربه

  • عبارات باقاعده گاهی خیلی پیچیده، اما بیشتر وقت‌ها ساده و قابل فهم‌اند!
  • از سایت regex101.com برای تست و فهم regexها کمک بگیر.
  • اول با الگوهای ساده تمرین کن، بعد آروم‌آروم برو سراغ موارد پیشرفته‌تر.

تمرین سریع:

یک عبارت باقاعده بنویس که فقط شماره موبایل ایرانی ۱۱ رقمی (با 09 شروع شود) را قبول کند!

پاسخ:

var iranMobile = /^09\d{9}$/;
console.log(iranMobile.test("09123456789")); // true
console.log(iranMobile.test("9123456789"));  // false

محمد وب‌سایت
مطالب مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *