, fokus: jquery replacetext,,,,, andel,,,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' ikke gå glip af det.,,,,, hver anden uge tager vi et meget fokuseret og se på en interessant og nyttig effekt, stik af, hack, bibliotek eller endog et smart teknologi.vi vil derefter forsøge at enten dekonstruere kode eller skabe en sjov lille projekt med det.i dag skal vi se på det fremragende replacetext jquery stik af.interesseret?lad os komme i gang efter springet.,,,, et ord fra forfatteren, som web - udviklere, vi har adgang til en svimlende mængde af præ - byggede kode, det være sig et lille klip eller en fuldt udviklet rammer.medmindre du gør noget meget specifikt, er chancen, er der allerede noget prebuilt for dig at gearing.desværre er mange af disse fremragende tilbud sygner hen i anonymitet, specielt til de ikke - alvorlige publikum. denne serie søger at rette op på dette område ved at indføre en virkelig velskrevet, bruges kode... er det et stik af, virkning eller en teknologi til læseren.yderligere, hvis den er lille nok, vil vi forsøge at dekonstruere kode og forstå, hvordan den gør det voodoo.hvis det er noget større, vil vi forsøge at skabe et mini - projekt med at lære reb og forhåbentlig forstår, hvordan gør brug af det i den virkelige verden.,, om replacetext, er vi sparker ting ved at fokusere på ben alman er fremragende replacetext stik af.her er nogle hurtige info:,, type:, stik af,, teknologi, javascript [byggede på jquery bibliotek], forfatter: ben alman. funktion: beskedne, kortfattet måde at erstatte tekstmæssigt indhold, er problemet, at indholdet i din side lyder meget enkelt.efter alle de indfødte javascript metode, erstatte, ser ud til at gøre det samme.hvis du føler dig meget doven, jquery gør, at hele indholdet af beholderen meget nemt.//bruger bare erstatte $("# beholder"). text(). erstatte (/tekst /g,'replacement tekst) //erstatter hele * * indhold af beholderen var lazyfool = "hele indholdet med tekst erstattede eksternt" $("# beholder"). http: //(lazyfool), som man siger, bare fordi du kan gøre, betyder det ikke, du bør gøre.disse to metoder, der er generelt undgået [uden for kant tilfælde], fordi de ødelægger en masse ting, mens de gør, hvad de vil. det vigtigste spørgsmål med disse metoder er, at de slå dom struktur effektivt at ødelægge enhver ikke - tekst node beholderen indeholder.hvis det lykkes at erstatte http: //sig selv med, innerhtml, eller jquery, html, vil du stadig åbne hver begivenhed kontaktperson, der er knyttet til en af sine børn, som er en komplet aftale.det er det primære problem, dette stik af ser ud til at løse.den løsning, den bedste måde at håndtere situationen, og den måde, hvorpå stik af håndterer det på, er at arbejde med og ændre teksten knudepunkter udelukkende.,, tekst knudepunkter findes i dom som almindelig knudepunkter, bortset fra, at de ikke kan indeholde childnodes.den tekst, de har, kan opnås ved anvendelse af enten den, nodevalue eller data, ejendom, ved at arbejde med tekst knudepunkter, vi kan lave en masse af de vanskeligheder, der var forbundet med processen.vi skal først og fremmest skal loop gennem knudepunkter, undersøge, om det er en tekst, knudepunkt og hvis ja, fortsæt med at manipulere med det på en intelligent måde at undgå spørgsmål. vi skal gennemgå en kildekode af stik af sig selv, så du kan forstå, hvordan de stik af gennemfører dette begreb i detaljer.,, anvendelse, som de fleste velskrevet jquery plugins, det er meget nemt at bruge.der anvendes følgende syntaks:,, $(beholder). replacetext (tekst, udskiftning), for eksempel, hvis du har brug for at erstatte alle forekomster af ordet "val" med "værdi", for eksempel, du bliver nødt til at instantiate det stik af, som så: $("# beholder"). replacetext ("val", "værdi"), ja, det er så enkelt.stik af, de tager sig af alt for dig.hvis du er typen, der går rundt med regelmæssige udtryk, og det kan du også gøre.$("# beholder"). replacetext (/(val) /geografisk betegnelse "værdi"), du skal ikke bekymre dig om, at indholdet i et element er attributter, stik af, er ret smart.,, dekonstruere den kilde, da det stik af er kun 25 linjer kode, når frataget bemærkninger, og sådan vil vi gøre en hurtig gennemgang af kilden, hvori der redegøres for, hvilke snippet gør hvad og til hvilket formål.her er kilden til deres henvisning.vi vil gennemgå hver del i detaljer nedenfor. $. fn.replacetext = funktion (søgning, erstatte, text_only) {tilbage. hver (function() (var - node = this.firstchild, val, new_val, fjerne = []; hvis (node) (ved {(node.nodetype = = = 3) (val = node.nodevalue; new_val = val.replace (søgning, erstatte); hvis (new_val!= = val) (hvis (!text_only & & /< /. - test (new_val)) ($(node). (new_val); fjerne. tryk (node)} andre (node.nodevalue = new_val;}}}}, mens (node = node.nextsibling)} remove.length & & $(fjerne). remove().})}; lad os gøre et forholdsvis højt niveau løbe igennem af koden.$. fn.replacetext = funktion (søgning, erstatte, text_only) {};,, trin 1 -, den generiske papir til jquery stik af.forfatteren, med rette, har afholdt sig fra at tilføje overfladisk muligheder, eftersom de funktioner, der er enkle nok til at berettige en.parametre skal være sig selv. text_only, vil blive behandlet på et senere tidspunkt.returnere denne. hver (function() (}), trin 2 -, this.each, sikrer sig, at den stik af opfører sig, når stik af er bestået i en samling af elementer,., var node = this.firstchild, val, new_val, fjerne = [], trin 3 -, krævede erklæring af de variabler, der skal at bruge.,, node, ejer den knude er første barn element.,, val, ejer den knude er aktuelle værdi.,, new_val, ejer den ajourførte værdi af node., fjernes, er et system, som vil indeholde knude, der skal fjernes fra dom.jeg vil ikke gå i detaljer med dette om lidt, hvis (node) {}, trin 4 - vi kontrollere, hvorvidt knuden eksisterer, dvs. den beholder, som blev vedtaget i har barn elementer.husk, at node, har bestået element er første barn element., kan {}, mens (node = node.nextsibling), trin 5 -, loop i bund og grund - løkker gennem barn knudepunkter slutter når kurven på den endelige node.hvis (node.nodetype = = = 3) {}, trin 6 - her er det interessante.vi har adgang til, nodetype, ejendom [kun] af den knude, hvad slags knude, det er.en værdi af 3, indebærer, at en tekst node, så vi kan komme videre.hvis det gør livet lettere for dig, kan du skrive det sådan her: hvis (node.nodetype = = node.text_node) {}.val = node.nodevalue; new_val = val.replace (søgning, erstatte), trin 7 - vi opbevarer den nuværende værdi af teksten vedrørende, for det første.det næste, vi hurtigt træde i stedet for tilfælde af nøgleordet med udskiftning med de indfødte, erstatte, javascript metode.resultaterne er blevet opbevaret i den variabel, new_val,., hvis (new_val!= = val) {}, trin 8 - fortsætter, hvis værdi er ændret!hvis (!text_only & & /< /. - test (new_val)) ($(node). (new_val); fjerne. tryk (node)}, skridt 9a -, husker du, text_only parameter.det spiller ind her.det anvendes til at angive, om beholderen skal behandles som én, der indeholder element knudepunkter indenfor.koden er også en hurtig interne kontrol for at se, om det indeholder html indhold.det gør det ved at og leder efter en åbning mærke i indholdet af new_val,., hvis ja, en textnode indsættes før den nuværende knudepunkt, og den nuværende node, lægges til de fjerne, system behandles senere., andet (node.nodevalue = new_val;}, skridt, 9b - hvis det bare var tekst direkte injektion i den nye tekst til node uden at gå gennem dom med hoopla., remove.length & & $(tag). remove();,, trin 10 - endelig når loop er færdige med at køre, vi hurtigt kan fjerne den akkumulerede lymfeknuder fra dom.grunden til, at vi gør det efter loop løbe er at fjerne har en knude i løb vil ødelægge det selv.,, projekt, det lille projekt, vi kommer til at bygge i dag er helt grundlæggende.her er listen over vores krav:,, primære krav: at anvende en fremhæve virkning som tekst, som er udvundet af brugerinput.det skulle være ordnet helt ved stik af.,, sekundære krav: at fjerne fokus på fly, som det er nødvendigt.vi vil skabe en lille stump kode til at hjælpe med dette.ikke produktion, der er parat, men skal gøre godt for vores formål.note:,,,,,,, det er mere et bevis for begreb end noget, man bare kan anvende uberørt.selvfølgelig, for at forebygge denne artikel bliver unweildy, jeg har sprunget en række afsnit, der er af største betydning for produktion, der er parat - kode - validering, f.eks. den faktiske fokus bør være på stik af sig selv og udvikling af teknikker, den indeholder.husk, det er mere en beta - demo - at fremvise noget sejt, det kan gøres med dette stik af.altid steriliseret og validere deres input.,,, instituttet: html og css, <!doctype html > < http: //lang = "en gb" > < head > < afsnit > nedbrydning: jquery replacetext < /afsnit > < forbindelse rel = "stylesheet" href = "stil. css" /> < /head > < krop > < div id = "containere" > < h1 > nedbrydning: jquery replacetext < /h1 > < div > ved siddharth for den dejlige folk på nettuts + <. /div > < p > denne side, anvender den populære replacetext stik af med ben alman.på dette område, vi bruger det til at fremhæve vilkårlige dele af teksten på denne side.udfyld de ord, du leder efter, og slå.</p> \t\t \t\t<form id="search"><input id="keyword" type="text" /><a id="apply-highlight" href="#">Apply highlight</a><a id="remove-highlight" href="#">Remove highlight</a></form> \t\t<p id="haiz"> <-- Assorted text here --></div> \t<script src="js/jquery.js"></script> \t<script src="js/tapas.js"></script> \t</body> </html>,The HTML should be pretty explanatory. alt, hvad jeg har gjort, er at skabe en tekst, input, to forbindelser til anvendelse og fjerne fremhæve samt et afsnit, der indeholder nogle forskellige tekst. organ {skrifttype familie: "myriad pro", "lucida grande", "verdana", uden serif; skriftstørrelsen: 16px;} p {margen: 20px 0 40px 0} h1 (skriftstørrelse: 36px; polstring: 0; margen: 7px 0} h2 (skriftstørrelse: 24px;}&#container (bredde: 900px; margen: auto; margen: auto; polstring: 50px 0 0 0. position: relativ;}&#haiz (polstring: 20px; baggrund:&#efefef; - moz grænse radius: 15px; - webkit grænse radius: 15px; grænse: 1px fast&#c9c9c9;}&#søgning (bredde: 600px; margen: 40px auto; tekst tilpasse: center;}&#nøgleord (bredde: 150px. højde: 30.px; polstring: 0 10px; grænse: 1px fast&#c9c9c9; - moz grænse radius: 5px; - webkit grænse radius: 5px; baggrund:&#f0f0f0; skriftstørrelsen: 18px;}&#anvendelse, fremhæve,&#fjerne fremhæve (polstring til venstre: 40px;} (farve: gul baggrund. fremhæve;}, igen. ret selvforklarende og helt grundlæggende.den eneste ting at bemærke er den klasse, som hedder, at fremhæve, at jeg er at definere.dette vil blive anvendt til den tekst, som vi skal fremhæve. på dette tidspunkt, din side skal se sådan her:,, interaktion: javascript, for i dag er hurtigt at koble vores forbindelse med deres stab, så teksten bliver fremhævet, og unhighlighted på passende vis., var searchinput = $("# kodeord"), searchterm, searchregex. $("# anvendelse fremhæve"). klik (fremhæve); $("# fjerne fremhæve"). bind ("klik", function() {$("# haiz"). removehighlight().}), skal være rimeligt simpelt.jeg erklærer et par variabler til senere anvendelse og knytte forbindelser til deres hjælpere.fokus, og removehighlight, er meget enkle funktioner vil vi se nedenfor., funktion highlight() {searchterm = searchinput. val(); searchregex = nye regexp (searchterm, »g«) $("# haiz *"). replacetext (searchregex, < over klasse = "fremhæve" > + searchterm + < /span > ');}, har jeg valgt at skabe en vanilje funktion, og ikke en jquery stik af, fordi jeg er doven, som en bunke sten.vi starter med at fange de input, rubrik værdi. næste, skaber vi en regelmæssig udtryk objekt ved hjælp af søgningen nøgleord.endelig vil vi påberåbe sig, replacetext, stik af, ved at de relevante værdier.jeg vælger at indgå direkte, searchterm i tillægget for kortfattethed.,, jquery.fn.removehighlight = function() {tilbage. finde ("span. fremhæve"). (function() {med (. parentnode) (replacechild (this.firstchild, denne)}})}, et hurtigt og beskidt, hacky - metoden for at få jobbet gjort.og ja, det er en jquery stik af, da jeg ville ændre mig selv.klassen er stadig hardcoded.jeg er blot efter hver kalibrering tagfat med en klasse, fremhæve og erstatter hele knudepunkt, med den værdi, den indeholder, før du får dine høtyve klar, huske på, at dette bare er en demonstration.for din egen anvendelse, du får brug for en langt mere sofistikeret unhighlight metode.,, indpakning, og vi er færdige.vi tog et kig på en utrolig nyttigt, stik af, gik gennem kildekoden, og endelig færdig ved at skabe en mini - projektet med det.,