buscador que resalta texto

jmg1189 · #1 (**permalink**) 19/08/2016, 11:03

Buenos días a todos

quisiera un poco de ayuda con éste tema. quiero crear un buscador como el que se genera en el navegador al oprimir ctrl + F, es decir que mientras yo dígito, éste me busque el texto en un div determinado y le modifique el css.

Tengo lo siguiente:

Código Javascript:

Ver original$(document).ready(function(){
        $("#producto").keyup(function(){
                 var producto = $("#producto").val();
                 $("div:contains('"+producto+"')").css({"font-weight": 'bold', "color": 'red', "text-decoration": "underline" });
             });
});

Pero al hacer ésto, me resalta todo el texto en todos los divs que tengo, y no puedo hacer el contains en un div especifico, por devir hacer:

Código Javascript:

Ver original$("#div_contenedor:contains('"+producto+"')")css();

y de igual forma que me resalte solo el texto que digité, no que me resalte todo el texto. Podrían por favor ayudarme o indicarme como puedo investigar para implementarlo?

IsaBelM · #2 (**permalink**) 23/08/2016, 06:35

uno ya antiguo

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var cadena = '';
var largo_cadena = 0;

window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};

function Resaltar(cadABuskar) {
var caracteresInput = cadABuskar.length;
var rgEx = new RegExp(cadABuskar, 'g\i');

if (cadena.substr(0,parseInt(largo_cadena)).match(rgE x)) {
var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rg Ex, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
document.getElementById('texto').innerHTML = marca;
} else {
document.getElementById('texto').innerHTML = cadena;
}
}
</script>
</head>
<body>
<div id="texto">Esto es una prueba para resaltar caracteres o palabras de este texto prueba</div>
<form method="" action="" name="">
<input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
</form>
</body>
</html>