Javascript sahifada satr topadi. Javascript yordamida sahifada qidiring

Bir necha kun oldin men kompaniyadan Front-end dev vakansiyasi uchun test topshirig'ini oldim. Albatta, vazifa bir necha bandlardan iborat edi. Ammo endi biz ulardan faqat bittasi - sahifa qidirishni tashkil qilish haqida gaplashamiz. Bular. maydonga kiritilgan matn yordamida oddiy qidiruv (brauzerda Ctrl+F ga o'xshash). Vazifaning o'ziga xosligi shundaki, har qanday JS ramkalari yoki kutubxonalaridan foydalanish taqiqlanadi. Hammasi mahalliy JavaScript-da yozilgan.

Tayyor yechimni izlash Birinchi fikr: kimdir aynan shunday yozgan, siz uni google orqali ko'rishingiz va nusxa ko'chirishingiz kerak. Shunday qildim. Bir soat ichida men ikkita yaxshi skript topdim, ular aslida bir xil ishlaydi, lekin boshqacha yozilgan. Men kimning kodini yaxshiroq tushunganimni tanladim va uni bosh sahifamga joylashtirdim.

Agar kimdir qiziqsa, men kodni oldim.

Skript darhol ishladi. Men masala hal bo'ldi deb o'yladim, lekin ma'lum bo'lishicha, ssenariy muallifini xafa qilmasin, unda juda katta kamchilik bor ekan. Skript tegning butun mazmunini qidirdi... va siz taxmin qilganingizdek, teg yoki uning atributlariga o'xshash har qanday belgilar kombinatsiyasini qidirganda, butun HTML sahifasi buziladi.

Nima uchun skript to'g'ri ishlamadi? Hammasi oddiy. Skript quyidagicha ishlaydi. Birinchidan, biz tana yorlig'ining butun tarkibini o'zgaruvchiga yozamiz, so'ngra muntazam ifoda bilan mosliklarni qidiramiz (matn maydoniga kirishda foydalanuvchi tomonidan o'rnatiladi) va keyin barcha mosliklarni quyidagi kod bilan almashtiramiz:

... moslik topildi...
Va keyin biz joriy tana tegini olingan yangisiga almashtiramiz. Belgilash yangilanadi, uslublar o'zgaradi va barcha topilgan natijalar ekranda sariq rangda ta'kidlanadi.

Muammo nima ekanligini allaqachon tushungansiz, lekin men hali ham batafsilroq tushuntiraman. Qidiruv maydoniga "div" so'zini kiritganingizni tasavvur qiling. Tasavvur qilganingizdek, tanada boshqa ko'plab teglar mavjud, jumladan div. Va agar biz yuqorida ko'rsatilgan uslublarni barcha "divs" larga qo'llasak, u endi blok bo'lmaydi, lekin tushunarsiz narsa bo'ladi, chunki dizayn buziladi. Natijada, belgilashni qayta yozganimizdan so'ng, biz butunlay buzilgan veb-sahifaga ega bo'lamiz. Bu shunday ko'rinadi.

Ko'rib turganingizdek, sahifa butunlay buzilgan. Muxtasar qilib aytganda, skript ishlamay qoldi va men o'zimni noldan yozishga qaror qildim, bu maqola nimaga bag'ishlangan.

Shunday qilib, biz skriptni noldan yozamiz.Men uchun hamma narsa shunday ko'rinadi.

Endi biz qidiruv shakliga qiziqamiz. Men uni qizil chiziq bilan aylantirdim.

Keling, buni biroz tushunib olaylik. Men buni quyidagicha amalga oshirdim (hozircha sof HTML). Uchta teg bilan shakl.

Birinchisi matn kiritish uchun;
Ikkinchisi qidiruvni bekor qilish uchun (tanlovni bekor qilish);
Uchinchisi - qidirish uchun (topilgan natijalarni ta'kidlang).

Shunday qilib, bizda kirish maydoni va 2 tugma mavjud. js.js faylida JavaScript yozaman. Faraz qilaylik, siz uni allaqachon yaratgan va ulagansiz.

Biz qiladigan birinchi narsa, qidiruv tugmasi va bekor qilish tugmasi bosilganda funksiya chaqiruvlarini yozishdir. Bu shunday ko'rinadi:

Bu erda nima borligini va nima uchun kerakligini bir oz tushuntirib beraman.

Matn maydoni uchun biz id="text-to-find" ( ushbu identifikatordan foydalanib, js dan elementga kiramiz).

Bekor qilish tugmasiga quyidagi atributlarni beramiz: type="button" onclick="javascript: FindOnPage("matn-topish",false); false qaytaring;"

- Turi: tugma
- Bosilganda FindOnPage("topish uchun matn", noto'g'ri) funksiyasi chaqiriladi. va matn maydonining identifikatorini o'tkazadi, noto'g'ri

Qidiruv tugmasiga quyidagi atributlarni beramiz: type="button" onclick="javascript: FindOnPage("matnni topish", rost); false qaytaring;"

- Turi: jo‘natish (tugma emas, chunki bu yerda siz maydonni kiritganingizdan so‘ng Enter dan foydalanishingiz mumkin, lekin tugmadan ham foydalanishingiz mumkin)
- Bosilganda FindOnPage("topish uchun matn", rost) funksiyasi chaqiriladi. va matn maydonining identifikatorini uzatadi, rost

Ehtimol, siz yana bir xususiyatni payqadingiz: rost/noto‘g‘ri. Biz undan qaysi tugma bosilganligini aniqlash uchun foydalanamiz (qidiruvni bekor qilish yoki qidirishni boshlash). Bekor qilish tugmasini bossak, false ga o'tamiz. Qidiruv tugmasini bossak, biz rost ga o'tamiz.

Mayli, davom etaylik. Keling, JavaScript-ga o'tamiz, biz siz JS faylini allaqachon yaratgan va DOM-ga ulagan deb taxmin qilamiz.

Kod yozishni boshlashdan oldin, keling, bir qadam orqaga chekinamiz va avval ishlar qanday ishlashini muhokama qilamiz. Bular. Aslini olganda, biz harakat rejasini yozamiz. Shunday qilib, biz maydonga matn kiritishda qidiriladigan sahifaga muhtojmiz, lekin teglar va atributlarga tegib bo'lmaydi. Bular. faqat matn ob'ektlari. Bunga qanday erishish mumkin - Ishonchim komilki, ko'p usullar mavjud. Ammo endi biz oddiy iboralardan foydalanamiz.

Shunday qilib, quyidagi muntazam ifoda faqat iz matnini qidiradi. kabi: ">... matn ...