← Coding

Word Tracker — Kalit soʻzlar va matn tahlili ilovasi

word-tracker-demo.html

Yangi oynada ochish trusted preview

🚀 Word Tracker — Kalit so'zlar va Matn Tahlili Muharriri

Word Tracker — bu matn mualliflari, SEO mutaxassislari, kopirayterlar va hikoyachilar uchun mo'ljallangan interaktiv real-vaqt rejimida ishlovchi matn muharriri. U matndagi berilgan kalit so'zlarni avtomatik aniqlaydi, ajratib ko'rsatadi (highlight) hamda ularning ishlatilish statistikasini hisoblab boradi.


🛠 Asosiy Imkoniyatlar (Features)

  • ⚡ Real-time Text Scanning: Editor ichidagi matn yozilishi bilan birga kalit so'zlar avtomatik ravishda izlanadi va vizual ravishda alohida ranglar bilan ajratiladi.
  • 🇺🇿 O'zbek Tili Bilan To'liq Muvofiqlik: O'zbek alifbosidagi tutroq va burchakli belgilar (o', g', ʻ, ʼ, ') hamda maxsus harflar (o'rmon, ko'zgu, cho'l) to'g'ri va yaxlit so'z sifatida tahlil qilinadi.
  • 🎯 Fuzzy Matching & Typo Tolerance: Levenshtein algoritmi orqali matndagi kichik imlo xatolari va qo'shimchalar bo'lsa ham, u kalit so'zga to'g'ri biriktiriladi.
  • 💡 Dynamic Selection Dialog: Matn ichidan istalgan so'z belgilanganda, aqlli tavsiya tizimi ishga tushadi va tanlangan so'zga eng yaqin kalit so'zlarni tepaga chiqarib beradi.
  • 📊 Visual Word Badges: Tepadagi panelda har bir kalit so'zning ishlatilish soni va u matnda mavjud bo'lsa, avtomatik checked (strikethrough) holati namoyon bo'ladi.

💻 Ishlatilgan Texnologiyalar (Tech Stack)

  • HTML5 & CSS3 — Zamonaviy va moslashuvchan UI tuzilmasi.
  • Tailwind CSS — Dark mode va komponentlar uslubi uchun.
  • Alpine.js — Yengil, reaktiv va tezkor frontend mantiqiy boshqaruvi.
  • Vanilla JS (DOM & TreeWalker API) — Matn tugunlarini (TextNodes) samarali va xavfsiz qayta ishlash.

📖 Foydalanish Qo'llanmasi

  1. Kalit so'zlarni kiriting: Tepadagi maydonga (textarea) kerakli so'zlarni vergul yoki yangi qatordan yozib kiriting.
  2. Matn yozing: Asosiy oq muharrir maydonida matningizni yoki hikoyangizni yozishni boshlang.
  3. Avto-bo'yoq va Hisob: Matndagi kalit so'zlar avtomatik rangga kiradi va tepadagi hisoblagich oshib boradi.
  4. Qo'lda biriktirish: Agar algoritmlar mos so'zni topa olmasa, matndagi so'zni sichqoncha bilan belgilang va chiqqan pop-up dialog orqali uni tegishli kalit so'zga bog'lab qo'ying.