buscar texto en una pagina web

Mtf006 · #1 (**permalink**) 16/07/2010, 12:27

hola a todos..el asunto es este, mi cliente quiere un buscador de texto en su web...
quiere ( no se donde lo vio ) que en una caja de texto se ponga una palabra y se destaque esa palabra en la pagina si coincide la respuesta..
la cosa es q busque un kilo y encontre este codigo:

----------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sin título</title>
</head>

<SCRIPT language=JavaScript>
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window;
var n = 0;
function findInPage(str) {
var txt, i, found;
if (str == "")
return false;
if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;
if (n == 0)
alert("Not found.");
}
if (IE4) {
txt = win.document.body.createTextRange();
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
else {
if (n > 0) {
n = 0;
findInPage(str);
}
else
alert("Su busqueda no produjo, ningun resultado. Intente con otro");
}
}
return false;
}
</SCRIPT>

<FORM name=search onsubmit="return findInPage(this.string.value);">
<P align=center><FONT size=3>
<INPUT
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #666666 1px solid; BORDER-BOTTOM: #666666 1px solid"
onchange="n = 0;" size=16 name=string></FONT><BR><INPUT style="BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; FONT-SIZE: 8pt; BORDER-LEFT: #ffffff 1px solid; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #aaaaaa" type=submit value=Search in page ><center><font size=2pt;><font family=Times New Roman;><b>

<BR>
</P></FORM></DIV><BR>
<body>
</body>
</html>

-----------------------------------------------------------------------------------------------------------------------------------------------------------------
PD: Como modifico el codigo para que sea leido en (Iexplorer -Firefox-Safari) o al menos en los exploradores mas usados?

el asunto es q no puedo encadenar el div con las palabras a buscar...
ejemplo la pagina contiene las siguientes palabras...
IVA
DESCUENTO
ENVIO
y esas palabras deberian resaltarse en color , o este codigo esta incorrecto?

alguna idea por aqui?!?!
gracias de antemano!

Adler · #2 (**permalink**) 16/07/2010, 12:48

Hola, bienvenido

Supongo que te refieres a algo como el Contrl + F de FF

Código Javascript:

Ver original<!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 vuelta = 0;
var cadena = ""
var len = 0;
function Resaltar(c,ev) {
var largo_cadena = len;
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
    
    if (keyCode == 8) vuelta--;
        if (vuelta < 1) {
                //cadena += document.getElementById("texto").firstChild.nodeValue;
        cadena += document.getElementById("texto").innerHTML;
     }
 
var largo2_cadena = cadena.length
 
    if (largo2_cadena >= largo_cadena) {len = largo_cadena;}
    if (largo_cadena == 0) {len = largo2_cadena;}
 
var rg = new RegExp(c,"g");
 
        if (rg.exec(cadena.substr(0,parseInt(len))) != null) {
            var marca = cadena.substr(0,parseInt(len)).replace(rg, "<span style=\"background-color:#9ACD32;color:#FFFFFF;\">" + c + "</span>"); 
                document.getElementById("texto").innerHTML = marca;
        document.getElementById("terminos").style.border = "solid #9ACD32 1px";
        } else {
        document.getElementById("texto").innerHTML = cadena;
        document.getElementById("terminos").style.border = "solid #FF0000 1px";
}
vuelta++;
}
</script>
</head>
<body>
<div id="texto">Esto es una prueba para resaltar caracteres o palabras de este texto prueba</div>
<form method="" action="" name="" autocomplete="off">
<input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
</form>
</body>
</html>

Suerte

Mtf006 · #3 (**permalink**) 16/07/2010, 13:11

gracias por la bienvenida

lo probare y te digo ... ojala me resulte.... gracias

Mtf006 · #4 (**permalink**) 16/07/2010, 13:19

funciona de maravilla... pero... lo que aparece en el div : "Esto es una prueba para resaltar caracteres o palabras de este texto prueba" se puede ocultar?
sabes, lo que pasa es que la idea de esto es que el visitante pueda buscar dentro de la pagina palabras como:
precio
iba
costos
descuentos... etc...
me entiendes?
porque si el texto esta a la vista poco me resulta..
como bien dijiste la idea es que sea un equivalente a CTRL + F

Adler · #5 (**permalink**) 16/07/2010, 14:48

Hola

Puedes quitar el texto del div, pero ten cuenta que ese código tiene limitaciones: La cadena sobre la que se va a buscar coincidencias ha de estar dentro de ese u otro div. Solo se podrán resaltar una letra, una palabra o una frase, es decir, si quieres que se resalten los términos "prueba resaltar" no funcionará. En cambio si funcionará "prueba para resaltar"

Suerte

Mtf006 · #6 (**permalink**) 16/07/2010, 16:27

hola... claro entiendo lo que dices pero entonces como localizo las palabras a resaltar? me explico?... me gana este codigo la verdad

...
si elimino se div en particular... como hare entonces para localizar las palabras dentro de la web?

Mtf006 · #7 (**permalink**) 16/07/2010, 18:47

Adler.... ayuda XD

Adler · #8 (**permalink**) 17/07/2010, 04:39

Hola

Cita:

Iniciado por Mtf006

Adler.... ayuda XD

Aquí en España eran la 2:47 am, así que estaba yo como dar ayuda

Puedes usar document.body.innerHTML, pero verás que risa cuando encaje con un tag HTML

Suerte

Mtf006 · #9 (**permalink**) 17/07/2010, 14:14

Oh!! Adler me mataste... en fin vere que puedo hacer creo que poco en todo caso en fin te molestare si no me resulta jajaja ... gracias de todas formas

Adler · #10 (**permalink**) 17/07/2010, 14:32

Hola

Te he optimizado el js, así que usa este. También te he montado un caso para que veas a lo que me refiero. Guarda el código con extension .php y escribe en el textfield una "s"

Código Javascript:

Ver original<?php
$url = file_get_contents('http://www.monografias.com/trabajos5/asp/asp.shtml', true);
$codigo =  $url;
?>
 
<!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 vuelta = 0;
var cadena = '';
var len = 0;
function Resaltar(c,ev) {
var caracteresInput = c.length;
var largo_cadena = len;
var keyCode = document.layers ? ev.which : document.all ? event.keyCode : document.getElementById ? ev.keyCode : 0;
    
    if (keyCode == 8) vuelta--;
        if (vuelta < 1) {
                //cadena += document.getElementById('texto').firstChild.nodeValue;
        cadena = document.getElementById('texto').innerHTML;
        var largo2_cadena = cadena.length
 
        if (largo2_cadena >= largo_cadena) {len = largo_cadena;}
        if (largo_cadena == 0) {len = largo2_cadena;}
        }
 
 
 
    if (caracteresInput == 0) {
        document.getElementById('texto').innerHTML = cadena;
        document.getElementById('terminos').style.border = '';
    } else {
 
var rg = new RegExp(c,"g");
 
            if (rg.exec(cadena.substr(0,parseInt(len))) != null) {
                var marca = cadena.substr(0,parseInt(len)).replace(rg, '<span style=\"background-color:#9ACD32;color:#FFFFFF;\">' + c + '</span>'); 
                    document.getElementById('texto').innerHTML = marca;
            document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
            } else {
            document.getElementById('texto').innerHTML = cadena;
            document.getElementById('terminos').style.border = 'solid #FF0000 1px';
        }
vuelta++;
    }
 
}
</script>
</head>
<body>
<form method="post" action="" name="" autocomplete="off">
Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value,event);" />
<div id="texto"><?php echo $codigo;?></div>
</form>
</body>
</html>

Suerte

pablo1111 · #11 (**permalink**) 18/07/2010, 10:50

El código está genial, pero lo necesito que no sea sencible a mayúscula y minúscula. ;)

Saludos! ;)

Adler · #12 (**permalink**) 18/07/2010, 16:07

Cita:

Iniciado por pablo1111

El código está genial, pero lo necesito que no sea sencible a mayúscula y minúscula. ;)

Saludos! ;)

Ahora echandole un vistazo, el código tiene algunas deficiencias. A ver si mañana tengo ganas de hacerle algunas mejoras

Cambia a esto var rg = new RegExt(c,'g\i');

Suerte

Adler · #13 (**permalink**) 19/07/2010, 14:08

Hola

Un código algo mas optimizado. Es case insensitive. Ahora se deberán introducir 3 caracteres antes del highlight

Código Javascript:

Ver original<?php
$url = file_get_contents('http://www.monografias.com/trabajos5/asp/asp.shtml', true);
$codigo =  $url;
?>
<!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;
 
    if (caracteresInput == 2) {
        document.getElementById('texto').innerHTML = cadena;
        document.getElementById('terminos').style.border = '';
 
    } else if (caracteresInput >= 3) {
 
var rgEx = new RegExp(cadABuskar, 'g\i');
 
            if (cadena.substr(0,parseInt(largo_cadena)).match(rgEx)) {
                var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';}); 
                    document.getElementById('texto').innerHTML =  marca;
            document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
            } else {
            document.getElementById('texto').innerHTML = cadena;
            document.getElementById('terminos').style.border = 'solid #FF0000 1px';
        }
    }
}
</script>
</head>
<body>
<form method="post" action="" name="" autocomplete="off">
Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
</form>
<div id="texto"><?php echo $codigo;?></div>
</body>
</html>

Parte de este código es gracias a @zerokilled, gracias por ensañarme a usar funciones en el replace

Suerte

Mtf006 · #14 (**permalink**) 19/07/2010, 19:24

hola gente q sabe...
me pueden decir como diantres colocar este código?XD
... cual es la forma? o cuales son las rutas de inserción del código?
debo llamarlo de forma externa?... o lo incerto directo en el html?
gracias

abimaelrc · #15 (**permalink**) 19/07/2010, 19:41

A mí me gustó mucho este que hizo Panino5001 hace 70 años http://www.forosdelweb.com/2656337-post10.html

Adler · #16 (**permalink**) 20/07/2010, 06:42

Cita:

Iniciado por abimaelrc

A mí me gustó mucho este que hizo Panino5001 hace 70 años http://www.forosdelweb.com/2656337-post10.html

No lo conocía. A ver si esta tarde me pongo con el por que así al vuelo no comprendo muy bien como funciona.
Y que siga así otros 70 más!!

Cita:

Iniciado por Mtf006

hola gente q sabe...
me pueden decir como diantres colocar este código?XD
... cual es la forma? o cuales son las rutas de inserción del código?
debo llamarlo de forma externa?... o lo incerto directo en el html?
gracias

Solo necesitas copiar el código, pegarlo en cualquier editor de texto y guardarlo con la extensión .php

Mtf006 · #17 (**permalink**) 22/07/2010, 19:11

hola... lo he hecho

Cita:

Solo necesitas copiar el código, pegarlo en cualquier editor de texto y guardarlo con la extensión .php

pero no me resulta...lo he previsualizado en Explorer y en Safari.. pero nada... alguna idea de que puede ser?
gracias...

Adler · #18 (**permalink**) 23/07/2010, 05:49

Hola

No se que estás haciendo, pero el código funciona en FF, IE8, Opera y Chrome. ¿Qué quieres decir con que lo has previsualizado?

Suerte

Mtf006 · #19 (**permalink**) 23/07/2010, 22:33

mira te comento... he colocado todo el codigo q posteaste en una hoja de DW, entonces cuando lo previsualizo (F12) no puedo buscar ningun texto.... seguramente es una idiotez u.u pero la verdad q no tengo idea de como modificar esto para q me resulte...
gracias

Adler · #20 (**permalink**) 24/07/2010, 03:58

Hola

Si hablamos de dreamweaver yo me retiro, no tengo ni idea

Suerte

Mtf006 · #21 (**permalink**) 24/07/2010, 14:48

Oh!! sera bueno, gracias de todas formas.. :S