En este código realizaremos un Buscador de Texto en JavaScript. El programa encontrará cierto texto en un párrafo. El truco de este código es utilizar la notación de punto replace () para aplicar un color resaltado. Para obtener más información sobre esto, solo siga los pasos a continuación.

Empezando:
Primero debe descargar el marco de arranque, este es el enlace para el arranque que utilicé para el diseño del diseño https://getbootstrap.com/.

La interfaz principal
Este código contiene la interfaz de la aplicación. Para crear esto, simplemente escriba este bloque de código dentro del editor de texto y guárdelo como index.html.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
        <style>
            .highlight{
                background:orange;
                font-weight:bold;
            }
        </style>
    </head>
<body>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://compubinario.com">CompuBinario</a>
        </div>
    </nav>
    <div class="col-md-3"></div>
    <div class="col-md-6 well">
        <h3 class="text-primary">Buscador de Texto en JavaScript</h3>
        <hr style="border-top:1px dotted #ccc;"/>
        <div class="col-md-4">
            <div class="form-group">
                <label>Buscar aqui..</label>
                <input type="text" id="keyword" class="form-control"/>
            </div>	
        </div>
        <div class="col-md-8">
            <p>La programación es divertida y fácil de aprender siempre que adopte un enfoque adecuado. Estos tutoriales intentan cubrir los conceptos básicos, intermedios y avanzados de la programación utilizando un enfoque simple y práctico para el beneficio de los interesados… ¡ Todos los tutoriales vienen con código fuente</p>
        </div>
    </div>
<script src="js/jquery-3.2.1.min.js"></script>	
<script src="js/script.js"></script>
</body>	
</html>

Creando el Script
Este código contiene el script de la aplicación. El código buscará y resaltará dinámicamente un texto. Para hacer esto, simplemente copie y escriba este bloque de códigos dentro del editor de texto, luego guárdelo como script.js dentro de la carpeta js.

function textFind(keyword){

    if(keyword){
        var content = $('p').text();
        var searchText = new RegExp(keyword, "ig");
        var matches = content.match(searchText);
        
        if(matches){
            $("p").html(content.replace(searchText, function(match){
                return "<span class='highlight'>"+match+"</span>";
            }));
        }else{
            $('.highlight').removeClass('highlight');
        }
    }else{
        $('.highlight').removeClass('highlight');
    }
}

$(document).ready(function(){
    $('#keyword').on('keyup', function(){
        textFind($(this).val());
    });
});

Ahí lo tienes, creamos con éxito como un Buscador de Texto en JavaScript. Espero que este sencillo tutorial te ayude a lo que estás buscando.

Antes de la descarga del Tutorial presiona el siguiente enlace para que te suscribas a nuestro Canal de YouTube: