Forskellige mænd søger php sc. Organisering af en søgning på en webside i JavaScript (uden jQuery)

Website udvikling

Jeg modtog den for et par dage siden prøve fra virksomheden til den ledige stilling Front-end dev. Opgaven bestod naturligvis af flere punkter. Men nu vi taler kun én af dem er organiseringen af ​​sidesøgning. De der. en banal søgning ved hjælp af teksten indtastet i feltet (analogt med Ctrl+F i en browser). Det særlige ved opgaven var, at brugen af ​​JS-frameworks eller -biblioteker er forbudt. Alt er skrevet i native JavaScript.

Søger efter en færdig løsning Første tanke: nogen har allerede skrevet præcis dette, du skal google det og copy-paste det. Så det gjorde jeg. Inden for en time fandt jeg to gode manuskripter, der i det væsentlige fungerede på samme måde, men som var skrevet anderledes. Jeg valgte den, hvis kode jeg forstod bedre og indsatte den på min hjemmeside.

Hvis nogen er interesseret, så tog jeg koden.

Scriptet virkede med det samme. Jeg troede, at problemet var blevet løst, men som det viste sig, var der ingen fornærmelse for forfatteren af ​​manuskriptet, der var en stor fejl i det. Scriptet søgte i hele indholdet af tagget... og, som du sikkert har gættet, når man søgte efter en kombination af tegn, der lignede tagget eller dets attributter, ville hele HTML-siden gå i stykker.

Hvorfor fungerede scriptet ikke korrekt? Det er simpelt. Scriptet fungerer som følger. Først skriver vi hele indholdet af body-tagget ind i en variabel, derefter søger vi efter match med et regulært udtryk (sat af brugeren ved indtastning af tekstfeltet) og derefter erstatter vi alle matches med følgende kode:

...match fundet...
Og så udskifter vi det nuværende body tag med det nye modtagne. Opmærkningen opdateres, stilene ændres, og alle fundne resultater er fremhævet med gult på skærmen.

Du har sikkert allerede forstået, hvad problemet er, men jeg vil stadig forklare mere detaljeret. Forestil dig, at du har indtastet ordet "div" i søgefeltet. Som du kan forestille dig, er der mange andre tags inde i kroppen, inklusive div. Og hvis vi anvender stilarterne angivet ovenfor på alle "divs", så vil det ikke længere være en blok, men noget uforståeligt, da designet går i stykker. Som et resultat vil vi, efter at have omskrevet opmærkningen, ende med en fuldstændig ødelagt webside. Det ser sådan ud.

Som du kan se, er siden fuldstændig ødelagt. Kort sagt viste manuskriptet sig ikke at fungere, og jeg besluttede at skrive mit eget fra bunden, hvilket er det, som denne artikel er dedikeret til.

Så vi skriver et manuskript fra bunden. Sådan ser alting ud for mig.

Nu er vi interesserede i søgeformularen. Jeg cirkulerede den med en rød streg.

Lad os finde ud af det lidt. Jeg implementerede det som følger (for nu ren HTML). Formular med tre tags.

Den første er til at indtaste tekst;
Den anden er til at annullere søgningen (fravælg);
Den tredje er til søgning (fremhæv de fundne resultater).

Så vi har et indtastningsfelt og 2 knapper. Jeg vil skrive JavaScript i filen js.js. Lad os antage, at du allerede har oprettet og forbundet det.

Den første ting, vi skal gøre, er at skrive funktionskald ned, når der trykkes på søgeknappen og annuller-knappen. Det vil se sådan ud:

Lad mig forklare lidt, hvad der er her, og hvorfor det er nødvendigt.

For tekstfeltet giver vi id="text-to-find" ( ved at bruge dette id får vi adgang til elementet fra js).

Vi giver annulleringsknappen følgende attributter: type="button" onclick="javascript: FindOnPage("text-to-find",false); returner falsk;"

- Type: knap
- Når der klikkes på den, kaldes FindOnPage("text-to-find",false)-funktionen. og sender tekstfeltets id, falsk

Vi giver søgeknappen følgende attributter: type="button" onclick="javascript: FindOnPage("text-to-find",true); returner falsk;"

- Type: send (ikke en knap, for her kan du bruge Enter efter at have indtastet et felt, men du kan også bruge en knap)
- Når der klikkes på den, kaldes FindOnPage("text-to-find",true)-funktionen. og sender tekstfeltets id, sandt

Du har sikkert bemærket endnu en egenskab: sandt falsk. Vi vil bruge det til at bestemme, hvilken knap der blev klikket på (annuller søgning eller start søgning). Hvis vi klikker på annuller, sender vi falsk . Hvis vi klikker på søg, passerer vi true .

Okay, lad os komme videre. Lad os gå videre til JavaScript. Vi antager, at du allerede har oprettet og forbundet js-filen til DOM.

Før vi begynder at skrive kode, lad os tage et skridt tilbage og først diskutere, hvordan tingene skal fungere. De der. I det væsentlige vil vi nedskrive en handlingsplan. Så vi skal søge på siden, når du indtaster tekst i et felt, men tags og attributter kan ikke røres. De der. kun tekstobjekter. Hvordan man opnår dette - jeg er sikker på, at der er mange måder. Men nu vil vi bruge regulære udtryk.

Så det næste er almindelig udtryk vil kun søge i teksten næste gang. som: ">... tekst...