آموزش عبارات با قاعده جاوا اسکریپت بخش سوم

عبارات منظم در جاوا اسکریپت

زمان مطالعه

5 دقیقه

تعداد بازدید

319

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها



اشتراک گذاری این مطلب
در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

آموزش عبارات با قاعده جاوا اسکریپت بخش سوم

عبارات منظم در جاوا اسکریپت

زمان مطالعه

5 دقیقه

تعداد بازدید

319

تعداد پرسش ها

0

افزودن به لیست علاقه مندی ها



اشتراک گذاری این مطلب

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

در این قسمت از اموزش 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 رو میکنه

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

let str = 'let varName = "value"';
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 = "value"';
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 استفاده کردم .

 

فلگ 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 GoodBy

 

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

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <form action="#" class="form-group">
      <div class="input-group">
        <input class="form-control" type="text" name="" id="username" placeholder="Enter Username">
                <span>Username is not valid</span>
      </div>
      <div class="input-group">
        <input class="form-control" type="password" name="" id="password" placeholder="Enter Password">
        <span>must contain a lowercase ,uppercase letter and a number</span>
      </div>
      <div class="input-group">
        <input class="form-control" type="text" name="" id="phonenumber" placeholder="Enter Phone Number">
        <span>the phone number must be in the format of +9809309990000</span>
      </div>
      <div class="input-group">
        <input class="form-control" type="email" name="" id="email" placeholder="Enter Email">
        <span>must be a valid email address</span>
      </div>
      <div class="input-group">
        <input type="submit" class="form-control btn btn-custom" name="" id="btn" value="Submit">
      </div>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
</body>

</html>

 

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: rgb(3, 13, 36);
}

span {
/*   color: rgb(243, 237, 237); */
  color:brown;
}

.container {
  width: 40%;
  margin: 300px auto;
}

.container form {
  width: 100%;
}

.container form .input-group {
  width: 100%;
  margin: 5px 0;
}

.container form .input-group .form-control {
  border-radius: 3px;
}

.container form .input-group .form-control:focus {
  outline: none;
}

.container form .input-group .form-control::placeholder {
  color: rgb(49, 47, 47);
}

.container form .input-group .btn-custom {
  background: brown;
  color: aliceblue;
  margin: 8px 0;
}

app.js


const usernameInput = document.getElementById("username");
const passwordInput = document.getElementById("password");
const phonenumberInput = document.getElementById("phonenumber");
const emailInput = document.getElementById("email");

// validations

// must be contain letters a-z in lowercase or also contain digit 0-9 of username or you can also useing _

function isValidUsername(username) {
  // return /^[a-zA-Z]{5,16}$/.test(username); //only lowercase letter and capitalize letter​ from 5 to 16 character is valid
  //فقط حروف بزرگ و کوچک مجاز است و حداقل 5 الی 16 کاراکتر مجاز است
    return /^(?!.*\.\.)(?!.*\.$)[^\W][\w.]{5,16}$/.test(username); //this pattern is for username validation Instagram, and recommended
  //این پترن برای اعتبار سنجی ایسنتاگرام هست و پیشنهاد میشه 
}

//must contain a lowercase ,uppercase letter and a number
function isValidPassword(password) {
  // return /[a-z]/.test(password) && /[A-Z]/.test(password) && /[0-9]/.test(password);
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/.test(password);
}
//the phone number must be in the format of +9809309990000
function isValidPhoneNumber(phonenumber) {
  // return /^(\+98|0)?0?9\d{9}$/.test(phonenumber);
  // OR The following pattern is suggested
  // میتونید از پترن بالا یا پایینی استفاده کنید اما پایینی پیشنهاد میشه
  return /^(\+?98|0)?0?9\d{2}\d{3}\d{4}$/.test(phonenumber);
}
// must be a valid email address
function isValidEmail(email) {
  return /^[^@#!$%^&*()_+="'`*\s]+@[^@#!$%^&*()_+="'`*\d\s]+\.[a-z]+$/.test(
    email
  );
  // up there this line we via put special characters like #$@% and etc in the pattern, we limited them for ourselves to using them in input field
  //بالای این خط ما کاراکتر های خاص مانند
  //#$@ُ
  // را دروون پترن قرار دادیم که باعث محدود شدن استفاده از انها در اینپوت میشه
}

// formating functions
function formatPhoneNumber(text) {
  const regex = /^(\+?98|0)?(0?9\d{2})(\d{3})(\d{4})$/;
  return text.replace(regex, "($1) $2-$3-$4"); //this line is code for formatting code link (+98)0911-000-1231
  // Tip: if you want to change code after formatting, your faced with this error below input field -> the phone number must be in the format of +9809309990000
  //توجه:اگر بخواهید کد را بعد از اینکه فرمت شده تغییر بدید با اروری که زیر فیلد اینپوت هست مواجه خواهید شد
}

// set up events
function showOrHideTip(show, element) {
  if (show) {
    element.style.display = "inherit";
  } else {
    element.style.display = "none";
  }
}

function createListener(validator) {
  return (e) => {
    const text = e.target.value;
    const valid = validator(text);
    const showTip = text !== "" && !valid;
    const tooltip = e.target.nextElementSibling;
    showOrHideTip(showTip, tooltip);
  };
}
usernameInput.addEventListener("input", createListener(isValidUsername));
passwordInput.addEventListener("input", createListener(isValidPassword));
phonenumberInput.addEventListener("input", createListener(isValidPhoneNumber));
phonenumberInput.addEventListener("blur", (e) => {
  e.target.value = formatPhoneNumber(e.target.value);
});
emailInput.addEventListener("input", createListener(isValidEmail));

 

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

 

در مورد نویسنده : "من همیشه می توانم آزادانه انتخاب کنم، اما باید بدانم که اگر انتخاب نکنم، باز هم انتخابی کرده ام."

نظرات
0