Cerca parola

Cosina · 15 Gen 2021

Buongiorno a tutti, ho trovato questo codice che permette di cercare e colorare una parola (o più uguali) nel testo contenuto in un div specifico. Vorrei che le parole non si colorassero digitandole, ma solo dopo aver cliccato su un pulsante come in questa immagine:

Non so modificare il codice per ottenere questo risultato. Potete aiutarmi per piacere? Grazie mille.

p.s. scusate, aggiungo: se possibile, vorrei anche che la pagina scrollasse fino alla prima parola trovata, al momento del click, se questa si trova al di sotto della zona visibile.

Ecco il codice che ho trovato:

Codice:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>modal_search</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style>
            .highlight{color:red}
        </style>
      
    </head>
    <body>

        <input class=modal_search id=x>

        <div id=textModal_x>
            <p>
                I am trying to <b>Search</b> a &lt;text&gt; and <i>highlight</i> it & inside an HTML element.
            </p>
            <p>
                But it is not working properly. Just first character of searched text is highlighted.
            </p>
        </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script>
        $(function() {
            $(".modal_search").each(function() {
                var textModal = $('#textModal_' + this.id),
                    html = textModal.html();
                $(this).on("keyup", function() {
                    var reg = new RegExp($(this).val() || "&fakeEntity;", 'gi');
                    textModal.html(html.replace(reg, function(str, index) {
                        var t = html.slice(0, index+1),
                            lastLt = t.lastIndexOf("<"),
                            lastGt = t.lastIndexOf(">"),
                            lastAmp = t.lastIndexOf("&"),
                            lastSemi = t.lastIndexOf(";");
                        //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
                        if(lastLt > lastGt) return str; // inside a tag
                        if(lastAmp > lastSemi) return str; // inside an entity
                        return "<span class='highlight'>" + str + "</span>";
                    }));
                });
            })

        })
        </script>
      
    </body>
    </html>

Tommy03 · 15 Gen 2021

Beh per trovare la parola al click e non mentre digiti credo che basti sostituire questo:

HTML:

$(this).on("keyup", function() {

con questo:

HTML:

$(".bottone_submit").cllick(function() {

(dove bottone_submit è la classe del bottone che devi schiacciare)

Per quanto riguarda lo scroll fino al punto specifico non saprei... prova a dare un'occhiata alla funzione .scrollTo()

Cosina · 15 Gen 2021

Grazie, ho provato, ma non funziona. Probabilmente sbaglio io qualcosa. Potresti farmi vedere anche come configurare il bottone nello specifico?

Tommy03 · 15 Gen 2021

Nell'immagine che avevi mandato c'era un bottone search, dov'è nel codice html? Comunque, il bottone lo puoi mettere anche come div, tipo cosi:

HTML:

<input class=modal_search id=x>
<div class='cerca'>search</div>

e poi nel codice jQuery, al posto di:

HTML:

$(this).on("keyup", function() {

metti:

HTML:

$(".cerca").click(function() {

Cosina · 15 Gen 2021

Il bottone era un'immagine proprio perchè non sapevo implementarlo. Grazie, comunque. Ho provato a fare esattamente come mi hai detto, ma non funziona. Resto in attesa di altri consigli, anche per lo scroll. Gentilissimo, ti auguro buona serata. Ciao

Tommy03 · 15 Gen 2021

Mm.. Ho provato a modificare così e funziona (si evidenzia quando clicchi sul bottone):

HTML:

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>modal_search</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <style>

            .highlight{color:red}
        </style>
     
    </head>
    <body>

        <input class=modal_search id=x><button class=search>search</button>

        <div id=textModal_x>
            <p>
                I am trying to <b>Search</b> a &lt;text&gt; and <i>highlight</i> it & inside an HTML element.
            </p>
            <p>
                But it is not working properly. Just first character of searched text is highlighted.
            </p>
        </div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script>
        $(function() {
$(".modal_search").each(function() {
                var textModal = $('#textModal_' + this.id),
                    html = textModal.html();
                $(".search").click(function() {
                    var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
                    textModal.html(html.replace(reg, function(str, index) {
                        var t = html.slice(0, index+1),
                            lastLt = t.lastIndexOf("<"),
                            lastGt = t.lastIndexOf(">"),
                            lastAmp = t.lastIndexOf("&"),
                            lastSemi = t.lastIndexOf(";");
                        //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
                        if(lastLt > lastGt) return str; // inside a tag
                        if(lastAmp > lastSemi) return str; // inside an entity
                        return "<span class='highlight'>" + str + "</span>";
                    }));
                });
})
        })
        </script>
     
    </body>
    </html>

Per lo scroll però proprio non saprei... prova a leggere qui se ti è utile

Cosina · 15 Gen 2021

Grazie mille Tommy03, funziona perfettamente. La prima parte è risolta, vediamo se qualcuno mi risolve la seconda. Ciao

WmbertSea · 15 Gen 2021

Cosina ha scritto:
vediamo se qualcuno mi risolve la seconda

Ciao, si può fare in vari modi. Una soluzione può essere l'uso della funzione nativa scrollIntoView().

Prova in questo modo, aggiungendo la parte di script nella riga dopo il return, dopo le 3 parentesi chiuse:

JavaScript:

    return "<span class='highlight'>" + str + "</span>";
})).find(".highlight").get(0).scrollIntoView({behavior: "smooth"});

Fai sapere.

Cosina · 16 Gen 2021

WmbertSea ha scritto:
Ciao, si può fare in vari modi. Una soluzione può essere l'uso della funzione nativa scrollIntoView().

Prova in questo modo, aggiungendo la parte di script nella riga dopo il return, dopo le 3 parentesi chiuse:

JavaScript:

return "<span class='highlight'>" + str + "</span>"; })).find(".highlight").get(0).scrollIntoView({behavior: "smooth"});

Fai sapere.

Perfetto, funziona! Grazie mille WmbertSea, grazie a tutti. Buon weekend. Ciao

WmbertSea · 16 Gen 2021

Bene

buon proseguimento e buon weekend anche a te

Cosina · 16 Gen 2021

Ehm....approfitto ancora (chiedo perdono) per un'ultima domanda: sarebbe possibile far uscire un avviso quando una voce della ricerca non viene trovata? Un semplice "not found". Senza fretta, se e quando hai (avete) tempo. Mille, mille, mille grazie. Ciao

WmbertSea · 16 Gen 2021

Prova così, sostituendo la relativa parte di script con questo :

JavaScript:

$(".modal_search").each(function() {
    var textModal = $('#textModal_' + this.id),
        html = textModal.html();
    $(".search").click(function() {
        var reg = new RegExp($(".modal_search").val() || "&fakeEntity;", 'gi');
        var $matches = textModal.html(html.replace(reg, function(str, index) {
            var t = html.slice(0, index+1),
                lastLt = t.lastIndexOf("<"),
                lastGt = t.lastIndexOf(">"),
                lastAmp = t.lastIndexOf("&"),
                lastSemi = t.lastIndexOf(";");
            //console.log(index, t, lastLt, lastGt, lastAmp, lastSemi);
            if(lastLt > lastGt) return str; // inside a tag
            if(lastAmp > lastSemi) return str; // inside an entity
            return "<span class='highlight'>" + str + "</span>";
        })).find("span.highlight");
       
        if ($matches.length) $matches.get(0).scrollIntoView({behavior: "smooth"});
        else alert("not found");
    });
})

In sostanza ho definito una variabile ($matches) che restituisce un oggetto jQuery contenente gli eventuali span con classe highlight, cioè le effettive occorrenze trovate. La condizione alla fine dello script ($matches.length) verifica se sono state trovate delle occorrenze, quindi effettua lo scroll, altrimenti visualizza l'alert col messaggio.

Chiaramente l'alert si potrebbe sostituire con un testo che appaia direttamente sulla pagina, ad esempio inserendolo dentro un apposito span o come pare meglio a te.

Fai sapere.

Cosina · 16 Gen 2021

WmbertSea ha scritto:
.....
Fai sapere.

Funziona tutto come deve (non avevo dubbi). Ti ringrazio tantissimo, anche per la spiegazione dettagliata e utile per imparare. Buona serata, ciao

WmbertSea · 16 Gen 2021

Bene

alla prossima, buon proseguimento

Cerca

Cerca

Cerca parola

Cosina

Utente Attivo

Tommy03

Utente Attivo

Cosina

Utente Attivo

Tommy03

Utente Attivo

Cosina

Utente Attivo

Tommy03

Utente Attivo

Cosina

Utente Attivo

WmbertSea

Moderatore

Cosina

Utente Attivo

WmbertSea

Moderatore

Cosina

Utente Attivo

WmbertSea

Moderatore

Cosina

Utente Attivo

WmbertSea

Moderatore

Discussioni simili