Resaltar palabra en una web

juanpa615 · #1 (**permalink**) 27/10/2005, 08:39

Hola a todos, lo que quería hacer es una utilidad, algo como lo que hace la barra de google, que escriba una palabra en una caja de texto, y al pulsar un boton que, en esa página, resalte la palabra buscada. Tengo algo hecho haciendo un replace al innerHTML de la capa donde busco la palabra, pero también me reemplaza, además del texto, el código.
Un ejemplo, quiero resaltal la palabra "hola", y el innerHTML me da "<a href='hola.html'>hola</a>". Si le hago un replace remarcando la palabra me devolvería a href='<span style="background-color:yellow">hola</span>.html'><span style="background-color:yellow">hola</span></a>
De manera que me reemplaza el texto también en el código e inhabilita el enlace.
Alguna idea?

Saruman · #2 (**permalink**) 27/10/2005, 09:33

Y esto lo estas haciendo con lenguajes del lado del server?? (ASP, PHP, etc).... si es asi, mejor haslo alla y en la palabra o descripción que se está buscando lo formateas agregandole span o div... como quieras y alli le pones un color de fondo y luego eso lo reemplazas donde esté las palabras que buscabas... no c si me explique bien

saludos

pd. asi lo hago yo y me funciona bien

juanpa615 · #3 (**permalink**) 28/10/2005, 00:36

Esa solución sería buena, pero lo quiero hacer con javascript, en la misma página, sin reenviarla al servidor. Gracias por el intento.

furoya · #4 (**permalink**) 30/10/2005, 12:58

Hola todos :

Tengo guardado algo así para IExplorer, pero cuando lo fuí a buscar resulta que estaba integrado a una herramienta para manipular tablas que no voy a diseccionar. Pero nada de lo que hay ahí es mio; así que lo que buscas, juanpa615, debe estar en el foro o en algún lugar de la red.

Lo que te dejo son dos bookmarklets para que los uses en tus navegadores. De allí puedes sacar el código, ya que no son más que javascripts.

El primero es justamente para Firefox, y no lo posteo porque se que está en

http://www.squarefree.com/bookmarkle...html#highlight

y hay otro inmediatamente abajo.

El segundo es para IE y no tengo idea de dónde lo saqué

Código:

<a href="

javascript:FD983r={x:function(){var%20r,i,s=document.selection.createRange().text;if(!s)s=prompt('Buscar:','');if(s){r=document.body.createTextRange();for(i=0;r.findText(s);i++){r.execCommand('BackColor','','yellow');r.collapse(false)};alert(i+' coincidencias.')}}};FD983r.x()

" >
	!Busca y destaca texto.
</a> una palabra en todo el documento.

Si lo quieren probar sin guardarlo, hay que copiar el código azul y pegarlo en la barra de direcciones; se puede seleccionar una palabra del documento y darle [ENTER] o "Ir a" en la barra para ejecutarlo. Si no se selecciona texto aparece un prompt para escribirlo.

saludos

furoya

JavierB · #5 (**permalink**) 30/10/2005, 13:10

Hola a todos.

Hablando de bookmarklets (he hecho un copy&paste del mensaje de furoya para escribir esta palabreja) aquí hay otro que funciona en Firefox y Explorer. No tengo instalado Opera, así que no se que tal va con ese navegador.

http://slayeroffice.com/?c=/content/...ghlighter.html

Saludos,

Cap.Buscapina · #6 (**permalink**) 30/10/2005, 19:26

a ver si te sirve:

Cita:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script>
var texto="";
function resaltar(){
var encontro=0;
var donde=0;
valor=document.getElementById('tt').value;
reemplazar=RegExp(valor,"i");
por="<span style=\u0022background-Color:yellow;\u0022>"+valor+"</span>";
if(texto==""){texto=document.body.innerHTML};
txt=texto.split(">");
for (x=0;x<txt.length;x++){
desde=(txt[x].indexOf("<")!=-1)?txt[x].indexOf("<"):0;
tempP=txt[x].slice(0,desde);
tempU=txt[x].slice(desde);
tempPx=tempP.split(" ");
for(y=0;y<tempPx.length;y++){
if(tempPx[y].search(reemplazar)!=-1){
tempPx[y]=tempPx[y].replace(reemplazar,por);
encontro+=1;
}
}
txt[x]=tempPx.join(" ")+tempU;
}
document.body.innerHTML=txt.join(">");
alert((encontro==0)?"No se encontro ''"+valor+"''":"Se encontraton "+encontro+" coincidencias");
encontro=null;
donde=null;
}

</script>

<body bgcolor="#FFFFFF" text="#000000">
<p>
<input type="text" name="textfield" id="tt" >
<input type="button" value="Buscar en el documento" onClick="resaltar()">
<span id="aa"> </span></p>
<p>JScript es un lenguaje <strong>de <em>secuencias</em></strong> de comandos<em>
interpretado</em> y basado en objetos. Aunque tiene menos funciones que los
lenguajes orientados a objetos de altas prestaciones como C++, JScript es muy
eficiente para los propósitos<font color="#FF0000" face="Arial, Helvetica, sans-serif"> a los que se destina.</font>
</p>
<p></p>
</body>
</html>

juanpa615 · #7 (**permalink**) 31/10/2005, 02:32

Gracias a todos, Cap.Buscapina tu solución se adaptó a la perfección. Miles de gracias.

caricatos · #8 (**permalink**) 31/10/2005, 04:45

Hola:

Hay algunos métodos de las cadenas que pueden ser útiles, y otros que se pueden crear con prototipos...

Como ejemplo hice esta paginilla:

Código:

<html>
<head>
<script type="text/javascript">
	String.prototype.azulito = function (texto) {
		return this.split(texto).join(texto.fontcolor("blue"));
	}
</script>
</head>
<body onload="window['texto'] = document.getElementById('texto').innerHTML">
<script type="text/javascript">
	document.writeln("Negrita".bold().italics().fontcolor("red").fontsize(30).link("http://www.sucaricatura.com").blink());
	document.writeln("Itálica".italics());
	document.writeln("Grande".big());
	document.writeln("Pequeña".small());
</script>
<p id="texto">
El veloz murciélago está en el techo con el insecto que acaba de dar caza...
</p>
<form name="resalte" >
resaltar: <input type="text" name="resaltar" value="el" />
<input type="button" value="resaltar"
onclick="document.getElementById('texto').innerHTML = document.getElementById('texto').innerHTML.azulito(resaltar.value)"
/>
<input type="button" value="limpiar"
onclick="document.getElementById('texto').innerHTML = window['texto']" />
</form>

</body>
</html>

Aunque veo que el tema está resuelto, creo que puede ser interesante.

Saludos

juanpa615 · #9 (**permalink**) 31/10/2005, 04:52

A mi la solución de Cap.Buscapina me funcionó a las mil maravillas, la adapté para escribir la palabra en una caja de texto, y muy bien. La que aportas tu tambien funciona, pero que pasa si en el párrafo pones imagenes o enlaces q contenga la cadena buscada?

Cap.Buscapina · #10 (**permalink**) 31/10/2005, 07:54

si bien la solucion de CARICATOS no la probé, la que yo aporte "salta" las etiquetas html. Como mejora, tal ves, le faltaría reconocer entre mayusculas y minusculas(eso se solucionaría con expresiones regulares, que yo manejo muy poco)

Admás otra mejora podría ser permitir buscar mas de una palabra (separadas por , o +), si es lo que necesitas, avisame.

suerte

juanpa615 · #11 (**permalink**) 31/10/2005, 08:26

Cap.Buscapina, tu script ya me di cuenta q salta las etiquetas, es por eso que es el q estoy implementando en mis pruebas. Tal vez la única mejora sería que si yo busco por ejemplo "hola" y encuentro "Hola" mantenga la 1ª mayúscula al reemplazarla. El resto, chapeau!!!!!

Cap.Buscapina · #12 (**permalink**) 31/10/2005, 08:57

bueno, estimado amigo. Tus deseos son orden

aquí te dejo el script que corrige dos bug:

1-Reconoce tal cual está la cadena (tal como lo presisas)
2 - Busca palabras (o sea que si pones a, encontrará a o A pero no Hola)

y el tercero (para buscar varias palabras a la vez) te lo debo para mas adelante.

Cita:

cualquier otra mejora, bienvenidas

juanpa615 · #13 (**permalink**) 31/10/2005, 09:11

Perfecto!!! Hace lo que tu dices!!! Me gustaría hacer una pequeña aportación. Es una función (muy sencilla) que devuelve un color aleatoriamente, de una serie de ellos dados, para que cada búsqueda tenga su propio color.

Cita:

Lo de buscar varias palabras sería un puntazo, y un tutorial ya sería una panacea para los que no dominamos mucho este lenguaje, aunque sí lo usamos bastante.
Un saludo.

caricatos · #14 (**permalink**) 31/10/2005, 09:15

¡Jé, je!

Tan solo puse un código que pensé que era interesante... el uso de prototipos y de funciones nativas javascript...

Probé el código de Cap.Buscapina y ví que funcionaba bien, pero nunca voy a desistir de mostrar alternativas cuando las conozca.

En un foro, se participa para debatir, y era mi única intención... además, sé muy bien que Cap.Buscapina es buen programador

Saludos

juanpa615 · #15 (**permalink**) 31/10/2005, 09:20

Hola Caricatos, en ningún momento fue mi intención menospreciar tu ayuda, nunca jamás!!! Si eres uno de mis ídolos de Javascript y ya me ayudaste en multitud de ocasiones. Lo que pasa que ya había probado una fucnión como la tuya y me daba problemas al sustituir el código también, no sólo el texto.
Una vez más te muestro mi admiración y agradecimiento.

caricatos · #16 (**permalink**) 31/10/2005, 09:29

Hola:

En principio no suelo pensar que menosprecien mis aportaciones (a no ser que lo demuestren... y en tal caso no me gusta, y procuro evitar el tema o el menospreciante...)

... pero como puse antes, he visto que Cap.Buscapina puso una buena respuesta y tan solo quise aportar alternativas.

Me agrada saber que en alguna ocasión te he ayudado

y sobre todo me agrada saber que eres agradecido...

Un abrazote para ti y para Cap.Buscapina (a quien le tengo mucho aprecio) desde la Costa del Sol.

Saludos

Cap.Buscapina · #17 (**permalink**) 31/10/2005, 09:42

holas.

Cita:

sé muy bien que Cap.Buscapina es buen programador

viniendo del gran CARICATOS se valora el doble.

Cita:

devuelve un color aleatoriamente, de una serie de ellos dados, para que cada búsqueda tenga su propio color.

para eso esta linea sobra:

Cita:

if(texto==""){texto=document.body.innerHTML};

Cita:

buscar varias palabras sería un puntazo

veremos dijo lemos..... (voy a ver que puedo hacer).

un besito

para las chicas y para Uds un abrazo(

)

Cap.Buscapina · #18 (**permalink**) 31/10/2005, 20:16

probar con cadenas de texto y para buscar mas de una palabra separar por +

Cita:

piruchito · #19 (**permalink**) 07/07/2006, 19:15

Cap.Buscapina: Muy buena tu funcion. Como puedo hacer si solo quiero aplicarla a parte de un texto? Es decir, si tengo en una pagina varias sectores, como una barra de navegacion, el titulo del texto, y por ultimo el texto, y la palabra a resaltar aparece en los 3 sectores, como hago para resaltarla solo en el texto y no en el titulo y la barra? Gracias

Cap.Buscapina · #20 (**permalink**) 08/07/2006, 18:34

busca en el codigo:

Cita:

document.body.innerHTML

y reemplazalo por

Cita:

document.getElementById('contenedor').innerHTML

creo que aparece en dos lugares.
Ademas el trozo de texto donde quieras resaltar las palabras deberán estar en un objeto con el id= contenedor.

saludos

piruchito · #21 (**permalink**) 08/07/2006, 20:02

Si, perfecto, ya hice los cambios y funcionan ok.
Sabes que use esta funcion para lograr lo que pregunte en otro post (forosdelweb.com/showthread.php?t=404968) y funciona muy bien, cargo en el array los terminos desde la base de dato (son alrededor de 100 terminos).
Gracias por la ayuda!!

Bravenap · #22 (**permalink**) 06/10/2006, 06:00

Buenas. Retomo este tema porque estoy intentando que, en lugar de resaltar una palabra me resalte un frase completa.

He cambiado

valor=document.getElementById('tt').value;

por

valor="Frase que busco en el texto"

Pero me da cero resultados.

Bravenap · #23 (**permalink**) 06/10/2006, 06:43

Vale, sí funciona, lo que pasa es que tengo una tilde que no me reconoce la expresión regular.

alaitz1978 · #24 (**permalink**) 16/09/2008, 05:10

Hola,

He probado con el código que habeis comentado pero a mi mo me resalta la palabra en color, sino que me escribe el código, es decir:
<span style="background-Color:#95F86A;">Etxian</span>

en vez de ponerme la palabra "Etxian" en el color que se le dice

Os agradecería mucho que me ayudaras

Muchas gracias

Adler · #25 (**permalink**) 16/09/2008, 07:09

Hola

Ten cuidado con la sintaxis

background-color: #C0FF3E;

Suerte

caricatos · #26 (**permalink**) 16/09/2008, 07:32

Hola:

Es preferible no reabrir viejos temas, ya que siempre se pueden referenciar.
Creo que la última respuesta es válida... si no lo fuera, es mejor abrir un tema nuevo.

Saludos