Wyszukiwanie JavaScript według tagu. Organizowanie wyszukiwania na stronie internetowej w JavaScript (bez jQuery)
Kilka dni temu otrzymałem od firmy zadanie testowe na stanowisko Front-end Developer. Oczywiście zadanie składało się z kilku punktów. Ale teraz porozmawiamy tylko o jednym z nich - organizowaniu wyszukiwania stron. Te. banalne wyszukiwanie po tekście wpisanym w pole (analogicznie do Ctrl+F w przeglądarce). Specyfika zadania polegała na tym, że korzystanie z jakichkolwiek frameworków lub bibliotek JS było zabronione. Wszystko jest napisane w natywnym JavaScript.
Szukanie gotowego rozwiązania. Pierwsza myśl: ktoś już dokładnie to napisał, trzeba wpisać w google i skopiować i wkleić. Tak zrobiłem. W ciągu godziny znalazłem dwa dobre scenariusze, które zasadniczo działały w ten sam sposób, ale zostały napisane inaczej. Wybrałem ten, którego kod zrozumiałem lepiej i wkleiłem go na swoją stronę główną.Jeśli ktoś jest zainteresowany to wziąłem kod.
Skrypt zadziałał natychmiast. Myślałem, że problem został rozwiązany, ale jak się okazało, bez urazy dla autora scenariusza, był w nim ogromny błąd. Skrypt przeszukał całą zawartość tagu... i jak się zapewne domyślasz, przy wyszukiwaniu dowolnej kombinacji znaków przypominających tag lub jego atrybuty, cała strona HTML pękała.
Dlaczego skrypt nie zadziałał poprawnie? To proste. Skrypt działa w następujący sposób. Najpierw zapisujemy całą zawartość tagu body do zmiennej, następnie szukamy dopasowań za pomocą wyrażenia regularnego (ustawianego przez użytkownika przy wejściu w pole tekstowe), a następnie wszystkie dopasowania zastępujemy następującym kodem:...znaleziono dopasowanie...
A następnie zastępujemy bieżący znacznik treści otrzymanym nowym. Znacznik zostanie zaktualizowany, style się zmienią, a wszystkie znalezione wyniki zostaną podświetlone na ekranie na żółto.
Prawdopodobnie już zrozumiałeś, na czym polega problem, ale nadal wyjaśnię bardziej szczegółowo. Wyobraź sobie, że wpisałeś słowo „div” w polu wyszukiwania. Jak możesz sobie wyobrazić, wewnątrz body znajduje się wiele innych tagów, w tym div. A jeśli do wszystkich „divów” zastosujemy wskazane powyżej style, to nie będzie to już blok, ale coś niezrozumiałego, ponieważ projekt się psuje. W rezultacie po przepisaniu znaczników otrzymamy całkowicie zepsutą stronę internetową. Wygląda to tak.
Jak widać, strona jest całkowicie uszkodzona. Krótko mówiąc, skrypt okazał się niedziałający i postanowiłem napisać własny od podstaw, czemu poświęcony jest ten artykuł.
Zatem piszemy scenariusz od zera. U mnie wszystko wygląda tak.
Teraz interesuje nas formularz wyszukiwania. Otoczyłem go czerwoną linią.
Rozwiążmy to trochę. Zaimplementowałem to w następujący sposób (na razie czysty HTML). Formularz z trzema tagami.
Pierwsza służy do wprowadzania tekstu;
Drugi służy do anulowania wyszukiwania (odznacz);
Trzeci służy do wyszukiwania (podkreśl znalezione wyniki).
Mamy więc pole wejściowe i 2 przyciski. Napiszę JavaScript w pliku js.js. Załóżmy, że już go utworzyłeś i podłączyłeś.
Pierwszą rzeczą, którą zrobimy, będzie zapisanie wywołań funkcji po kliknięciu przycisku wyszukiwania i przycisku anulowania. Będzie to wyglądać tak:
Pozwólcie, że wyjaśnię trochę, co tu jest i dlaczego jest potrzebne.
Dla pola tekstowego podajemy id="text-to-find" ( używając tego identyfikatora, uzyskamy dostęp do elementu z js).
Przyciskowi anulowania nadajemy następujące atrybuty: type="button" onclick="javascript: FindOnPage("text-to-find",false); zwróć fałsz;”
- Typ: przycisk
- Po kliknięciu wywoływana jest funkcja FindOnPage("tekst do znalezienia",false). i przekazuje identyfikator pola tekstowego, false
Przyciskowi wyszukiwania nadajemy następujące atrybuty: type="button" onclick="javascript: FindOnPage("text-to-find",true); zwróć fałsz;”
- Typ: wyślij (nie przycisk, bo tutaj po wejściu w pole możesz użyć Enter, ale możesz też użyć przycisku)
- Po kliknięciu wywoływana jest funkcja FindOnPage("tekst do znalezienia",true). i przekazuje identyfikator pola tekstowego, true
Prawdopodobnie zauważyłeś jeszcze jedną cechę: prawda/fałsz. Wykorzystamy ją do ustalenia, który przycisk został kliknięty (anuluj wyszukiwanie lub rozpocznij wyszukiwanie). Jeśli klikniemy Anuluj, przekazujemy false . Jeśli klikniemy Szukaj, przekazujemy true .
Zanim zaczniemy pisać kod, cofnijmy się o krok i najpierw omówmy, jak wszystko powinno działać. Te. Krótko mówiąc, napiszemy plan działania. Potrzebujemy więc strony, która będzie przeszukiwana podczas wpisywania tekstu w polu, ale nie można dotykać tagów i atrybutów. Te. tylko obiekty tekstowe. Jak to osiągnąć – na pewno jest wiele sposobów. Ale teraz użyjemy wyrażeń regularnych.
Zatem poniższe wyrażenie regularne będzie wyszukiwać tylko następujący tekst. np.: ">… tekst...(.*?)(.*?)(.*?)
