Buonasera 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:

search.png



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>