جستجوی جاوا اسکریپت بر اساس برچسب سازماندهی جستجو در یک صفحه وب در جاوا اسکریپت (بدون جی کوئری)

چند روز پیش یک تست آزمایشی از شرکت برای جای خالی برنامه‌نویس Front-end دریافت کردم. البته تکلیف شامل چند نکته بود. اما اکنون فقط در مورد یکی از آنها صحبت خواهیم کرد - سازماندهی جستجوی صفحه. آن ها جستجوی پیش پا افتاده با استفاده از متن وارد شده در فیلد (مشابه با Ctrl+F در مرورگر). ویژگی کار این بود که استفاده از هر چارچوب یا کتابخانه JS ممنوع است. همه چیز با جاوا اسکریپت بومی نوشته شده است.

اگر کسی علاقه داشت من کد را گرفتم.

فیلمنامه بلافاصله کار کرد. فکر می‌کردم مشکل حل شده است، اما همانطور که معلوم شد، هیچ توهینی به نویسنده فیلمنامه نبود، یک نقص بزرگ در آن وجود داشت. اسکریپت کل محتویات تگ را جستجو کرد... و همانطور که احتمالاً حدس می‌زنید، هنگام جستجوی ترکیبی از کاراکترهایی که شبیه برچسب یا ویژگی‌های آن هستند، کل صفحه HTML شکسته می‌شود.

... مطابق پیدا شد ...
و سپس تگ بدنه فعلی را با تگ جدید دریافتی جایگزین می کنیم. نشانه گذاری به روز می شود، سبک ها تغییر می کنند و همه نتایج یافت شده با رنگ زرد روی صفحه برجسته می شوند.

احتمالاً قبلاً متوجه شده اید که مشکل چیست، اما من همچنان با جزئیات بیشتر توضیح خواهم داد. تصور کنید که کلمه "div" را در قسمت جستجو وارد کرده اید. همانطور که می توانید تصور کنید، بسیاری از برچسب های دیگر در داخل بدنه وجود دارد، از جمله div. و اگر سبک های ذکر شده در بالا را برای همه "divs" اعمال کنیم، دیگر یک بلوک نخواهد بود، بلکه چیزی غیرقابل درک است، زیرا طرح شکسته می شود. در نتیجه، پس از بازنویسی نشانه گذاری، با یک صفحه وب کاملاً شکسته مواجه خواهیم شد. به نظر می رسد این است.

همانطور که می بینید صفحه کاملا خراب است. به طور خلاصه، فیلمنامه غیرقابل اجرا بود و من تصمیم گرفتم از ابتدا فیلمنامه خود را بنویسم که این مقاله به آن اختصاص دارد.

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

بیایید کمی آن را بفهمیم. من آن را به صورت زیر پیاده سازی کردم (فعلا HTML خالص). فرم با سه تگ

اولین مورد برای وارد کردن متن است.
مورد دوم برای لغو جستجو (لغو انتخاب) است.
مورد سوم برای جستجو است (نتایج یافت شده را برجسته کنید).

بنابراین، ما یک فیلد ورودی و 2 دکمه داریم. من جاوا اسکریپت را در فایل js.js خواهم نوشت. بیایید فرض کنیم که قبلا آن را ایجاد و متصل کرده اید.

اولین کاری که انجام می دهیم این است که وقتی دکمه جستجو و دکمه لغو کلیک می شود، فراخوانی های تابع را یادداشت می کنیم. به این صورت خواهد بود:

بگذارید کمی توضیح دهم که اینجا چیست و چرا به آن نیاز است.

برای فیلد متن id="text-to-find" ( با استفاده از این id به عنصر از js دسترسی خواهیم داشت).

ما به دکمه لغو ویژگی های زیر را می دهیم: type="button" onclick="javascript: FindOnPage("text-to-find",false); بازگشت نادرست؛"

- نوع: دکمه
- با کلیک کردن، تابع FindOnPage ("text-to-find", false) فراخوانی می شود. و شناسه فیلد متن، false را ارسال می کند

ما به دکمه جستجو ویژگی های زیر را می دهیم: type="button" onclick="javascript: FindOnPage("text-to-find",true); بازگشت نادرست؛"

- نوع: ارسال (دکمه نیست زیرا در اینجا می توانید پس از وارد کردن فیلد از Enter استفاده کنید، اما می توانید از یک دکمه نیز استفاده کنید)
- با کلیک کردن، تابع FindOnPage ("text-to-find", true) فراخوانی می شود. و شناسه فیلد متنی درست را ارسال می کند

احتمالاً متوجه یک ویژگی دیگر شده اید: درست / نادرست. ما از آن برای تعیین اینکه روی کدام دکمه کلیک شده است (لغو جستجو یا شروع جستجو) استفاده خواهیم کرد. اگر روی لغو کلیک کنیم، false را پاس می کنیم. اگر روی جستجو کلیک کنیم، درست است.

قبل از اینکه شروع به نوشتن کد کنیم، اجازه دهید یک قدم به عقب برگردیم و ابتدا در مورد اینکه چگونه کارها باید کار کنند بحث کنیم. آن ها در اصل، ما یک برنامه عملیاتی را می نویسیم. بنابراین، هنگام وارد کردن متن در یک فیلد، باید صفحه را جستجو کنیم، اما برچسب ها و ویژگی ها قابل لمس نیستند. آن ها فقط اشیاء متنی چگونه می توان به این هدف رسید - من مطمئن هستم که راه های زیادی وجود دارد. اما اکنون از عبارات منظم استفاده خواهیم کرد.

بنابراین عبارت منظم زیر فقط متن زیر را جستجو می کند. مانند: ">… متن...(.*؟)(.*؟)(.*؟)