Javascript bir sayfada bir dize bulur. Javascript kullanarak bir sayfada arama yapın

Birkaç gün önce şirketten Front-end geliştirici pozisyonu için bir test görevi aldım. Elbette görev birkaç noktadan oluşuyordu. Ancak şimdi bunlardan yalnızca biri hakkında konuşacağız - sayfa araması düzenlemek. Onlar. alana girilen metni kullanan sıradan bir arama (tarayıcıdaki Ctrl+F'ye benzer). Görevin özelliği, herhangi bir JS çerçevesinin veya kütüphanesinin kullanımının yasak olmasıdır. Her şey yerel JavaScript'te yazılmıştır.

Hazır bir çözüm arama İlk düşünce: Birisi bunu zaten yazmış, Google'a yazıp kopyalayıp yapıştırmanız gerekiyor. Ben de yaptım. Bir saat içinde aslında aynı şekilde çalışan ancak farklı yazılmış iki iyi senaryo buldum. Kodunu daha iyi anladığımı seçip ana sayfama yapıştırdım.

İlgilenen olursa kodu aldım.

Senaryo hemen çalıştı. Sorunun çözüldüğünü sanıyordum ama senaryonun yazarının kusura bakmayın, büyük bir kusuru olduğu ortaya çıktı. Komut dosyası, etiketin tüm içeriğini aradı... ve muhtemelen tahmin ettiğiniz gibi, etikete veya onun niteliklerine benzeyen herhangi bir karakter kombinasyonunu ararken tüm HTML sayfası bozuluyordu.

Komut dosyası neden düzgün çalışmadı? Basit. Senaryo şu şekilde çalışıyor. Öncelikle body etiketinin tüm içeriğini bir değişkene yazıyoruz, ardından normal ifadeyle (metin alanına girerken kullanıcı tarafından belirlenen) eşleşmeler arıyoruz ve ardından tüm eşleşmeleri aşağıdaki kodla değiştiriyoruz:

...eşleşme bulundu...
Daha sonra mevcut gövde etiketini aldığımız yenisiyle değiştiriyoruz. İşaretleme güncellenir, stiller değişir ve bulunan tüm sonuçlar ekranda sarı renkle vurgulanır.

Muhtemelen sorunun ne olduğunu zaten anladınız, ancak yine de daha ayrıntılı olarak açıklayacağım. Arama alanına “div” kelimesini girdiğinizi düşünün. Tahmin edebileceğiniz gibi body'nin içinde div de dahil olmak üzere pek çok etiket var. Ve yukarıda belirtilen stilleri tüm "div'lere" uygularsak, o zaman artık bir blok olmayacak, tasarım bozulduğu için anlaşılmaz bir şey olacaktır. Sonuç olarak, işaretlemeyi yeniden yazdıktan sonra tamamen bozuk bir web sayfasıyla karşılaşacağız. Şuna benziyor.

Gördüğünüz gibi sayfa tamamen bozuk. Kısacası senaryonun çalışmadığı ortaya çıktı ve ben de kendi senaryomu sıfırdan yazmaya karar verdim, bu makale de buna adandı.

Yani sıfırdan bir senaryo yazıyoruz, benim için her şey böyle görünüyor.

Şimdi arama formuyla ilgileniyoruz. Kırmızı çizgiyle daire içine aldım.

Hadi biraz çözelim. Bunu şu şekilde uyguladım (şimdilik saf HTML). Üç etiketli form.

Birincisi metin girmek içindir;
İkincisi, aramayı iptal etmek içindir (seçimi kaldırın);
Üçüncüsü arama içindir (bulunan sonuçları vurgulayın).

Yani bir giriş alanımız ve 2 düğmemiz var. Js.js dosyasına JavaScript yazacağım. Bunu zaten oluşturduğunuzu ve bağladığınızı varsayalım.

İlk yapacağımız şey arama butonu ve iptal butonuna basıldığında fonksiyon çağrılarını yazmak olacaktır. Bunun gibi görünecek:

Burada ne olduğunu ve neden buna ihtiyaç duyulduğunu biraz açıklayayım.

Metin alanı için id="bulunacak metin" ( bu kimliği kullanarak öğeye js'den erişeceğiz).

İptal düğmesine şu nitelikleri veririz: type="button" onclick="javascript: FindOnPage("text-to-find",false); yanlış döndür;"

- Tür: düğme
- Tıklandığında FindOnPage("bulunacak metin",yanlış) işlevi çağrılır. ve metin alanının kimliğini iletir, false

Arama düğmesine şu nitelikleri veririz: type="button" onclick="javascript: FindOnPage("text-to-find",true); yanlış döndür;"

- Tür: gönder (bir düğme değil çünkü burada bir alana girdikten sonra Enter'ı kullanabilirsiniz, ancak bir düğme de kullanabilirsiniz)
- Tıklandığında FindOnPage("text-to-find",true) işlevi çağrılır. ve metin alanının kimliğini iletir, true

Muhtemelen bir özelliği daha fark etmişsinizdir: doğru yanlış. Hangi düğmenin tıklandığını belirlemek için bunu kullanacağız (aramayı iptal et veya aramayı başlat). İptal'e tıklarsak false değerini geçeriz. Aramaya tıklarsak true değerini geçeriz.

Tamam, devam edelim. Hadi JavaScript'e geçelim. Js dosyasını zaten oluşturup DOM'a bağladığınızı varsayacağız.

Kod yazmaya başlamadan önce bir adım geriye gidelim ve ilk olarak işlerin nasıl yürümesi gerektiğini tartışalım. Onlar. Aslında bir eylem planı yazacağız. Yani bir alana metin girerken aranacak sayfaya ihtiyacımız var ancak etiketlere ve niteliklere dokunulamıyor. Onlar. yalnızca metin nesneleri. Bunu nasıl başarabiliriz? Eminim birçok yol vardır. Ama şimdi düzenli ifadeler kullanacağız.

Yani aşağıdaki normal ifade yalnızca aşağıdaki metni arayacaktır. şöyle: ">... metin...