Regular Expression در جاوااسکریپت

بهنام نوبخت · ۱۴۰۵/۷/۱۱

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

برای انجام چنین بررسی‌هایی در جاوااسکریپت ابزاری به نام Regular Expression یا به اختصار RegEx وجود دارد.

Regular Expression در ابتدا ممکن است کمی عجیب به نظر برسد، اما اگر آن را مرحله‌به‌مرحله یاد بگیریم، می‌توانیم الگوهای متنی بسیار کاربردی ایجاد کنیم.

در این مقاله از ساده‌ترین مفاهیم شروع می‌کنیم و با موارد زیر آشنا می‌شویم:

Regular Expression چیست؟

Regular Expression الگویی است که برای پیدا کردن، بررسی یا جایگزین کردن بخش‌هایی از یک متن استفاده می‌شود.

برای مثال اگر بخواهیم بررسی کنیم که آیا یک متن شامل کلمه JavaScript است یا خیر، می‌توانیم یک Regular Expression ساده ایجاد کنیم:

/JavaScript/

این عبارت می‌گوید:

به دنبال متن JavaScript بگرد.

ساخت یک Regular Expression

در جاوااسکریپت یکی از ساده‌ترین روش‌ها برای ساخت RegEx استفاده از علامت / است.

مثلاً:

const pattern = /hello/;

اکنون متغیر pattern یک Regular Expression دارد.

متد test()

یکی از مهم‌ترین متدهای RegEx، متد:

test()

است.

این متد بررسی می‌کند که آیا یک متن با الگوی مشخص‌شده مطابقت دارد یا خیر.

مثال:

const pattern = /hello/;

console.log(
    pattern.test("hello world")
);

نتیجه:

true

چون عبارت hello در متن وجود دارد.

مثال دیگر:

console.log(
    pattern.test("JavaScript")
);

نتیجه:

false

چون عبارت hello در متن وجود ندارد.

یک مثال ساده

const pattern = /cat/;

console.log(
    pattern.test("I have a cat")
);

console.log(
    pattern.test("I have a dog")
);

نتیجه:

true
false

حساس بودن به حروف بزرگ و کوچک

به صورت پیش‌فرض Regular Expression نسبت به حروف بزرگ و کوچک حساس است.

مثلاً:

const pattern = /javascript/;

console.log(
    pattern.test("JavaScript")
);

نتیجه:

false

چون javascript و JavaScript دقیقاً یکسان نیستند.

Flag مربوط به i

برای نادیده گرفتن تفاوت حروف بزرگ و کوچک می‌توانیم از Flag:

استفاده کنیم.

مثلاً:

const pattern = /javascript/i;

console.log(
    pattern.test("JavaScript")
);

نتیجه:

true

Flag چیست؟

Flagها رفتار Regular Expression را تغییر می‌دهند.

برخی Flagهای مهم:

Flag	کاربرد
`i`	نادیده گرفتن حروف بزرگ و کوچک
`g`	پیدا کردن تمام تطابق‌ها
`m`	کار با چند خط
`s`	اجازه تطابق `.` با Line Terminatorها

در ادامه بیشتر با آن‌ها آشنا می‌شویم.

جستجوی یک حرف

می‌توانیم یک حرف مشخص را جستجو کنیم:

const pattern = /a/;

console.log(
    pattern.test("apple")
);

نتیجه:

true

Character Class

یکی از مفاهیم مهم RegEx، Character Class است.

برای مثال:

[abc]

یعنی:

یکی از حروف a، b یا c.

مثال:

const pattern = /[abc]/;

console.log(
    pattern.test("apple")
);

نتیجه:

true

چون apple شامل a است.

مثال:

console.log(
    pattern.test("dog")
);

نتیجه:

false

چون dog هیچ‌کدام از a، b یا c را ندارد.

چند حرف پشت سر هم

اگر بنویسیم:

[abc][abc]

یعنی دو کاراکتر پشت سر هم که هرکدام باید یکی از a، b یا c باشند.

مثلاً:

const pattern = /[abc][abc]/;

console.log(
    pattern.test("ab")
);

نتیجه:

true

محدوده حروف

می‌توانیم محدوده مشخص کنیم.

مثلاً:

[a-z]

یعنی یکی از حروف انگلیسی کوچک از a تا z.

مثال:

const pattern = /[a-z]/;

console.log(
    pattern.test("hello")
);

نتیجه:

true

برای حروف بزرگ:

[A-Z]

و برای اعداد:

[0-9]

ترکیب محدوده‌ها

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

[A-Za-z0-9]

یعنی:

حروف بزرگ
حروف کوچک
اعداد

مثال:

const pattern = /^[A-Za-z0-9]+$/;

console.log(
    pattern.test("user123")
);

نتیجه:

true

علامت ^

علامت:

در ابتدای Pattern معمولاً به معنی شروع متن است.

مثلاً:

const pattern = /^hello/;

یعنی متن باید با hello شروع شود.

مثال:

console.log(
    pattern.test("hello world")
);

نتیجه:

true

اما:

console.log(
    pattern.test("say hello")
);

نتیجه:

false

چون متن با hello شروع نشده است.

علامت $

علامت:

در انتهای Pattern به معنی پایان متن است.

مثلاً:

const pattern = /world$/;

یعنی متن باید با world تمام شود.

console.log(
    pattern.test("hello world")
);

نتیجه:

true

اما:

console.log(
    pattern.test("world hello")
);

نتیجه:

false

ترکیب ^ و $

این دو علامت بسیار مهم هستند.

مثلاً:

const pattern = /^hello$/;

یعنی کل متن باید دقیقاً hello باشد.

بنابراین:

pattern.test("hello");

نتیجه:

true

ولی:

pattern.test("hello world");

نتیجه:

false

علامت نقطه .

علامت:

در RegEx معمولاً به معنی یک کاراکتر است.

مثلاً:

const pattern = /h.llo/;

می‌تواند با:

hello
hallo
hillo
hollo

مطابقت داشته باشد.

چون بین h و llo یک کاراکتر قرار گرفته است.

Quantifier چیست؟

Quantifier مشخص می‌کند یک بخش از Pattern چند بار تکرار شود.

یکی از مهم‌ترین Quantifierها:

+
*
?
{n}
{n,m}

هستند.

علامت +

علامت:

یعنی:

یک یا چند بار

مثلاً:

const pattern = /a+/;

این Pattern با مواردی مانند:

a
aa
aaa
aaaa

مطابقت دارد.

مثال:

console.log(
    pattern.test("aaa")
);

نتیجه:

true

علامت *

علامت:

یعنی:

صفر یا چند بار

مثلاً:

const pattern = /ab*/;

می‌تواند با:

a
ab
abb
abbb

مطابقت داشته باشد.

علامت ?

علامت:

یعنی:

صفر یا یک بار

مثلاً:

const pattern = /colou?r/;

این Pattern می‌تواند با:

color
colour

مطابقت داشته باشد.

تعداد مشخص با {n}

اگر بخواهیم چیزی دقیقاً چند بار تکرار شود، می‌توانیم از {n} استفاده کنیم.

مثلاً:

const pattern = /^[0-9]{4}$/;

یعنی:

دقیقاً ۴ رقم

بنابراین:

معتبر است.

اما:

معتبر نیست.

و:

نیز معتبر نیست.

محدوده تعداد با {n,m}

مثلاً:

{3,5}

یعنی حداقل ۳ و حداکثر ۵ بار.

مثال:

const pattern = /^[0-9]{3,5}$/;

مقادیر زیر:

123
1234
12345

معتبر هستند.

اما:

12
123456

معتبر نیستند.

مثال: فقط عدد

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

const pattern = /^[0-9]+$/;

مثلاً:

console.log(
    pattern.test("12345")
);

نتیجه:

true

اما:

console.log(
    pattern.test("123abc")
);

نتیجه:

false

مثال: فقط حروف انگلیسی

const pattern = /^[A-Za-z]+$/;

console.log(
    pattern.test("Hello")
);

نتیجه:

true

اما:

console.log(
    pattern.test("Hello123")
);

نتیجه:

false

مثال: Username ساده

فرض کنیم Username باید:

فقط شامل حروف انگلیسی و عدد باشد.
حداقل ۳ کاراکتر داشته باشد.
حداکثر ۲۰ کاراکتر داشته باشد.

می‌توانیم بنویسیم:

const pattern =
    /^[A-Za-z0-9]{3,20}$/;

مثال:

console.log(
    pattern.test("ali123")
);

نتیجه:

true

اما:

console.log(
    pattern.test("al")
);

نتیجه:

false

Character Class منفی

اگر داخل Character Class از:

در ابتدای آن استفاده کنیم، معنی آن تغییر می‌کند.

مثلاً:

[^0-9]

یعنی:

هر کاراکتری به جز عدد.

مثال:

const pattern = /[^0-9]/;

console.log(
    pattern.test("123a")
);

نتیجه:

true

چون a عدد نیست.

کوتاه‌نویسی‌های مهم

RegEx برای برخی Character Classها کوتاه‌نویسی دارد.

d\

\d

یعنی یک رقم.

تقریباً معادل:

[0-9]

است.

مثال:

const pattern = /^\d+$/;

D\

\D

یعنی یک کاراکتر غیرعددی.

w\

\w

معمولاً برای کاراکترهای Word مانند حروف انگلیسی، اعداد و _ استفاده می‌شود.

تقریباً:

[A-Za-z0-9_]

W\

\W

کاراکتری خارج از مجموعه Word است.

s\

\s

برای White Space مانند Space و برخی فاصله‌های دیگر استفاده می‌شود.

S\

\S

یعنی کاراکتری که White Space نیست.

مثال با d\

const pattern = /^\d{4}$/;

console.log(
    pattern.test("2026")
);

نتیجه:

true

Group چیست؟

با پرانتز می‌توانیم بخش‌هایی از Pattern را گروه‌بندی کنیم.

مثلاً:

(abc)

مثال:

const pattern = /(hello)+/;

یعنی عبارت hello می‌تواند یک یا چند بار تکرار شود.

OR در RegEx

برای ایجاد چند انتخاب می‌توانیم از:

استفاده کنیم.

مثلاً:

const pattern = /cat|dog/;

یعنی:

cat یا dog

مثال:

console.log(
    pattern.test("I have a cat")
);

و:

console.log(
    pattern.test("I have a dog")
);

هر دو true خواهند بود.

مثال OR برای فرمت فایل

فرض کنیم فقط می‌خواهیم فایل‌های:

jpg
png
gif

را قبول کنیم.

یک Pattern ساده:

const pattern =
    /\.(jpg|png|gif)$/i;

متد exec

متد:

exec()

برای اجرای Pattern روی یک متن استفاده می‌شود و در صورت پیدا شدن Match، اطلاعات بیشتری برمی‌گرداند.

مثلاً:

const pattern = /JavaScript/;

const result =
    pattern.exec(
        "I am learning JavaScript"
    );

console.log(result);

اگر Match پیدا شود، اطلاعات مربوط به تطابق را دریافت می‌کنیم.

اگر چیزی پیدا نشود:

const pattern = /Python/;

const result =
    pattern.exec(
        "I am learning JavaScript"
    );

console.log(result);

نتیجه:

null

برای شروع کار با RegEx، متد test() معمولاً ساده‌تر است.

متد match

String نیز متدی به نام:

match()

دارد.

مثال:

const text =
    "JavaScript is powerful";

const result =
    text.match(/JavaScript/);

console.log(result);

استفاده از Flag g

اگر بخواهیم تمام تطابق‌ها را پیدا کنیم، می‌توانیم از:

استفاده کنیم.

مثلاً:

const text =
    "cat dog cat bird cat";

const result =
    text.match(/cat/g);

console.log(result);

نتیجه:

["cat", "cat", "cat"]

بدون g معمولاً فقط اولین تطابق در نتیجه قرار می‌گیرد.

متد search

String دارای متد:

search()

نیز هست.

مثلاً:

const text =
    "I am learning JavaScript";

const position =
    text.search(/JavaScript/);

console.log(position);

این متد موقعیت شروع Match را برمی‌گرداند.

اگر چیزی پیدا نشود:

-1

برگردانده می‌شود.

متد replace

می‌توانیم با Regular Expression بخشی از متن را جایگزین کنیم.

مثال:

const text =
    "Hello World";

const result =
    text.replace(
        /World/,
        "JavaScript"
    );

console.log(result);

نتیجه:

Hello JavaScript

replace و Flag g

اگر یک کلمه چند بار تکرار شده باشد، برای جایگزینی تمام موارد می‌توانیم از g استفاده کنیم.

const text =
    "cat dog cat bird cat";

const result =
    text.replace(
        /cat/g,
        "animal"
    );

console.log(result);

نتیجه:

animal dog animal bird animal

متد split

حتی split() نیز می‌تواند Regular Expression دریافت کند.

مثلاً:

const text =
    "apple,banana;orange grape";

const result =
    text.split(/[,; ]/);

console.log(result);

نتیجه تقریباً:

["apple", "banana", "orange", "grape"]

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

فرض کنیم Username باید:

حداقل ۳ کاراکتر باشد.
حداکثر ۲۰ کاراکتر باشد.
فقط حروف انگلیسی، اعداد و _ داشته باشد.

Pattern:

const usernamePattern =
    /^[A-Za-z0-9_]{3,20}$/;

تابع:

function isValidUsername(username) {

    return usernamePattern.test(username);

}

استفاده:

console.log(
    isValidUsername("ali_123")
);

نتیجه:

true

اما:

console.log(
    isValidUsername("ali@test")
);

نتیجه:

false

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

فرض کنیم برای یک پروژه نمونه، شماره تلفن باید دقیقاً ۱۱ رقم باشد.

const phonePattern =
    /^\d{11}$/;

مثال:

console.log(
    phonePattern.test("09121234567")
);

نتیجه:

true

اما:

console.log(
    phonePattern.test("0912123456")
);

نتیجه:

false

این Pattern فقط تعداد ارقام را بررسی می‌کند و لزوماً معتبر بودن یک شماره تلفن واقعی را تضمین نمی‌کند.

مثال عملی: رمز عبور

فرض کنیم می‌خواهیم Password:

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

یک Pattern نمونه:

const passwordPattern =
    /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).{8,}$/;

این Pattern از مفهومی به نام Lookahead استفاده می‌کند.

در این مرحله لازم نیست تمام جزئیات Lookahead را حفظ کنید؛ نکته مهم این است که چنین الگوهایی می‌توانند وجود چند شرط مختلف را در یک Pattern بررسی کنند.

مثال:

console.log(
    passwordPattern.test("Hello123")
);

نتیجه:

true

اما:

console.log(
    passwordPattern.test("hello123")
);

نتیجه:

false

چون حرف بزرگ ندارد.

اعتبارسنجی Email

یکی از رایج‌ترین کاربردهای RegEx بررسی Email است.

یک Pattern نسبتاً ساده:

const emailPattern =
    /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

مثال:

console.log(
    emailPattern.test("ali@example.com")
);

نتیجه:

true

اما:

console.log(
    emailPattern.test("ali@example")
);

نتیجه:

false

نکته مهم درباره Email

ساختار واقعی Email می‌تواند پیچیده‌تر از چیزی باشد که یک Regular Expression ساده نشان می‌دهد.

بنابراین در پروژه‌های واقعی معمولاً نباید تصور کنیم یک Regex ساده می‌تواند تمام قوانین Email را به صورت کامل پوشش دهد.

برای فرم HTML نیز بهتر است از:

<input type="email" required>

استفاده کنیم و در سمت Server نیز اطلاعات را اعتبارسنجی کنیم.

مثال عملی: حذف فاصله‌های اضافی

فرض کنیم:

const text = "Hello    JavaScript";

می‌توانیم چند Space پشت سر هم را با یک Space جایگزین کنیم:

const result =
    text.replace(
        /\s+/g,
        " "
    );

console.log(result);

نتیجه:

Hello JavaScript

مثال عملی: حذف تمام اعداد

const text =
    "User123";

const result =
    text.replace(
        /\d/g,
        ""
    );

console.log(result);

نتیجه:

User

مثال عملی: پیدا کردن تمام اعداد

const text =
    "Product 123 costs 450 dollars";

const numbers =
    text.match(/\d+/g);

console.log(numbers);

نتیجه:

["123", "450"]

ترکیب RegEx با Form

اکنون می‌توانیم مباحث این مقاله را با مقاله قبلی ترکیب کنیم.

HTML:

<form id="registerForm">

    <input
        type="text"
        id="username"
        placeholder="Username"
    >

    <p id="usernameError"></p>

    <button type="submit">
        Register
    </button>

</form>

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

const form =
    document.getElementById("registerForm");

const username =
    document.getElementById("username");

const usernameError =
    document.getElementById("usernameError");

const usernamePattern =
    /^[A-Za-z0-9_]{3,20}$/;

form.addEventListener(
    "submit",
    function (event) {

        event.preventDefault();

        const value =
            username.value.trim();

        if (value === "") {

            usernameError.textContent =
                "Username is required";

            return;
        }

        if (!usernamePattern.test(value)) {

            usernameError.textContent =
                "Username is invalid";

            return;
        }

        usernameError.textContent =
            "Username is valid";

    }
);

در این مثال:

Form
   ↓
Input
   ↓
trim()
   ↓
Regular Expression
   ↓
Validation Result
   ↓
Message

تمام مفاهیم اصلی مقاله را به صورت عملی ترکیب کرده‌ایم.

نکات مهم هنگام نوشتن RegEx

از Patternهای بسیار پیچیده در ابتدای کار استفاده نکنید

اگر تازه با RegEx آشنا شده‌اید، بهتر است ابتدا Patternهای ساده مانند:

^[0-9]+$

و:

^[A-Za-z]+$

را یاد بگیرید.

سپس به سراغ Patternهای پیچیده‌تر بروید.

هر بخش Pattern را جداگانه بررسی کنید

مثلاً:

^[A-Za-z0-9_]{3,20}$

را یک‌باره حفظ نکنید.

آن را به بخش‌های زیر تقسیم کنید:

^
[A-Za-z0-9_]
{3,20}
$

و معنی هر قسمت را جداگانه یاد بگیرید.

RegEx جایگزین Validation سمت Server نیست

اگر کاربر اطلاعاتی مانند Email یا Password ارسال می‌کند، اعتبارسنجی جاوااسکریپت فقط برای سمت Client است.

در برنامه واقعی:

Client
   ↓
Validation
   ↓
Server
   ↓
Validation
   ↓
Database

باید اطلاعات در سمت Server نیز بررسی شوند.

اشتباهات رایج

اشتباه اول: فراموش کردن ^ و $

مثلاً:

/[0-9]+/

ممکن است متنی مانند:

abc123xyz

را نیز Match کند.

اما:

/^[0-9]+$/

می‌گوید کل متن باید شامل اعداد باشد.

اشتباه دوم: اشتباه گرفتن + و *

این دو یکسان نیستند.

یعنی یک یا چند بار.

اما:

یعنی صفر یا چند بار.

اشتباه سوم: فراموش کردن Flag g

اگر قصد دارید تمام Matchها را پیدا یا جایگزین کنید، ممکن است به:

نیاز داشته باشید.

اشتباه چهارم: استفاده از Regex پیچیده بدون درک آن

کپی کردن یک Pattern بسیار پیچیده از اینترنت بدون اینکه بدانیم چه کاری انجام می‌دهد، می‌تواند باعث خطا و نگهداری سخت‌تر کد شود.

اشتباه پنجم: تصور اینکه هر Regex یک اعتبارسنجی کامل است

برای مثال یک Email Regex ساده لزوماً تمام قوانین Email را پوشش نمی‌دهد.

جدول مهم‌ترین نمادها

نماد	کاربرد
`.`	یک کاراکتر
`^`	شروع متن
`$`	پایان متن
`+`	یک یا چند بار
`*`	صفر یا چند بار
`?`	صفر یا یک بار
`{n}`	دقیقاً n بار
`{n,m}`	بین n و m بار
`[abc]`	یکی از a یا b یا c
`[a-z]`	محدوده حروف
`[0-9]`	محدوده اعداد
`[^0-9]`	هر چیزی به جز عدد
`\d`	رقم
`\D`	غیررقم
`\w`	Word character
`\W`	Non-word character
`\s`	White Space
`\S`	Non-White Space
`\|`	OR
`()`	Group

تمرین‌ها

تمرین ۱

یک Regex بنویسید که فقط اعداد را قبول کند.

نمونه معتبر:

نمونه نامعتبر:

123abc

تمرین ۲

یک Regex بنویسید که فقط حروف انگلیسی را قبول کند.

تمرین ۳

یک Username Validator بسازید که:

حداقل ۴ کاراکتر باشد.
حداکثر ۱۵ کاراکتر باشد.
فقط حروف انگلیسی، عدد و _ داشته باشد.

تمرین ۴

یک Regex برای شماره‌ای با دقیقاً ۱۰ رقم ایجاد کنید.

تمرین ۵

متنی مانند:

apple 123 banana 456 orange 789

را دریافت کنید و تمام اعداد آن را استخراج کنید.

تمرین ۶

در متن زیر تمام JavaScriptها را با JS جایگزین کنید:

JavaScript is powerful.
I love JavaScript.
JavaScript is popular.

تمرین ۷

فاصله‌های اضافی متن زیر را به یک Space تبدیل کنید:

Hello     JavaScript     World

چالش عملی

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

Username
Email
Phone
Password
Confirm Password

قوانین:

Username بین ۳ تا ۲۰ کاراکتر باشد.
Username فقط شامل حروف انگلیسی، عدد و _ باشد.
Email دارای ساختار مناسب باشد.
Phone دقیقاً ۱۱ رقم داشته باشد.
Password حداقل ۸ کاراکتر باشد.
Password حداقل یک حرف بزرگ داشته باشد.
Password حداقل یک حرف کوچک داشته باشد.
Password حداقل یک عدد داشته باشد.
Confirm Password با Password برابر باشد.
برای هر خطا پیام مناسب نمایش داده شود.
اگر تمام اطلاعات معتبر بود، پیام موفقیت نمایش داده شود.

در این تمرین از مفاهیم زیر استفاده کنید:

DOM
Event
Form
Function
Regular Expression
test()
trim()
classList
Condition

جمع‌بندی

در این مقاله با یکی از ابزارهای بسیار قدرتمند جاوااسکریپت یعنی Regular Expression یا RegEx آشنا شدیم.

یاد گرفتیم:

Regular Expression چیست.
چگونه یک RegEx ایجاد کنیم.
چگونه از test() استفاده کنیم.
exec() چه کاربردی دارد.
چگونه با match() تطابق‌ها را پیدا کنیم.
چگونه با search() محل تطابق را پیدا کنیم.
چگونه با replace() متن را تغییر دهیم.
چگونه از split() همراه RegEx استفاده کنیم.
Character Class چیست.
محدوده‌های حروف و اعداد چگونه کار می‌کنند.
^ و $ چه کاربردی دارند.
+، * و ? چگونه تعداد تکرار را مشخص می‌کنند.
{n} و {n,m} چگونه کار می‌کنند.
\d، \w و \s چه کاربردی دارند.
Group و OR را چگونه استفاده کنیم.
Flagهای مهم مانند i و g را بشناسیم.
Username، Email، Phone و Password را با الگوهای مختلف بررسی کنیم.
RegEx را با فرم‌های HTML و جاوااسکریپت ترکیب کنیم.

Regular Expression در ابتدا ممکن است کمی دشوار باشد، اما با تمرین زیاد به یکی از ابزارهای کاربردی شما در اعتبارسنجی فرم‌ها، جستجوی متن، پردازش رشته‌ها و پاک‌سازی داده‌ها تبدیل خواهد شد.

۰۰

نظرات

هنوز نظری ثبت نشده است.