Javascript găsește un șir pe o pagină. Căutați pe o pagină folosind javascript

Acum câteva zile, am primit o sarcină de testare de la companie pentru postul vacant pentru dezvoltatori front-end. Desigur, sarcina a constat din mai multe puncte. Dar acum vom vorbi doar despre unul dintre ele - organizarea unei căutări pe pagină. Acestea. o căutare banală folosind textul introdus în câmp (analog Ctrl+F într-un browser). Particularitatea sarcinii a fost că utilizarea oricăror cadre sau biblioteci JS este interzisă. Totul este scris în JavaScript nativ.

Căutarea unei soluții gata făcute În primul rând, cineva a scris deja exact acest lucru, trebuie să o căutați pe google și să o copiați și lipiți. Asa am facut. În decurs de o oră, am găsit două scenarii bune care au funcționat în esență la fel, dar au fost scrise diferit. L-am ales pe cel al cărui cod l-am înțeles mai bine și l-am lipit în pagina mea de pornire.

Daca e cineva interesat, am luat codul.

Scenariul a funcționat imediat. Am crezut că problema a fost rezolvată, dar după cum sa dovedit, fără supărare pentru autorul scenariului, a existat un defect uriaș în ea. Scriptul a căutat în întregul conținut al etichetei... și, după cum probabil ați ghicit, atunci când căutați orice combinație de caractere care seamănă cu eticheta sau cu atributele acesteia, întreaga pagină HTML se rupea.

De ce nu a funcționat corect scriptul? E simplu. Scriptul funcționează după cum urmează. Mai întâi, scriem întregul conținut al etichetei body într-o variabilă, apoi căutăm potriviri cu o expresie regulată (setată de utilizator la intrarea în câmpul de text) și apoi înlocuim toate potrivirile cu următorul cod:

...potrivire găsită...
Și apoi înlocuim eticheta corporală actuală cu cea nouă primită. Marcajul este actualizat, stilurile se schimbă și toate rezultatele găsite sunt evidențiate cu galben pe ecran.

Probabil ați înțeles deja care este problema, dar voi explica în continuare mai detaliat. Imaginați-vă că ați introdus cuvântul „div” în câmpul de căutare. După cum vă puteți imagina, există multe alte etichete în interiorul corpului, inclusiv div. Și dacă aplicăm stilurile indicate mai sus tuturor „div-urilor”, atunci nu va mai fi un bloc, ci ceva de neînțeles, deoarece designul se rupe. Drept urmare, după rescrierea markupului, vom ajunge cu o pagină web complet spartă. Arata cam asa.

După cum puteți vedea, pagina este complet spartă. Pe scurt, scenariul s-a dovedit a fi nefuncțional și am decis să-l scriu pe al meu de la zero, căruia îi este dedicat acest articol.

Așa că scriem un scenariu de la zero. Așa arată totul pentru mine.

Acum ne interesează formularul de căutare. L-am încercuit cu o linie roșie.

Să ne dăm seama puțin. L-am implementat după cum urmează (pur HTML pentru moment). Formular cu trei etichete.

Prima este pentru introducerea textului;
Al doilea este pentru anularea căutării (deselectare);
Al treilea este pentru căutare (evidențiați rezultatele găsite).

Deci, avem un câmp de introducere și 2 butoane. Voi scrie JavaScript în fișierul js.js. Să presupunem că l-ați creat și conectat deja.

Primul lucru pe care îl vom face este să notăm apelurile de funcții când se face clic pe butonul de căutare și butonul de anulare. Va arata asa:

Permiteți-mi să vă explic puțin ce este aici și de ce este necesar.

Pentru câmpul de text dăm id="text-to-find" ( folosind acest id vom accesa elementul din js).

Dam butonului de anulare urmatoarele atribute: type="button" onclick="javascript: FindOnPage("text-to-find",false); returnează false;"

- Tip: buton
- Când se face clic, funcția FindOnPage ("text-to-find",false) este apelată. și trece id-ul câmpului de text, false

Oferim butonului de căutare următoarele atribute: type="button" onclick="javascript: FindOnPage("text-to-find",true); returnează false;"

- Tastați: trimiteți (nu un buton deoarece aici puteți folosi Enter după introducerea unui câmp, dar puteți folosi și un buton)
- Când se face clic, funcția FindOnPage ("text-to-find",true) este apelată. și trece id-ul câmpului de text, adevărat

Probabil ați observat încă un atribut: adevarat fals. Îl vom folosi pentru a determina ce buton a fost apăsat (anulați căutarea sau începeți căutarea). Dacă facem clic pe anulare, trecem false . Dacă facem clic pe căutare, trecem adevărat.

Bine, hai să mergem mai departe. Să trecem la JavaScript Vom presupune că ați creat și conectat deja fișierul js la DOM.

Înainte de a începe să scriem cod, să facem un pas înapoi și să discutăm mai întâi cum ar trebui să funcționeze lucrurile. Acestea. În esență, vom scrie un plan de acțiune. Deci, avem nevoie ca pagina să fie căutată atunci când introducem text într-un câmp, dar etichetele și atributele nu pot fi atinse. Acestea. numai obiecte text. Cum să realizezi acest lucru - sunt sigur că există multe moduri. Dar acum vom folosi expresii regulate.

Deci următoarea expresie regulată va căuta doar următorul text. cum ar fi: „>... text...