Foros del Web » Programando para Internet » Javascript »

Resaltar palabra en una web

Estas en el tema de Resaltar palabra en una web en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/10/2005, 08:39
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
Resaltar palabra en una web

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?
  #2 (permalink)  
Antiguo 27/10/2005, 09:33
Avatar de Saruman  
Fecha de Ingreso: mayo-2003
Ubicación: Panama city, Panama, Panama
Mensajes: 1.154
Antigüedad: 21 años
Puntos: 5
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
__________________
Saruman

One Ring to rule them all, One Ring to find them, One Ring to bring them all and in the darkness bind them.
  #3 (permalink)  
Antiguo 28/10/2005, 00:36
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
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.
  #4 (permalink)  
Antiguo 30/10/2005, 12:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 7 meses
Puntos: 317
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
  #5 (permalink)  
Antiguo 30/10/2005, 13:10
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 3 meses
Puntos: 772
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,
  #6 (permalink)  
Antiguo 30/10/2005, 19:26
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
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&oacute;sitos<font color="#FF0000" face="Arial, Helvetica, sans-serif"> a los que se destina.</font>
</p>
<p></p>
</body>
</html>
__________________
by Capitán Buscapina
.
  #7 (permalink)  
Antiguo 31/10/2005, 02:32
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
Gracias a todos, Cap.Buscapina tu solución se adaptó a la perfección. Miles de gracias.
  #8 (permalink)  
Antiguo 31/10/2005, 04:45
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 31/10/2005, 04:52
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
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?
  #10 (permalink)  
Antiguo 31/10/2005, 07:54
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
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
__________________
by Capitán Buscapina
.
  #11 (permalink)  
Antiguo 31/10/2005, 08:26
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
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!!!!!
  #12 (permalink)  
Antiguo 31/10/2005, 08:57
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
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:
<script>
var texto="";
function resaltar(){
var encontro=0;
var donde=0;
valor=document.getElementById('tt').value;//caja de texto con id="tt"///
reemplazar=RegExp(valor,"i");
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].length==valor.length){
tempPx[y]="<span style=\u0022background-Color:yellow;\u0022>"+tempPx[y]+"</span>";
encontro+=1;
}
}
txt[x]=tempPx.join(" ")+tempU;
}
document.body.innerHTML=txt.join(">");
alert((encontro==0)?"No se encontro ''"+valor+"''":"Se encontraton "+encontro+" coincidencias");
}


</script>
cualquier otra mejora, bienvenidas
__________________
by Capitán Buscapina
.
  #13 (permalink)  
Antiguo 31/10/2005, 09:11
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
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:
<script>
function aleatorio(inferior,superior){
numPosibilidades = superior - inferior
aleat = Math.random() * numPosibilidades
aleat = Math.floor(aleat)
return parseInt(inferior) + aleat
}

function dame_color_aleatorio(){

hexadecimal = new Array("B6D3EA","B6EAC8","EAE7B6","EAC3B6","EAB6D3" , "C7B6EA", "F1EF5D", "9FF15D", "EB908B", "8C90DC", "95F86A")
color_aleatorio = "#";

posarray = aleatorio(0,hexadecimal.length)
color_aleatorio += hexadecimal[posarray]
// alert(color_aleatorio);

return color_aleatorio
}
var texto="";
function resaltar(){
color=dame_color_aleatorio();
var encontro=0;
var donde=0;
valor=document.getElementById('tt').value;//caja de texto con id="tt"///
reemplazar=RegExp(valor,"i");
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].length==valor.length){
tempPx[y]="<span style=\u0022background-Color:" + color +";\u0022>"+tempPx[y]+"</span>";
encontro+=1;
}
}
txt[x]=tempPx.join(" ")+tempU;
}
document.body.innerHTML=txt.join(">");
alert((encontro==0)?"No se encontro ''"+valor+"''":"Se encontraton "+encontro+" coincidencias");
}


</script>
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.
  #14 (permalink)  
Antiguo 31/10/2005, 09:15
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
¡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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #15 (permalink)  
Antiguo 31/10/2005, 09:20
 
Fecha de Ingreso: febrero-2003
Mensajes: 109
Antigüedad: 21 años, 3 meses
Puntos: 0
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.
  #16 (permalink)  
Antiguo 31/10/2005, 09:29
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #17 (permalink)  
Antiguo 31/10/2005, 09:42
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
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( )
__________________
by Capitán Buscapina
.
  #18 (permalink)  
Antiguo 31/10/2005, 20:16
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
una vueltita de tuerca...

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

Cita:
<script>
var texto="";
function resaltar(){
var encontro=0;
var donde=0;
valo=document.getElementById('tt').value;//caja de texto con id="tt"///
if (valo!=""){
val=valo.split("+");
valor=val.join("|");
reemplazar=RegExp("^("+valor+")$","i");
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]="<span style=\u0022background-Color:yellow;\u0022>"+tempPx[y]+"</span>";
encontro+=1;
}
}
tempP=tempPx.join(" ");
for (r=0;r<val.length;r++){
tempR=RegExp(val[r],"i");
if (val[r].indexOf(" ")!=-1 && tempP.search(tempR)!=-1){
tempP=tempP.replace(tempR,"<span style=\u0022background-Color:yellow;\u0022>"+val[r]+"</span>");
encontro+=1;
}
}

txt[x]=tempP+tempU;
}
document.body.innerHTML=txt.join(">");
alert((encontro==0)?"No se encontro ''"+valor+"''":"Se encontraton "+encontro+" coincidencias");
}
}


</script>
__________________
by Capitán Buscapina
.
  #19 (permalink)  
Antiguo 07/07/2006, 19:15
 
Fecha de Ingreso: junio-2006
Mensajes: 24
Antigüedad: 18 años
Puntos: 0
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
  #20 (permalink)  
Antiguo 08/07/2006, 18:34
Avatar de Cap.Buscapina  
Fecha de Ingreso: octubre-2004
Ubicación: Argentina
Mensajes: 836
Antigüedad: 19 años, 8 meses
Puntos: 4
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
__________________
by Capitán Buscapina
.
  #21 (permalink)  
Antiguo 08/07/2006, 20:02
 
Fecha de Ingreso: junio-2006
Mensajes: 24
Antigüedad: 18 años
Puntos: 0
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!!
  #22 (permalink)  
Antiguo 06/10/2006, 06:00
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 21 años, 6 meses
Puntos: 4
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.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #23 (permalink)  
Antiguo 06/10/2006, 06:43
Avatar de Bravenap  
Fecha de Ingreso: noviembre-2002
Ubicación: Los Arroyos, El Escorial, Madrid
Mensajes: 2.084
Antigüedad: 21 años, 6 meses
Puntos: 4
Vale, sí funciona, lo que pasa es que tengo una tilde que no me reconoce la expresión regular.
__________________
¡¡NO A LA GUERRA!!
Si ponemos a nuestros mensajes títulos adecuados, la gente se animará más a abrirlos y resultarán más útiles en las busquedas. ¡No a los ayuuudaaa, urgenteee y similares!
  #24 (permalink)  
Antiguo 16/09/2008, 05:10
 
Fecha de Ingreso: junio-2008
Mensajes: 18
Antigüedad: 16 años
Puntos: 0
Respuesta: Resaltar palabra en una web

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
  #25 (permalink)  
Antiguo 16/09/2008, 07:09
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 5 meses
Puntos: 126
Respuesta: Resaltar palabra en una web

Hola

Ten cuidado con la sintaxis

background-color: #C0FF3E;

Suerte
__________________
Los formularios se envían/validan con un botón Submit
<input type="submit" value="Enviar" style="background-color:#0B5795; font:bold 10px verdana; color:#FFF;" />
  #26 (permalink)  
Antiguo 16/09/2008, 07:32
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 2 meses
Puntos: 1284
Respuesta: Resaltar palabra en una web

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Tema Cerrado




La zona horaria es GMT -6. Ahora son las 20:24.