Tekstiotsingu järjehoidja loomine JavaScriptiga

Järjehoidjad on JavaScripti rakendused mida saab kasutada kui brauseri järjehoidjad. Neid kasutatakse kasutajate lubamiseks erinevaid tegevusi veebilehtedel. Näiteks see FontShopi järjehoidja on FontShopi veebifontide eelvaade mis tahes veebilehel.

Selles artiklis näeme, kui kiire ja lihtne see on märkige järjehoidja selle loomisega täidab Wikiwandi (parem Wikipedia) otsing valitud teksti kohta mis tahes veebilehel.

Kuidas järjehoidjad töötavad

Järjehoidja URI kasutab javascript: protokoll see näitab seda koosneb JavaScript-koodist. Kui klõpsate järjehoidjale, saate seda teha käivitage JavaScript veebisaidil ja täidab ülesandeid, näiteks lehekülje välimuse muutmist, teisele lehele suunamist või selle kohta uue teabe näitamist.

Kuna järjehoidjad on sisuliselt JavaScripti koodi komplekti, neid on lihtne luua väheste JavaScript-teadmistega, kas isiklikuks kasutamiseks või kasutajatele pakkumiseks, nagu näiteks WordPress oma Pressiteatega..

Alustage JavaScripti koodiga

The URL-i struktuur Wikiwand kasutab inglise keele artiklit https://www.wikiwand.com/en/articleTitle. Peame kirjutama skripti, mis hüppab Wikiwandi lehele, mille URL lõpeb stringiga, mille kasutaja just valis - valitud tekst vajab asendada artikkel.

Esiteks, me teksti kätte saada kasutaja on lehel valinud järgmise koodi:

 getSelection () toString () 

Me peame valatud tagastatud objekt getSelection () stringina kasutades toString () selleks, et seda teha väljastage valitud tekst.

Seejärel peame külastage Wikiwandi artikli lehele. Me saavutame selle järgmise loogika abil newURL on Wikiwandi artikli lehekülje URL (mis sisaldab valitud stringi lõpus):

 asukoht.href = newURL 

Kui paneme need kaks koodilõiget kokku, jõuame järgmise skriptiga:

 location.href = 'https://www.wikiwand.com/et/'+getSelection () .toString () 

Nüüd peame ainult lisama javascript: protokolli ees ja meil on lõplik kood me kasutame meie järjehoidjas:

 // lisage ühele reale ilma reavahetusteta javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () toString () asendage (/ / g, '% 20' ) 

Vabatahtlik asenda (/ n / g, '% 20') lõpus asendab kõik uued read (n) tekstis ühe tühikuga (% 20).

JavaScripti kood on valmis. Pange tähele, et kood tuleb paigutada ühes reas ilma reavahetusteta, kuna hiljem on see tekstisisestusväljale.

Loo järjehoidja

Avage brauseri järjehoidjate aken ja uue järjehoidja lisamine:

• Firefox: Vajutage ctrl + shift + B / cmd + shift + B, paremklõpsake "Järjehoidjate tööriistariba" ja valige "Uus järjehoidja".
• Chrome: Vajuta ctrl + shift + O / cmd + alt + B, paremklõpsake "Järjehoidjate riba" ja valige "Lisa leht ...".

URL-i väljal kopeerige JavaScript-kood varem. Kui järjehoidja on loodud, on see valmis kasutamiseks; minge mis tahes veebilehele, valige sõna soovite otsida Wikiwandis ja klõpsa järjehoidjale - Wikiwandi artikli leht avaneb korraga.

Kiire juurdepääs

Selle asemel, et järjehoidjate menüüsse iga kord, kui vajate järjehoidjat, jõuad, võite valida kuvada see otse brauseris kiireks juurdepääsuks.

• Firefox: Klõpsake ülemises menüüribas nuppu "Vaade> Tööriistaribad" ja valige "Järjehoidjate tööriistariba".
• Chrome: Vajutage ctrl + shift + B / cmd + shift + B.

Loo järjehoidja link

Võite lisada oma järjehoidja veebisaidile hüperlingina samuti külastajad saab järjehoidja lohistades lihtsalt linki järjehoidja tööriistaribale või paremklõpsates lingil ja valides selle järjehoidja.

Oma järjehoidja hüperlingiks muutmiseks looge HTML-silt koos järjehoidja skriptiga kui selle väärtust href atribuut:

   Wikiwand Otsi järjehoidjat  

Kuidas salvestada järjehoidjaid eraldi

Sa saad ka kasutage eraldi JavaScripti faili järjehoidjakoodi salvestamiseks, mis ei ole ilmselt vajalik, kui teil on lühike skript - nagu see, mida me just selles juhendis nägime -, kuid see võib olla mugav, kui JavaScripti kood on liiga pikk, et see järjehoidjaribale kopeerida teie brauserist.

Fail myscript.js tahe peamine JavaScript-kood järjehoidja jaoks ja peate lisama järgmise koodi järjehoidja URL-i (kas brauseri järjehoidjariba või väärtuse href atribuut HTML-failis):

 // lisada ühte rida ilma reavaheteta javascript: (() => koos (dokument) let s = createElement ('skript'); s.src = 'myscript.js'; head.appendChild (id) ) (); 

Ülaltoodud koodilõik on mähitud iseseisvale noolefunktsiooni, ja kasutab ECMAScript 6 funktsioone, nagu näiteks lase võtmesõna, et vähendada koodi pikkust. See lisab a > silt, mis näitab myscript.js faili dokumendi osa kui kasutaja klõpsab järjehoidjale (Pange tähele, et peate võib-olla kasutama absoluutset teed myscript.js fail).