مثال ها

نمونه مثال‌های عملی (Examples)

نکته: نمونه مثال‌های متعدد دیگری نیز در منابع زیر در دسترس هستند:

• صفحات مرجع برای متدهای exec() ،test() ،match() ،matchAll() ،search() ،replace() و split().

• مقالات راهنما درباره‌ی: کلاس‌های کاراکتری، Assertions، گروه‌ها و مراجع بازگشتی، و کمیت‌سنج‌ها.

استفاده از کاراکترهای ویژه برای اعتبارسنجی ورودی

در مثال زیر، از کاربر خواسته می‌شود تا یک شماره تلفن را وارد کند. وقتی کاربر روی دکمه‌ی "Check" کلیک می‌کند، اسکریپت معتبر بودن این شماره را بررسی می‌کند. اگر شماره معتبر باشد (یعنی با توالی کاراکترهای مشخص‌شده توسط عبارت باقاعده مطابقت داشته باشد)، برنامه پیام تشکری جهت تایید شماره به کاربر نشان می‌دهد. اگر شماره نامعتبر باشد، سیستم به کاربر اعلام می‌کند که شماره تلفن وارد شده صحیح نیست.

عبارت باقاعده‌ی استفاده شده در این مثال به دنبال ساختار زیر می‌گردد:

1. ^: ابتدا و شروع خط داده‌ها.

2. (?:\d{3}|\(\d{3}\)): در یک گروه غیرتسخیرکننده ((?:))، به دنبال سه کاراکتر عددی \d{3} یا (|) یک پرانتز باز \( که بعد از آن سه رقم \d{3} و سپس یک پرانتز بسته \) آمده است، می‌گردد.

3. ([-/.]): در یک گروه تسخیرکننده (())، به دنبال یک خط تیره (Dash)، اسلش یا نقطه می‌گردد.

4. \d{3}: به دنبال سه رقم می‌گردد.

5. \1: به دنبال مطابقتی می‌گردد که در (اولین) گروه تسخیرکننده به خاطر سپرده شده بود.

6. \d{4}: به دنبال چهار رقم می‌گردد.

7. $: انتها و پایان خط داده‌ها.

کد HTML

<p>
  Enter your phone number (with area code) and then click "Check".
  <br />
  The expected format is like ###-###-####.
</p>
<form id="form">
  <input id="phone" />
  <button type="submit">Check</button>
</form>
<p id="output"></p>

کد JavaScript

const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const output = document.querySelector("#output");

// تعریف عبارت باقاعده بر اساس ساختار توضیح داده شده
const re = /^(?:\d{3}|\(\d{3}\))([-/.])\d{3}\1\d{4}$/;

function testInfo(phoneInput) {
  const ok = re.exec(phoneInput.value);

  output.textContent = ok
    ? `Thanks, your phone number is ${ok[0]}`
    : `${phoneInput.value} isn't a phone number with area code!`;
}

form.addEventListener("submit", (event) => {
  event.preventDefault();
  testInfo(input);
});