Buscador de palabras en mi pagina...

Ugho · #1 (**permalink**) 30/04/2004, 16:04

Estimados amigos:
Tengo una pagina con mucho texto, quisiera saber como puedo hacer para buscar una palabra determinada en mi pagina y que quede seleccionada las veces que se encuentre....
Todo esto con una caja de texto donde escribir y un boton para buscar...
Se puede hacer con Javascript o tengo que hacer algo mas estructurado con un lenguaje del lado del servidor?
Podrian orientarme?
Saludos

seoista · #2 (**permalink**) 01/05/2004, 02:25

Hola Ugho

Aquí te va el código de un "Buscador Interno":

Cita:

<html>
<head>

<title>Activar botón de Busqueda</title>

</head>

<body>

<script language="JavaScript">
//Por El Chacal ([email protected])
var NS4 = (document.layers);
var IE4 = (document.all);
var win = window; // Con frames usar top.nombre.window;
var n = 0;

function BuscarPalabras(str)
{
var txt, i, found;
if (str == "")
return false;

if (NS4) {
if (!win.find(str))
while(win.find(str, false, true))
n++;
else
n++;

// No se encuentra en ninguna parte y envia un mensaje.
if (n == 0)
alert("No se encuentra.");
}

if (IE4) {
txt = win.document.body.createTextRange();
// Encuentra la coincidencia desde el inicio de pagina.
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}

// Si lo encuentra, marca el resultado y mueve la barra de desplazamiento
// para mostrarlo.
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
n++;
}
// De otra manera regresa al inicio de la página para buscar otra coinsidencia
else {
if (n > 0) {
n = 0;
BuscarPalabras(str);
}
// No se encuentra en ninguna parte envia un mensaje.
else
alert("No se encontró.");
}
}
return false;
}
</script>

<font face=arial size=2><p>Escribe la palabra que desees buscar dentro de esta página en el cuadro de texto y presiona el botón BUSCAR.</p></font>

<form name="search" onSubmit="return BuscarPalabras(this.string.value);">
<font size=2>
<input name="string" type=text size=15 onChange="n = 0;">
<input type="submit" value="BUSCAR"></font>
</form>

<br><br>

A B C D E F G<br><br>
H I J K L M N<br><br>
O P Q R S T U<br><br>
V W X Y Z

<body>
</html>

Espero te haya ayudado.

Saludos

Ugho · #3 (**permalink**) 12/05/2004, 13:07

Me parecio muy buen codigo seoista:
pero no se si alguin me puede ayudar a mejorar el codigo.
¿En vez de seleccionarlo se puede colorear el fondo de la palabra buscada con un color?
y ¿se puede hacer lo mismo pero no una sola vez, sino las veces que se encuentre la palabra colorear el fondo?
para no presionar nuevamente el boton buscar....
Me pueden ayudar a mejorarlo....
saludos...

seoista · #4 (**permalink**) 13/05/2004, 00:31

Cita:

Mensaje Original por Ugho
¿En vez de seleccionarlo se puede colorear el fondo de la palabra buscada con un color?

Mira este link, aqui te selecciona la palabra buscada con un color.

El código es de KarlanKas (Hola

): http://www.forosdelweb.com/s1c8f2d4e...msg202148.html

terrariomania · #5 (**permalink**) 13/05/2004, 07:39

Prové el código y es muy interesante aunque me gustaría saberle variar alguna cosa que provablemente no sea posible.

Lo de cambiarlo de color sería una, también que lo hiciese con todas las coincidencias en lugar de solo la primera. Si funcionase para un grupo de páginas en lugar de una sola ya sería la leche. Si sabeis como hacer algo parecido y me lo comentais...

Supongo que esto no se podrá. probaré el que recomiendas en segundo lugar Seoista.

De todos modos es muy interesante ese código, llevaba tiempo preguntandome si se podría hacer algo así.

Muchas gracias.

Ugho · #6 (**permalink**) 13/05/2004, 08:37

Perfecto gracias amigo seoista:
Me sirven ambos ejemplos. Con una combinacion entre los dos ejemplos puedo hacer lo quiero.
Saludos

seoista · #7 (**permalink**) 13/05/2004, 23:00

Me alegro que se haya solucionado

Saludos

grapu · #8 (**permalink**) 08/11/2010, 18:16

muchas bracias por ese codigo, pero tengo un problema, lo monte y me fuciona bien en explorador pero en fire fox no, esta es la pagina donde esta montada,
http://www.productoscostarica.com/venta_perros_costarica.html, me gustaria saber como lo podria montar en la pagina madre ya que no pude y la monte en la hija, pero no es lo correcto para mi.

xloxy · #9 (**permalink**) 10/11/2010, 09:07

Tengo el mismo problema, el codigo va genial en Ie pero en el firefox no funciona.

rodrigo_1986 · #10 (**permalink**) 10/11/2010, 12:26

podes usar un plugin de jquery:
[URL="http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html"]http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html[/URL]

shiolo10 · #11 (**permalink**) 10/11/2010, 12:50

Aca te dejo una solucion usando CSS y Jquery

Es el primer ejemplo de este articulo (esta en ingles):
http://www.smashingmagazine.com/2010/09/21/5-coding-techniques-for-more-dynamic-websites/#on-page-text-search

Espero que te ayude.
Saludos!