JavaScript RegExp asoslari: naqsh bilan qidirish va metodlar

Qisqacha: Muntazam ifoda (regex) — matnning shaklini tasvirlaydigan qolip: "bir yoki bir nechta raqam", "bo'sh joylar ketma-ketligi". JavaScript'da u /\d+/ kabi yoziladi yoki new RegExp("\\d+") bilan yasaladi. Ishlatish uchun metodlar: test — bormi?, match va matchAll — nima topildi?, replace — almashtir, split — bo'l, search — qayerda?

Bu darsda

• Muntazam ifoda nima ekanini va u indexOf qila olmaydigan qaysi ishni qilishini tushuntira olasiz.
• Regex'ni ikki usulda yozasiz: /.../ literal va new RegExp(...), ikkinchisida \\ nega ikki marta yozilishini bilasiz.
• test, match, matchAll, exec, search, replace, split — har biri nima qaytarishini aytib bera olasiz.
• Sahifadagi regex maydonida naqshni o'zingiz o'zgartirib, nima topilishini ko'rasiz.
• 08-qismda qolgan uchta va'dani yopasiz: search(".") siri, /-/g va bir nechta bo'sh joyni bittaga almashtirish.

Oldin bilishingiz kerak: Matn ichida qidirish, Matnni o'zgartirish va tozalash, Funksiya — qiymat: callback va HOF, Iteratsiya protokoli.

1. Nega bu kerak?

11-qismni vazifalar ilovasi bilan tugatdik. Endi «Bahor»ga qaytamiz. Stajyor dasturchi Sardorga yangi ish berildi. Saytdagi bron formasining "Izoh" maydoniga mehmonlar har xil narsa yozadi:

Dilshod aka: 4 kishi, soat 19:00 da. Tel +998 90 000 00 00
Iltimos, deraza oldidan. Narxi 35000 bo'lsa ham mayli

Restoran egasi Jasur aka so'radi: "Izohdan hamma sonlarni ajratib ber — kishilar soni, soat, telefon". Sardor Matn ichida qidirish darsidagi indexOf ni esladi. Lekin nimani qidiradi? indexOf("4") faqat aynan 4 ni topadi. Unga esa istalgan raqam kerak — 4 ham, 19 ham, 35000 ham.

indexOf va includes aniq matnni qidiradi. Sardorga esa shaklni qidiradigan vosita kerak: "ketma-ket turgan raqamlar", "bo'sh joy bilan ajratilgan so'z". Bunday vosita bor va siz uni bir necha marta ko'rgansiz:

• terminalda grep "^const" (Fayl va matn qidirish);
• HTML'da pattern="\+998 ?\d{2} ..." (Mobil klaviatura va kiritish yordamchilari);
• 08-qismda search(".") ning g'alati natijasi (Matn ichida qidirish).

Hammasi bitta til — muntazam ifodalar. Har safar "buni keyin o'rganamiz" degan edik. O'sha "keyin" keldi. Bu va keyingi to'qqizta dars shu til haqida.

2. Muntazam ifoda nima

2.1 Ta'rif va birinchi misol

Muntazam ifoda (regular expression) — matnning shaklini tasvirlaydigan kichik til. Qisqasi — regex (o'qilishi: "rejeks"). Kursda shundan keyin "regex" deymiz.

Regex — qolip. Pishiriqchi xamirdan yulduzcha kesib oladi: qolip xamirning qayerida yulduzcha shakli borligini "biladi". Regex ham matn ustiga qo'yiladigan qolip. Matnda shu shaklga to'g'ri keladigan bo'lak bo'lsa — u moslik (match) deb ataladi.

JavaScript'da regex ikki / orasiga yoziladi:

const naqsh = /osh/;

console.log(naqsh.test("Bugun osh bor")); // true
console.log(naqsh.test("Bugun manti bor")); // false

/osh/ — "ketma-ket o, s, h harflari" degan naqsh (pattern). test metodi so'raydi: "matnda shu naqshga mos bo'lak bormi?" — va true yoki false qaytaradi.

Hozircha bu includes("osh") dan farq qilmaydi. Regex'ning kuchi — oddiy harflardan tashqari maxsus belgilar ham borligida. Ularni birozdan keyin ko'ramiz.

2.2 Regex maydoni: o'zingiz sinang

Bu qismda har darsda quyidagiga o'xshash maydon bo'ladi. Unda uchta joy bor:

• Naqsh va flaglar — / lar orasidagi regex va undan keyingi harflar (flaglar haqida birozdan keyin);
• Sinov matni — regex qo'llanadigan matn;
• Mosliklar — topilgan bo'laklar sariq va ko'k rangda belgilanadi, pastda esa jadval: har moslikning tartib raqami, index (matnning qaysi o'rnidan boshlangani) va o'zi.

Maydonga qarang. Keyin naqshni manti ga o'zgartiring — belgi qayerga ko'chadi? Keyin Osh deb katta harf bilan yozib ko'ring.

Ikki narsaga e'tibor bering. Birinchidan, matnda osh uch marta bor, lekin bittasi belgilandi. Maydon ostida "g flagisiz — faqat birinchisi" yozuvi chiqadi. Ikkinchidan, Osh naqshi hech narsa topmaydi: regex katta va kichik harfni farqlaydi. Ikkalasini ham flaglar hal qiladi.

Maslahat: Maydonni buzib qo'yishdan qo'rqmang. Naqshda xato bo'lsa, maydon xato xabarini qizil rangda ko'rsatadi. «Asliga qaytarish» tugmasi hamma narsani joyiga qaytaradi.

2.3 Ikki flag: g va i

Flag (flag) — regex'ning yopuvchi / dan keyin yoziladigan harf. U butun naqshning ishlash tartibini o'zgartiradi. Hozircha ikkitasi kerak:

• g (global — "hammasi") — birinchi moslikda to'xtama, hammasini top;
• i (ignore case — "harf kattaligiga qarama") — Osh, OSH, osh bir xil.

Flaglarni birga ham yozish mumkin: /osh/gi. Tartibi ahamiyatsiz. Yuqoridagi maydonda flaglar katagiga g yozing — uchala osh belgilanadi. Keyin naqshni OSH qilib, flagni gi qiling.

JavaScript'da bundan boshqa flaglar ham bor (m, s, u, v, y, d). Ularni Flaglar va lastIndex tuzog'i darsida birma-bir o'rganamiz.

Tekshirib ko'ring: /choy/i.test("Ko'k CHOY — 5000 so'm") nima qaytaradi? i ni olib tashlasak-chi?

3. Birinchi maxsus belgilar

Regex'ning haqiqiy kuchi maxsus belgilarda. To'liq ro'yxat keyingi darsda. Bugungi metodlarni ma'noli qilish uchun to'rttasi yetarli. Har birini bitta kichik misol bilan tanishtiramiz.

3.1 \d — bitta raqam

\d (digit — "raqam") — 0 dan 9 gacha istalgan bitta raqam. Teskari chiziq \ va d harfi birga bitta belgini bildiradi.

19 ikkita alohida moslik bo'ldi: 1 va 9. Chunki \d — bitta raqam.

3.2 + — "bir yoki undan ko'p"

+ o'zidan oldingi belgini "bir yoki undan ko'p marta" qiladi. \d+ — "ketma-ket kelgan bir yoki ko'p raqam", ya'ni butun son.

Sardorning masalasi bitta qisqa naqsh bilan hal bo'ldi. + va unga o'xshash belgilar quantifier deb ataladi. Ularni Quantifierlar: greedy va lazy darsida to'liq o'rganamiz.

3.3 \s — bo'sh joy

\s (space — "bo'sh joy") — istalgan bo'sh joy belgisi: oddiy bo'sh joy (Space tugmasi), tabulyatsiya, yangi qator. \s+ — "bir yoki ko'p bo'sh joy".

console.log("Ali   Valiyev".match(/\s+/)[0].length); // 3

Uchta ketma-ket bo'sh joy bitta moslik bo'ldi — uzunligi 3. Bu bizga birozdan keyin replace bo'limida kerak bo'ladi.

3.4 . — istalgan bitta belgi

Nuqta . — istalgan bitta belgi: harf, raqam, bo'sh joy, tinish belgisi. Faqat yangi qator belgisi bundan mustasno. /o.h/ naqshi osh ga ham, o'h ga ham, o h ga ham mos keladi.

Nuqtaning o'zini qidirish kerak bo'lsa, oldiga \ qo'yiladi: \.. Fayl va matn qidirish darsida grep "logo\.png" deb yozganimiz shundan.

Tekshirib ko'ring: /\d+/ naqshi "Manti 30000 so'm" matnida nimani topadi? /\d/ naqshi-chi?

4. Regex'ni yozishning ikki usuli

4.1 Literal: /.../

Hozirgacha yozganimiz — regex literal: naqsh ikki / orasida, flaglar oxirida. Bu eng ko'p ishlatiladigan va eng qulay usul.

Regex — JavaScript'da obyekt. U RegExp klassining nusxasi. Buni instanceof bilan tekshirish mumkin:

const narxNaqshi = /\d+/g;

console.log(typeof narxNaqshi); // object
console.log(narxNaqshi instanceof RegExp); // true
console.log(narxNaqshi.source); // \d+
console.log(narxNaqshi.flags); // g

source — naqshning matni, flags — flaglar. Ularni regex'ni tekshirish yoki konsolga chiqarishda ishlatasiz.

4.2 Konstruktor: new RegExp(...)

Ikkinchi usul — RegExp konstruktori. Naqsh oddiy satr sifatida beriladi, flaglar — ikkinchi argument:

const narxNaqshi = new RegExp("\\d+", "g");

console.log(narxNaqshi); // /\d+/g
console.log(narxNaqshi.test("Osh 35000")); // true

Nega "\\d+" — ikkita teskari chiziq bilan? Chunki bu yerda ikki til ichma-ich turibdi. Avval JavaScript satrni o'qiydi. String asoslari darsidan bilasiz: satrda \ — escape belgisi, "\n" — yangi qator. Satrda bitta \ olish uchun \\ yozish kerak. Keyin RegExp hosil bo'lgan satrni — \d+ ni — naqsh sifatida o'qiydi.

Bitta \ yozsangiz nima bo'ladi? Satr \d ni "noma'lum escape" deb, \ ni shunchaki tashlab yuboradi:

const xato = new RegExp("\d+");

console.log(xato); // /d+/
console.log(xato.test("Osh 35000")); // false
console.log(xato.test("ddd")); // true

Naqsh endi "bir yoki ko'p d harfi" bo'lib qoldi. Hech qanday xato chiqmaydi — kod jimgina noto'g'ri ishlaydi. Bu regex'dagi eng ko'p uchraydigan tuzoqlardan biri.

4.3 Qachon qaysi biri

Qoida oddiy:

• Naqsh oldindan ma'lum bo'lsa — literal /.../. Qisqa, \ ni ikki marta yozish shart emas, xatosi kod ishga tushishidan oldin chiqadi.
• Naqsh dastur ishlayotganda paydo bo'lsa — new RegExp. Masalan, foydalanuvchi qidiruv maydoniga so'z yozdi va siz shu so'zni matndan qidiryapsiz.

const soz = "manti";
const naqsh = new RegExp(soz, "gi");

console.log(naqsh); // /manti/gi
console.log("Manti, osh, manti".match(naqsh)); // [ 'Manti', 'manti' ]

Diqqat: Foydalanuvchi so'zida ., + yoki ( kabi maxsus belgi bo'lsa, ular regex buyrug'iga aylanib qoladi. new RegExp("+998") hatto xato beradi. Foydalanuvchi matnidan regex yasashning xavfsiz yo'lini Almashtirish chuqur va xavfsiz dinamik regex darsida o'rganamiz. Hozircha new RegExp ga faqat o'zingiz bilgan matnni bering.

Konstruktor ham xatoni haqiqiy matn bilan aytadi:

const naqsh = new RegExp("+998");

SyntaxError: Invalid regular expression: /+998/: Nothing to repeat

Tarjimasi: "Noto'g'ri muntazam ifoda: /+998/: takrorlanadigan narsa yo'q." + "oldingi belgini takrorla" degani. Naqsh esa + bilan boshlanadi — undan oldin hech narsa yo'q. Plyus belgisining o'zi kerak bo'lsa — \+. Satr ichida esa "\\+998".

Tekshirib ko'ring: new RegExp("\\s+", "g") qaysi literalga teng? new RegExp("\s+", "g") -chi?

5. Metodlar: regex bilan nima qilish mumkin

Regex o'zi hech narsa qilmaydi — u faqat qolip. Uni ishlatadigan metodlar ikki joyda yashaydi: biri regex'ning o'zida, qolganlari satrda.

Yetti metod — ko'p tuyulishi tabiiy. Ularni yodlash shart emas. Avval savolingizni aniqlang, keyin diagrammadan metodni tanlang:

flowchart TD
  S{"Matndan nima kerak?"} --> A["Bormi? → test"]
  S --> B["Qayerda? → search"]
  S --> C{"Nima topildi?"}
  C --> C1["Birinchisi → match"]
  C --> C2["Hammasi, matni → match + g"]
  C --> C3["Hammasi, o'rni bilan → matchAll"]
  S --> D["Almashtirish → replace"]
  S --> E["Bo'laklash → split"]

exec diagrammada yo'q: u matchAll ning eski varianti, uni ham ko'rib o'tamiz. Endi metodlarni birma-bir ko'ramiz.

5.1 test: bormi yoki yo'qmi?

test eng sodda savolga javob beradi: matnda moslik bormi?

const raqamBor = /\d/;

console.log(raqamBor.test("Stol 4 ga")); // true
console.log(raqamBor.test("Deraza oldida")); // false

Formani tekshirishda, if shartida, filter callback'ida eng ko'p shu ishlatiladi:

const izohlar = ["4 kishi", "Deraza oldida", "Soat 19:00"];
const sonlilar = izohlar.filter((izoh) => /\d/.test(izoh));

console.log(sonlilar); // [ '4 kishi', 'Soat 19:00' ]

Diqqat: g flagli regex bilan test ni bir necha marta chaqirish tuzoqqa olib keladi — natija true, false, true deb almashib chiqishi mumkin. Sababi va yechimi — Flaglar va lastIndex tuzog'i darsida. Hozircha qoida: test uchun g qo'ymang.

5.2 match: nima topildi?

match — satr metodi. U g flagiga qarab ikki xil ishlaydi.

g siz — birinchi moslik haqida to'liq ma'lumot:

const izoh = "Osh 35000, choy 5000";
const birinchi = izoh.match(/\d+/);

console.log(birinchi[0]); // 35000
console.log(birinchi.index); // 4
console.log(birinchi);

Konsolda:

35000
4
[ '35000', index: 4, input: 'Osh 35000, choy 5000', groups: undefined ]

Natija — massiv, lekin qo'shimcha xususiyatlari bor:

• [0] — topilgan bo'lak;
• index — u matnning qaysi o'rnidan boshlangani (O=0, s=1, h=2, bo'sh joy=3, 3=4);
• input — qidirilgan butun matn;
• groups — nomlangan guruhlar. Ular Guruhlar va alternation darsida, hozircha har doim undefined.

Brauzer konsoli buni boshqacharoq chizadi — ['35000', index: 4, ...], bo'sh joysiz. Ma'nosi bir xil.

g bilan — hamma mosliklar, lekin faqat matnlari:

const izoh = "Osh 35000, choy 5000";

console.log(izoh.match(/\d+/g)); // [ '35000', '5000' ]

index endi yo'q — oddiy satrlar massivi. Hamma topilganini va har birining o'rnini birga olish kerak bo'lsa — matchAll (keyingi bo'lim).

Hech narsa topilmasa — ikkala holatda ham null. Bo'sh massiv emas! Bu muhim:

const izoh = "Deraza oldida";
const sonlar = izoh.match(/\d+/g) ?? [];

console.log(sonlar.length); // 0

?? [] — "null bo'lsa, bo'sh massiv ol" (?? va ?. darsidan). Busiz sonlar.length xato beradi. Buni "Ko'p uchraydigan xatolar" bo'limida ko'ramiz.

5.3 matchAll: hammasi, to'liq ma'lumot bilan

matchAll hamma mosliklarni qaytaradi va har biri g siz match natijasidek to'liq: [0], index, input. U massiv emas, iterator qaytaradi (Iteratsiya protokoli darsidan). Shuning uchun for...of bilan aylanasiz:

const izoh = "Osh 35000, choy 5000";

for (const moslik of izoh.matchAll(/\d+/g)) {
  console.log(`${moslik[0]} — ${moslik.index}-o'rinda`);
}

Konsolda:

35000 — 4-o'rinda
5000 — 16-o'rinda

Massiv kerak bo'lsa — spread: [...izoh.matchAll(/\d+/g)].

matchAll ga faqat g flagli regex beriladi. Flagsiz bersangiz:

"Osh 35000".matchAll(/\d+/);

TypeError: String.prototype.matchAll called with a non-global RegExp argument

Tarjimasi: "matchAll global bo'lmagan regex argumenti bilan chaqirildi." "Global" — g flagi. JavaScript bu yerda sizni himoya qiladi: "hammasini" so'rab, "faqat birinchisini" beradigan regex — deyarli har doim xato.

5.4 exec: birma-bir, qo'lda

exec — regex metodi. g siz u match bilan bir xil natija beradi. g bilan esa har chaqiruvda keyingi moslikni qaytaradi va oxirida null:

const naqsh = /\d+/g;
const izoh = "Osh 35000, choy 5000";
let moslik;

while ((moslik = naqsh.exec(izoh)) !== null) {
  console.log(moslik[0], moslik.index, naqsh.lastIndex);
}

Konsolda:

35000 4 9
5000 16 20

while shartini sekin o'qiymiz. Qavs ichida ikki ish bor. Avval naqsh.exec(izoh) natijasi moslik ga yoziladi. Keyin shu qiymat null bilan solishtiriladi. null bo'lmasa — sikl tanasi ishlaydi, null bo'lsa — sikl tugaydi.

Regex qayerda to'xtaganini qanday eslab qoladi? lastIndex xususiyatida. Birinchi moslikdan keyin u 9 — keyingi qidiruv 9-o'rindan boshlanadi. Moslik qolmasa, exec null qaytaradi va lastIndex yana 0 bo'ladi.

exec — matchAll dan oldingi davrning vositasi. Eski kodda bunday while sikllarini ko'p uchratasiz. Yangi kodda matchAll qulayroq va xavfsizroq: u lastIndex ni o'zi boshqaradi. lastIndex bilan bog'liq tuzoqlar — Flaglar va lastIndex tuzog'i darsida.

5.5 search: qayerda?

search birinchi moslikning indeksini qaytaradi, topilmasa -1. Bu indexOf ning regex'li varianti.

Endi Matn ichida qidirish darsidagi sirni ochamiz:

const narx = "5.000 so'm";

console.log(narx.search(".")); // 0
console.log(narx.search(/\./)); // 1
console.log(narx.search(/\d/)); // 0
console.log(narx.search(/x/)); // -1

search(".") ga satr berdik, lekin search uni regex'ga aylantirdi. Regex'da . — istalgan belgi, shuning uchun 0-o'rindagi 5 mos keldi. Nuqtaning o'zi kerak bo'lsa — \., va u 1-o'rinda.

match ham satrni regex'ga aylantiradi: "5.000".match(".") ham 5 ni topadi. includes, indexOf, startsWith esa satrni so'zma-so'z qidiradi.

5.6 replace: almashtirish

replace ning birinchi argumenti satr ham, regex ham bo'lishi mumkin. Regex g siz bo'lsa — faqat birinchi moslik almashadi, g bilan — hammasi.

Matnni o'zgartirish va tozalash darsidagi eski kod yozuvini endi o'qiy olasiz:

const tel = "90-000-00-00";

console.log(tel.replace(/-/, "")); // 90000-00-00
console.log(tel.replace(/-/g, "")); // 900000000

/-/g — "hamma - belgilari". O'sha darsdagi ikkinchi va'da — "Ali Valiyev" dagi uchta bo'sh joy. replaceAll(" ", " ") uni to'liq tuzata olmagan edi. Regex bilan:

const ism = "Ali   Valiyev";

console.log(ism.replace(/\s+/g, " ")); // Ali Valiyev

\s+ — "bir yoki ko'p bo'sh joy". Uchta bo'sh joy bitta moslik bo'ldi va bitta bo'sh joyga almashdi. Ikkita bo'lsa ham, o'nta bo'lsa ham — bitta.

O'zingiz to'ldiring: matndagi hamma bo'sh joylar ketma-ketligini almashtirish uchun naqsh oxiriga flagi qo'yiladi.

Yana bir va'da — Matn ↔ son darsidagi uzilmas bo'sh joy (\u00a0). \s uni ham taniydi:

const kiritilgan = "12\u00a0000";
const summa = Number(kiritilgan.replace(/\s/g, ""));

console.log(summa); // 12000

Ikkinchi argumentda Matnni o'zgartirish darsidagi $& ishlaydi — "topilgan bo'lak":

console.log("Osh 35000".replace(/\d+/, "[$&]")); // Osh [35000]

Ikkinchi argument funksiya ham bo'lishi mumkin. U har moslik uchun chaqiriladi va qaytargani o'sha moslik o'rniga qo'yiladi:

const menyu = "Osh 35000, choy 5000";
const ikkiBaravar = menyu.replace(/\d+/g, (son) => Number(son) * 2);

console.log(ikkiBaravar); // Osh 70000, choy 10000

Callback'ga matn keladi ("35000"), shuning uchun Number bilan songa aylantirdik. Almashtirish matni va funksiyasining hamma imkoniyatlari — Almashtirish chuqur darsida.

replaceAll ga ham regex berish mumkin, lekin faqat g bilan. Aks holda matchAll dagidek TypeError chiqadi. Regex bilan replace(/.../g) va replaceAll(/.../g) bir xil ishlaydi — ko'pincha replace yoziladi.

5.7 split: regex bo'yicha bo'lish

split ga regex bersangiz, matn har moslik joyidan bo'linadi:

const taomlar = "osh   lag'mon\tmanti \n somsa";

console.log(taomlar.split(" "));
console.log(taomlar.split(/\s+/));

Konsolda:

[ 'osh', '', '', "lag'mon\tmanti", '\n', 'somsa' ]
[ 'osh', "lag'mon", 'manti', 'somsa' ]

split(" ") faqat oddiy bo'sh joyni (" ") taniydi — bo'sh satrlar va \t yopishgan so'z paydo bo'ldi. split(/\s+/) esa har qanday bo'sh joylar ketma-ketligini bitta ajratuvchi deb oldi.

Tekshirib ko'ring: "Bron: 10:00, 22:00".match(/\d+/g) nima qaytaradi? Va "Bron".match(/\d+/g) -chi?

O'zingiz to'ldiring: hamma mosliklarni index i bilan birga olish uchun g flagli regex va metodi ishlatiladi.

6. Regex yozishga yordamchi vositalar

Regex qisqa, lekin zich. Uzunroq naqshni "ko'z bilan" tekshirish qiyin. Shuning uchun dasturchilar uni maxsus sinov maydonida yozadi.

• Shu saytdagi regex maydoni — har darsda bor. Naqshni o'zgartiring, mosliklar darhol yangilanadi. U brauzerdagi haqiqiy JavaScript RegExp bilan ishlaydi.
• regex101.com — eng mashhur onlayn vosita. Chap tomondagi FLAVOR ro'yxatidan ECMAScript (JavaScript) ni tanlang — boshqa tillarning regex'i biroz farq qiladi. U naqshning har bo'lagini inglizcha tushuntirib beradi va qadamlar sonini ko'rsatadi.
• DevTools konsoli — "matn".match(/naqsh/g) deb yozib, darhol natijani ko'rasiz.

Diqqat: regex101 ga mijozlarning haqiqiy telefonlari, email'lari yoki parollarini qo'ymang. Sinov uchun +998 90 000 00 00 va ali@example.com kabi namunalar yetarli. Tashqi saytga yozilgan matn sizning nazoratingizdan chiqadi.

Quyidagi maydonda kichik vazifa bor: matndan faqat telefon raqamining raqamlarini toping. Naqsh tayyor. Uni o'zgartirmasdan oldin o'ylang: + belgisi topiladimi?

7. Ko'p uchraydigan xatolar

7.1 Konstruktorda bitta \

console.log(new RegExp("\d+").source); // d+

Satr \d dagi \ ni yutib yubordi. Xato chiqmaydi, regex esa boshqa narsani qidiradi. Tuzatish: new RegExp("\\d+") yoki, naqsh oldindan ma'lum bo'lsa, literal /\d+/. Konsolga naqsh.source ni chiqarib tekshirish — eng tez yo'l.

7.2 match natijasini tekshirmaslik

const sonlar = "Deraza oldida".match(/\d+/g);
console.log(sonlar.length);

TypeError: Cannot read properties of null (reading 'length')

Tarjimasi: "null ning xususiyatlarini o'qib bo'lmaydi (length ni o'qishda)." Moslik yo'q — match null qaytardi. Tuzatish: match(...) ?? [], yoki matchAll (u hech narsa topmasa bo'sh iterator beradi).

7.3 g ni unutish

replace(/-/, "") faqat birinchi - ni o'chiradi, match(/\d+/) faqat birinchi sonni beradi. Natija "yarim to'g'ri" bo'lgani uchun bu xato kech seziladi. Tuzatish: "hammasi" kerak bo'lsa — g. Teskarisi ham bor: test va exec ni g bilan ehtiyotsiz ishlatish (Flaglar va lastIndex tuzog'i).

7.4 Regex'ni includes yoki startsWith ga berish

"Osh 35000".includes(/\d/);

TypeError: First argument to String.prototype.includes must not be a regular expression

Tarjimasi: "includes ning birinchi argumenti muntazam ifoda bo'lmasligi kerak." includes, startsWith, endsWith faqat oddiy matn qidiradi. JavaScript bu yerda sizni ogohlantiradi: regex berib, so'zma-so'z qidiruv kutish — xato. Regex bilan "bormi?" degan savol — naqsh.test(matn).

Qaysi metod regex qabul qilishini JavaScript qanday biladi? Well-known symbols darsidagi Symbol.match orqali: regex obyektida u bor, oddiy obyektda yo'q.

7.5 Maxsus belgini oddiy deb o'ylash

/5.000/ naqshi 5.000 ga ham, 5 000 ga ham, 52000 ga ham mos keladi — nuqta istalgan belgi. Telefon uchun /+998/ esa umuman xato beradi. Tuzatish: belgining o'zi kerak bo'lsa — oldiga \: /5\.000/, /\+998/. Qaysi belgilar maxsus ekanini keyingi darsda to'liq ro'yxat bilan ko'ramiz.

8. Mashqlar

1-mashq (oson): Bormi?

raqamBormi(matn) funksiyasini yozing: matnda kamida bitta raqam bo'lsa true, aks holda false qaytarsin. test metodidan foydalaning.

console.log(raqamBormi("Stol 4 ga")); // true
console.log(raqamBormi("Deraza oldida")); // false

function raqamBormi(matn) {
  return /\d/.test(matn);
}

console.log(raqamBormi("Stol 4 ga")); // true
console.log(raqamBormi("Deraza oldida")); // false

2-mashq (o'rta): Izohdagi sonlar yig'indisi

sonlarYigindisi(izoh) funksiyasi izohdagi hamma butun sonlarni topib, yig'indisini qaytarsin. Son bo'lmasa — 0. Ishora: match (g bilan) + ?? [] + reduce.

console.log(sonlarYigindisi("Osh 35000, choy 5000")); // 40000
console.log(sonlarYigindisi("Deraza oldida")); // 0

function sonlarYigindisi(izoh) {
  const sonlar = izoh.match(/\d+/g) ?? [];
  return sonlar.reduce((jami, son) => jami + Number(son), 0);
}

console.log(sonlarYigindisi("Osh 35000, choy 5000")); // 40000
console.log(sonlarYigindisi("Deraza oldida")); // 0

3-mashq (qiyin): Narxlarni chegirma bilan qayta yozish

chegirmaQil(menyu, foiz) menyu matnidagi har bir narxni foiz foizga kamaytirib, yangi matn qaytarsin. Ishora: replace ning ikkinchi argumenti — funksiya. Natijani Math.round bilan butun qiling.

const menyu = "Osh 35000, lag'mon 28000, choy 5000";
console.log(chegirmaQil(menyu, 10));
// Osh 31500, lag'mon 25200, choy 4500

function chegirmaQil(menyu, foiz) {
  return menyu.replace(/\d+/g, (narx) =>
    Math.round((Number(narx) * (100 - foiz)) / 100),
  );
}

const menyu = "Osh 35000, lag'mon 28000, choy 5000";
console.log(chegirmaQil(menyu, 10));

Osh 31500, lag'mon 25200, choy 4500

4-mashq: Vazifalar qadami — vazifa matnidagi sonlar

Bu safar vazifalar kodini o'zgartirmaymiz: regex'ni avval alohida faylda sinaymiz. kurs/mashqlar/12/01-regex/sonlar.mjs faylini yarating. Unda vazifalar matnlari massivi bor. Har vazifadan sonlarni ajratib, "nechta narsa sotib olish kerak"ligini hisoblang. Son yo'q vazifa — 1 dona deb olinsin.

const vazifalar = ["3 kg un olish", "Non olish", "12 ta tuxum"];

const vazifalar = ["3 kg un olish", "Non olish", "12 ta tuxum"];

function donaSoni(matn) {
  const birinchi = matn.match(/\d+/);
  return birinchi ? Number(birinchi[0]) : 1;
}

for (const vazifa of vazifalar) {
  console.log(`${vazifa}: ${donaSoni(vazifa)}`);
}

3 kg un olish: 3
Non olish: 1
12 ta tuxum: 12

git add 12/01-regex/sonlar.mjs
git commit -m "12/01: vazifa matnidan sonni regex bilan ajrat"

9. Real ishda

• Forma tekshiruvi. Telefon, email, pochta indeksi, karta muddati — hammasi oxir-oqibat regex bilan tekshiriladi. HTML'dagi pattern atributi ham ichida JavaScript regex'ini ishlatadi.
• Ma'lumot tozalash. Foydalanuvchi kiritgan matndan ortiqcha bo'sh joylar, tirelar, qavslar replace(/.../g, ...) bilan olib tashlanadi. SMS xizmatlari raqamni faqat raqamlar ko'rinishida qabul qiladi.
• Vositalar ichida. ESLint va Stylelint qoidalari, .gitignorega o'xshash fayllar, VS Code'dagi qidiruv (Alt+R bilan regex rejimi), grep — hammasi regex'ni tushunadi. Bir marta o'rgansangiz, o'nlab vositada ishlatasiz.
• Intervyu. "match va matchAll farqi?", "test qachon ishlatiladi?", "Telefon raqamini tekshiradigan regex yozing" — junior intervyularida tez-tez beriladi.

Xulosa

• Regex — matn shaklini tasvirlaydigan qolip; moslik — matnning shu shaklga mos bo'lagi.
• Yozilishi: literal /\d+/g (oldindan ma'lum naqsh) yoki new RegExp("\\d+", "g") (naqsh dastur ishlayotganda paydo bo'lsa); satrda \ ikki marta.
• Bugungi belgilar: \d — raqam, \s — bo'sh joy, . — istalgan belgi, + — bir yoki ko'p; flaglar g — hammasi, i — harf kattaligi farqsiz.
• test → true/false; match → g siz birinchisi (to'liq), g bilan hammasi (faqat matn), topilmasa null.
• matchAll (faqat g bilan) — hammasi to'liq ma'lumot bilan; exec — uning eski, qo'lda boshqariladigan varianti.
• search — indeks; replace — almashtirish (g, $&, funksiya); split(/\s+/) — har qanday bo'sh joy bo'yicha bo'lish.

Keyingi dars: Belgilar va belgi klasslari — qaysi belgilar maxsus, ularni qanday "o'chirish" va [0-9], [^...] kabi klasslar bilan "shu belgilardan biri" deyishni o'rganamiz.

Manbalar

• MDN: "Regular expressions" (JavaScript Guide), "RegExp", "String.prototype.match", "String.prototype.matchAll" — developer.mozilla.org
• ECMAScript 2025 Language Specification, 22.2 "RegExp (Regular Expression) Objects" — tc39.es/ecma262
• regex101 — regex101.com (FLAVOR: ECMAScript)