SELECCIONAR PALABRA Y RESALTARLA
Para resaltar una palabra en toda una div usamos la funcion resaltar()
La función requiere dos parámetros, la cadena a resaltar y la clase para resaltar. y se aplica al selector correspondiente al contenedor a revisar
El resto solo se refiere a aplicar On click de buscar la función y previamente guardar en la variable var = copia una copia del html para limpiar la búsqueda.
La función requiere dos parámetros, la cadena a resaltar y la clase para resaltar. y se aplica al selector correspondiente al contenedor a revisar
El resto solo se refiere a aplicar On click de buscar la función y previamente guardar en la variable var = copia una copia del html para limpiar la búsqueda.
<head>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script>
jQuery.fn.extend({
resaltar: function(busqueda, clase){
var regex = new RegExp("(<[^>]*>)|("+ busqueda.replace(/([-.*+?^${}()|[\]\/\\])/g,"\\$1") +')', 'ig');
var nuevoHtml=this.html(this.html().replace(regex, function(a, b, c){
return (a.charAt(0) == "<") ? a : "<span class=\""+ clase +"\">" + c + "</span>";
}));
return nuevoHtml;
}
});
$(document).ready(function(){
var copia = $("#texto1").html(); //para hacer el clear
$("#accion").click(function(evento){
$("#texto1").resaltar($("#busca").val(),"encontrado");
});
$("#cancelar").click(function(evento){
$("#texto1").html(copia);
});
});
</script>
<style>
.encontrado{
background-color:#FFCC99;
}
</style>
</head>
<body>
<div style=" text-align:center; margin-bottom:20px;">
<input type="text" id="busca" style="margin-right:10px;"></input>
<input type="button" id="accion" value="BUSCAR" style="margin-right:10px;"/>
<input type="button" id="cancelar" value="CANCELAR"/>
</div>
<div id="texto1" style="margin-top:10px; padding:10px; text-align:left;">
La sequía había durado ya diez millones de años, y el reinado de los terribles saurios
tiempo ha que había terminado. Aquí en el ecuador, en el continente que había de ser....
</div>
</body>