Javascript keresés
2018-12-12T14:48:35+01:00
2018-12-18T06:08:22+01:00
2022-08-11T08:55:30+02:00
progUser
Sziasztok,olyan kérdésem lenne,hogyan tudnék javascriptel megkeresni egy stringet?
Ha megtaláltam ezt a stringet szeretném kijelölni,például border vagy color.
a html felépítés ez:

<div class="valami"> <div class="valami2"> <input type="radio">blablabla <label>Szöveg</label> <label>Szövegablak</label> <label>2</label> <label>2.5</label> </div> </div>
úgy kéne a keresést megoldani,hogy csak a string értékét ismerem,és nem hivatkozhatok semmire,tehát csak annyi van meg,hogy Szöveg,nah most szépen végig megyek esetleg a diveken,vagy labeleken,viszont olyan hibába ütközöm ha keresés közben egy string hasonló a másikhoz például (asd,asder) és én azt asdot keresem akkor az asdert is befogja karikázni,tehát úgy szeretnék keresni,hogy CSAK a szöveget,hiába van benne másik labelben HASONLÓ szöveg vagy akár csak 1 karakter tévedés is van a kettő között én csak azt az 1 stringet szeretném kijelölni amin az értéke adott,jquery,javascript bármi lehet
eddig így csináltam:
$('label:contains("A keresett szó"').each(function()....
például a kettest szeretném megkeresni,be írom ide a kettest:
$('label:contains("2"'
).each(function(){...
megtalálja szuper minden...viszont ha ki íratom a $(this).text()-et szerepel benne a 2.5 is,és csak azt szeretném ha a keresett szöveg lenne kijelölve(csak a kettes)

Köszönöm

Mutasd a teljes hozzászólást!
Esetleg a következő "látványt" szeretnéd (csatolva)...

function test(asd){ var labels = document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++) { var inner = labels[i].innerHTML; inner = inner.replace(/<\/?span[^>]*>/g,""); var index = inner.indexOf(asd); var aktual_keresett = inner.substring(index,index+inner.length); var keresett_elott = inner.substring(index-1,index); if(index >= 0 && aktual_keresett.length == asd.length && keresett_elott == ' ' ) { inner = inner.substring(0,index) + '<span class="highlight">' + inner.substring(index,index+asd.length) + '</span>' + inner.substring(index + asd.length); labels[i].innerHTML = inner; } } }
Mutasd a teljes hozzászólást!

  • megtalálja szuper minden...viszont ha ki íratom a $(this).text()-et szerepel benne a 2.5 is,és csak azt szeretném ha a keresett szöveg lenne kijelölve(csak a kettes)

    Egyszerű string replace-nek tűnik számomra: '2'  ->  '<span class="highlighted">2</span>'
    A highlighted css class-t pedig írd meg, ahogy tetszik (border/background... stb.)!
    Mutasd a teljes hozzászólást!
  • Pont le is írta, hogy mi ezzel a probléma. Ha az 'asd'-t akarod hájlájtolni, akkor nem lesz jó:

    'asd' -> '<span class="highlighted">asd</span>'

    'asder' -> '<span class="highlighted">asd</span>er'
    Mutasd a teljes hozzászólást!
  • Lehet, hogy tudsz ötletet meríteni innen...
    Megj: Ha félreértettem a célod ->
    Mutasd a teljes hozzászólást!
  • szia,
    próbáld meg ezzel kiindulásnak javascriptben:

    match()

    azt eláruom még hogy a patternben a ^ a szöveg kezdete, $ pediga szöveg vége.
    Ez azért lesz fontos neked mert nem rész sztringet akarsz.

    További segítség:
    lekéred az összes labelt, végig iterálsz rajta és megvizsgálod, hogy a matchel (null-al tér vissza ha nincs találat) találtál e valamit, ha igen akkor kiemeled.
    Mutasd a teljes hozzászólást!
  • Én úgy értelmeztem a témanyitó hsz-t, hogy ha az "asd"-re megtalálja az "asder"-t, akkor ne az egész szót ($(this).text()-ként hivatkozik rá), hanem csak azt a részt jelölje ki, amire keresett... tehát ez esetben csak az "asd" substringet.
    Ha így van, akkor a példádban írt <span class="highlighted">asd</span>er pont jó eredmény lenne nem ?
    Vagy benézek valamit továbbra is?
    ------
    Szerk: az én példámban ez a substring a "2" volt, mert ő pont a "2.5"-tel jött, amiben ugye csak a "2"-est kellene kiemelni, ha a "2"-re keres.
    Mutasd a teljes hozzászólást!
  • Van egy erősen misztikus lehetőség, Introduction to using XPath in JavaScript ami többek közt pontos szövegre is tud keresni - már ha egyáltalán az volt a cél:

    <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script> function test(event){ var labels=document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++) labels[i].style="background: white"; labels=document.evaluate("//label[text()=""+event.target.value+""]",document,null,XPathResult.ANY_TYPE,null); var label; while(label=labels.iterateNext()) label.style="background: yellow"; } </script> </head> <body> <div>TODO write content</div> <label>Szöveg</label> <label>Szövegablak</label> <label>2</label> <label>2.5</label> <input type="text" oninput="test(event)"> </body> </html>
    Ez csak akkor fogja kiemelni az adott labelt, ha pontosan a szövegét gépeled be. Azért gyanítom, hogy nem ez a cél (legalábbis számomra a keresés kifejezetten nem ezt jelenti), de a leírásodat így is lehet értelmezni.
    Mutasd a teljes hozzászólást!
  • Ha így van, akkor a példádban írt ... pont jó eredmény lenne nem ?

    Ha így van. Szerintem nincs így, mert ilyenkor ('asd'-ra keresve 'asder'-ben) nem akarja megtalálni a részsztringet és nem akar színezni semmit. Majd jön a topiknyitó és megpróbálja magyarul is leírni, hogy mit szeretne.
    Mutasd a teljes hozzászólást!
  • adott egy kérdéssor,tudom előre hogy melyik válasz a helyes fogom elküldöm az összes kérdést phpnak php kikeresi adatbázisból a kérdéshez tartozó választ,vissza adja(tömb),és azt szeretném hogy a visszakapott helyes válaszokat pirossal ki emelem

    viszont mint a képen is látszik nem tudok úgy rá keresni,hogy ha van másik stringel hasonlóság ne jelölje be azt,csak is azt az egy választ jelölje be amit visszakap
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Sziasztok,olyan kérdésem lenne,hogyan tudnék javascriptel megkeresni egy stringet?
    Ha megtaláltam ezt a stringet szeretném kijelölni,például border vagy color.

    Kiegészítésként egy kb 4 éves "szinezős-léptetős" példa...
    Megj: Léptetés pl. jobbra-balra nyíl...
    Mutasd a teljes hozzászólást!
  • itt van ez is,a helyes érték a 2 viszont a 2.5 is bejelöli
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • És ha kipróbálnád a "2018.12.12. 18:39"-i linkem kódjával a 2 és 2.5 számokra is?
    Megj: Miért baj az, ha nem csak egy található a keresett stringből? Miért baj az ha a találatok között lépkedni lehet? stb...stb...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Mert a kérdésre a válasz egy lehet a helyes megoldás a 2 és csak azt kéne bekarikaznia
    Mutasd a teljes hozzászólást!
  • csak a string értékét ismerem,és nem hivatkozhatok semmire

    Bár ez nem válasz a kérdésedre, de a sorrend szerinti index-re is hivatkozhatsz: elküldöd az egy kérdéshez tartozó labelek szövegét mint tömb:

    [ 'Foo bar', 'Foo', 'Foo baz', 'Foobarbaz' ]
    majd válaszban visszaküldöd a helyes válasz tömb indexét (pl. 1 vagyis a Foo a jó válasz) majd $("label").eq(index)-el már meg is tudtad jelölni a helyes megoldást szöveg keresés nélkül.

    Persze több kérdés esetén előbb egy külső ciklusban kérdésenként kell végigmenni majd a kérdéseken belül kell a megfelelő indexű válasz labelt keresni.
    Mutasd a teljes hozzászólást!
  • Akkor a következőt szeretnéd ->
    Csak az első 2 legyen bekarikázva, de az "a2b" és "2.b" az nem és a második "2" sem?
    Mutasd a teljes hozzászólást!
  • Bocsi a code lemaradt...

    <h2>Javascript keresés (progUser)</h2> <button onclick="highlight('2')">Search And Highlight</button> <div id="inputText">Csak az első 2 legyen bekarikázva, de az a2b és 2.b az nem és a második 2 sem?</div> <script> function highlight(text) { var inputText = document.getElementById("inputText"); var innerHTML = inputText.innerHTML; var index = innerHTML.indexOf(text); if (index >= 0) { innerHTML = innerHTML.substring(0,index) + "<span class='highlight'>" + innerHTML.substring(index,index+text.length) + "</span>" + innerHTML.substring(index + text.length); inputText.innerHTML = innerHTML; } } </script> <style> .highlight { border:1px solid red; } </style>
    Mutasd a teljes hozzászólást!
  • A bővített leírásod alapján lehet, hogy a kódom tényleg azt csinálja, amit szeretnél. (https://prog.hu/tarsalgo/204750/javascript-kereses?no=7#e7 )
    Vagy volt vele valami gond?
    Mutasd a teljes hozzászólást!
  • Ha php oldalon tudod, hogy mit kellene kiszínezni, akkor miért nem abból az irányából oldod meg? Felesleges kliens oldalon szövegesen keresgélni, ha a php azt is vissza tudja adni, hogy mi a helyes válasz azonosítója. (ami remélhetőleg valamilyen módon kliens oldalon is szerepel, mondjuk az adott radiobutton id-ja). Ez pedig oldalon belül már egyedi kell  hogy legyen.
    Mutasd a teljes hozzászólást!
  • Sajnos az oldal mindig változtatja a idket :( ez egy teszt kérdés sor,lefuttatom a scriptet consolba végig megy az összes kérdésem a javascript beteszi egy tombbe ajaxal meghívom a phpt a csinálok egy lekerdezest és ahol van találat a kérdésre ott vissza adom a választ console.logban tökéletesen vissza is adja maaar csak be kene szinezni vagy valahogy kijelolni az oldalon

    Így hívom meg:

    var q = []; for(var i = 0; i<25;i++){ q
    =document.getElementsByClassName("qtext")
    .textContent
    } var script = document.createElement("script");script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js";document.getElementsByTagName("head")[0].appendChild(script); $.ajax({ url: "http://valami.hu/index.php", type: "POST", data: {question: q}, success: function(response) { console.log(response); }, error: function(responseError) { alert(responseError); } });
    Mutasd a teljes hozzászólást!
  • dsdsadsdsasdadsdsadsadas
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Ha már "dsdsadsdsasdadsdsadsadas" akkor -> Keresd az asd-t...
    Csak viccelődök...
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • Ha csak a <label>-ek számítanak ->
    Mutasd a teljes hozzászólást!
  • Nagyon szépen köszönöm,hogy fáradt ezzel is,és méég egy saját keresőt is írtál
    Mutasd a teljes hozzászólást!
  • Köszönöm szépen,hogy ennyit fáradtál ezzel,megy meg minden faszaa :D

    csak egy kérdés még

    var labels=document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++) labels
    .style="background: white"; labels=document.evaluate( "//label[text()="a. monoton."]", document,null,XPathResult.ANY_TYPE,null); var label; while(label=labels.iterateNext()) label.style="background: yellow";
    ugye ott a a szöveg "a. monoton nah most mivel változhat a kérdéseknél az előtte álló betű tehát A B C D E etc." ezért az első 3 karaktert azt nem kéne,hogy figyelje,mivel:
    1. valamilyen betű [a b c]
    2. egy pont 3. egy space és utána jön a tényleges válasz amik között keresni akarok :D


    tehát előtte kéne egy -3 substring





    Mutasd a teljes hozzászólást!
  • Mivel számomra nem világos, ezért előbb áruld el, hogy a

    labels=document.evaluate("//label[text()=\""+event.target.value+"\"]",document,null,XPathResult.ANY_TYPE,null);
    helyett miért ez

    labels=document.evaluate("//label[text()="a. monoton."]",document,null,XPathResult.ANY_TYPE,null);
    van a kódodban és mi az a "a. monoton."?
    Mutasd a teljes hozzászólást!
  • Oda kerül be a válasz amit keresek (amit vissza ad php)megnéztem consolba hogy működik e (egy randkm válasszal)és megy de csak úgy színezi be azt a szót ha oda írom elé a betűjelet (a. )ezért kéne egy substring hogy az első 3 karaktert ne figyelje
    Mutasd a teljes hozzászólást!
  • Mivel kissé még mindig zavaros:
    1. Vannak labelek az oldalon eltérő szövegekkel (Szöveg, Szövegablak, stb)...
    2. A szerverről kapsz egy keresendő kifejezést, mely pl. -> a. Szöveg vagy b. Szöveg vagy stb...
    3. Te viszont ha a kapott keresendő kifejezés az a. Szöveg, akkor Te a Szöveg tartalmú labelt akarod színezni...
    Ha az eddigi leírásodban ezt így érted, akkor:
    a. A kapott keresendő kifejezés előtt mindig 3 "felesleges" karakter van?
    b. Ha mindig, akkor ->

    var keres = "<?php echo $keres; ?>"; keres = keres.substring(3); // !! vagy tüntesd el még szerver oldalon !! //majd a megfelelő helyen labels=document.evaluate( // "//label[text()=""+event.target.value+""]", "//label[text()=""+keres+""]", document,null,XPathResult.ANY_TYPE,null);
    c. Végü is érthetően pontosítsd a célod, mutasd a konkrét megoldásod - ne csak kódtöredéket közölj - azaz pl egy linken mutasd is meg kipróbálási lehetőségként...
    Mutasd a teljes hozzászólást!
  • Mutasd a teljes hozzászólást!
  • Akkor még egyszer a "2018.12.14. 08:00"-i javaslatom kicsit hozzáigazítva a fiddle-s tesztedhez...

    <div class="r1"><input type="radio" name="q162775:11_answer" value="1" id="q162775:11_answer1" /><label for="q162775:11_answer1">b. 2</label> </div> <div class="r0"><input type="radio" name="q162775:11_answer" value="2" id="q162775:11_answer2" /><label for="q162775:11_answer2">c. 3</label> </div> <div class="r1"><input type="radio" name="q162775:11_answer" value="3" id="q162775:11_answer3" /><label for="q162775:11_answer3">d. 4</label> </div> <div class="r0"><input type="radio" name="q162775:11_answer" value="4" id="q162775:11_answer4" /><label for="q162775:11_answer4">e. 5</label> </div> <script> function test(asd){ var labels = document.getElementsByTagName("label"); for(var i=0;i<labels.length;i++) { var inner = labels[i].innerHTML; //innerHTML = innerHTML.replace(/<\/?span[^>]*>/g,""); var index = inner.indexOf(asd); if (index >= 0) { inner = inner.substring(0,index) + '<span class="highlight">' + inner.substring(index,index+asd.length) + '</span>' + inner.substring(index + asd.length); labels[i].innerHTML = inner; } } } test("4"); </script> <style> .highlight { border:3px solid red; } </style>
    Mutasd a teljes hozzászólást!
abcd