Javascript-haku tagilla. Haun järjestäminen verkkosivulla JavaScriptillä (ilman jQueryä)
Pari päivää sitten sain yritykseltä testitehtävän Front-end dev -työpaikkaan. Tehtävä koostui tietysti useista kohdista. Mutta nyt puhumme vain yhdestä niistä - sivuhaun järjestämisestä. Ne. banaali haku kenttään syötetyllä tekstillä (analogisesti Ctrl+F selaimessa). Tehtävän erikoisuus oli, että JS-kehysten tai kirjastojen käyttö on kielletty. Kaikki on kirjoitettu alkuperäisellä JavaScriptillä.
Valmiin ratkaisun etsiminen Ensimmäinen ajatus: joku on jo kirjoittanut juuri tämän, sinun täytyy googlettaa ja kopioida-liitä. Niin minä tein. Löysin tunnin sisällä kaksi hyvää käsikirjoitusta, jotka toimivat pohjimmiltaan samalla tavalla, mutta oli kirjoitettu eri tavalla. Valitsin sen, jonka koodin ymmärsin paremmin, ja liitin sen kotisivulleni.Jos jotakuta kiinnostaa niin otin koodin.
Käsikirjoitus toimi heti. Luulin, että ongelma oli ratkaistu, mutta kuten kävi ilmi, käsikirjoituksen tekijää ei loukata, siinä oli valtava virhe. Skripti haki koko tunnisteen sisällöstä... ja kuten luultavasti arvasitkin, kun etsit mitä tahansa merkkiyhdistelmää, joka muistutti tunnistetta tai sen attribuutteja, koko HTML-sivu katkesi.
Miksi skripti ei toiminut oikein? Se on yksinkertaista. Käsikirjoitus toimii seuraavasti. Ensin kirjoitetaan koko body-tunnisteen sisältö muuttujaan, sitten etsitään osumia säännöllisellä lausekkeella (käyttäjä asettaa tekstikenttään kirjoittaessaan) ja sitten korvataan kaikki osumat seuraavalla koodilla:...osuma löytyi...
Ja sitten korvaamme nykyisen body-tunnisteen uudella vastaanotetulla. Merkinnät päivitetään, tyylit muuttuvat ja kaikki löydetyt tulokset korostetaan keltaisella näytöllä.
Ymmärsit todennäköisesti jo, mikä ongelma on, mutta selitän silti yksityiskohtaisemmin. Kuvittele, että kirjoitit sanan "div" hakukenttään. Kuten voit kuvitella, bodyn sisällä on monia muita tunnisteita, mukaan lukien div. Ja jos käytämme edellä mainittuja tyylejä kaikkiin "diveihin", se ei ole enää lohko, vaan jotain käsittämätöntä, koska muotoilu rikkoutuu. Tämän seurauksena merkintöjen uudelleenkirjoituksen jälkeen päädymme täysin rikkinäiseen verkkosivuun. Se näyttää tältä.
Kuten näet, sivu on täysin rikki. Lyhyesti sanottuna käsikirjoitus osoittautui toimimattomaksi, ja päätin kirjoittaa omani tyhjästä, mihin tämä artikkeli on omistettu.
Joten kirjoitamme käsikirjoituksen tyhjästä. Tältä kaikki näyttää minulle.
Nyt olemme kiinnostuneita hakulomakkeesta. Ympyröin sen punaisella viivalla.
Otetaanpa vähän selvää. Toteutin sen seuraavasti (puhdas HTML toistaiseksi). Lomake kolmella tunnisteella.
Ensimmäinen on tekstin syöttämiseen;
Toinen on haun peruuttamista varten (poista valinta);
Kolmas on hakua varten (korosta löydetyt tulokset).
Joten meillä on syöttökenttä ja 2 painiketta. Kirjoitan JavaScriptin js.js-tiedostoon. Oletetaan, että olet jo luonut ja yhdistänyt sen.
Ensimmäinen asia, jonka teemme, on kirjoittaa muistiin funktiokutsut, kun hakupainiketta ja peruutuspainiketta napsautetaan. Se näyttää tältä:
Selitän hieman, mitä täällä on ja miksi sitä tarvitaan.
Tekstikenttään annamme id="text-to-find" ( Tämän tunnuksen avulla pääsemme elementtiin js:stä).
Annamme peruutuspainikkeelle seuraavat attribuutit: type="button" onclick="javascript: FindOnPage("text-to-find",false); return false;"
- Tyyppi: painike
- Kun napsautat, FindOnPage("text-to-find",false) -toiminto kutsutaan. ja välittää tekstikentän id:n, false
Annamme hakupainikkeelle seuraavat attribuutit: type="button" onclick="javascript: FindOnPage("text-to-find",true); return false;"
- Tyyppi: lähetä (ei painike, koska tässä voit käyttää Enteriä kentän syöttämisen jälkeen, mutta voit myös käyttää painiketta)
- Kun napsautat, FindOnPage("text-to-find",true) -toiminto kutsutaan. ja välittää tekstikentän tunnuksen, tosi
Olet todennäköisesti huomannut vielä yhden ominaisuuden: tosi/epätosi. Käytämme sitä määrittämään, mitä painiketta napsautettiin (peruuta haku tai aloita haku). Jos napsautamme peruuttaa, ohitamme false. Jos napsautamme hakua, ohitamme tosi.
Ennen kuin alamme kirjoittaa koodia, otetaan askel taaksepäin ja keskustellaan ensin siitä, miten asioiden pitäisi toimia. Ne. Pohjimmiltaan kirjoitamme toimintasuunnitelman. Joten meidän on haettava sivua syöttäessäsi tekstiä kenttään, mutta tunnisteisiin ja määritteisiin ei voi koskea. Ne. vain tekstiobjekteja. Kuinka saavuttaa tämä - Olen varma, että on monia tapoja. Mutta nyt käytämme säännöllisiä lausekkeita.
Joten seuraava säännöllinen lauseke hakee vain seuraavaa tekstiä. kuten: ">… teksti...(.*?)(.*?)(.*?)
