Fallo en buscador que resalta el texto

yazo · #1 (**permalink**) 03/11/2009, 10:53

Hola a todos,

Estoy realizando un pequeño buscador (de contenido en página) que resalta la palabra que buscas si la encuentra.

Tengo un par de cosillas que estoy intentando mejorar pero nada:

Quiero que me revise el contenido de todas las capas que están dentro de la capa llamada "CapaPrincipal", del resto no, es decir, div0, div1, div2, div2_1, div2_1_1. Sé que es con IndexOf, pero no lo he logrado, ya que ahora me coge las capas 0 a 2, pero no las2_1 y 2_1_1
que me compruebe si en cada capa aparece la palabra que busca y que me ejecute en las capas que aparece una función llamada "accionCapa('nombrecapa')", que todavía estoy desarrollando y que hace que esta se despliegue o contraiga.
Como extra me gustaría que en vez de cambiar el color de la letra se cambie el fondo de la misma ¿Como se hace esto? ¿no tienen propiedad de background?

El codigo es el siguiente:

Código HTML:

<html>
<head>
<script type="text/javascript">
	String.prototype.resaltar = function (capa) {
		return this.split(capa).join(capa.fontcolor("red"));
	}
	
	//Actualizamos la función suma
	window.onload=function(){
		//Numero de divs de la capa principal
		els = document.getElementById('CapaPrincipal').getElementsByTagName('div');
		
		//Recorremos los divs
		for(i=0;i<els.length;i++){
			window['div'+i] = document.getElementById('div'+i).innerHTML;
		}
	}

	function recorrer(){
		//Numero de divs de la capa principal
		els = document.getElementById('CapaPrincipal').getElementsByTagName('div');
		
		//Recorremos los divs
		for(i=0;i<els.length;i++){
		
			//alert(els.length);
			document.getElementById('div'+i).innerHTML = window['div'+i];
			document.getElementById('div'+i).innerHTML = document.getElementById('div'+i).innerHTML.resaltar(document.getElementById('resaltar').value);

		}
	}

</script>
</head>
<body>

<div id="texto">El veloz murciélago está en el techo con el insecto que acaba de dar caza... (este no debe cogerle en la busqueda)</div>


<div id="CapaPrincipal">

    <div id="div0">0 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div1">1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2">2 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2_1">2 1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2_1_1">2 1 1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>

</div>

<form name="resalte" >
Palabra: <input type="text" name="resaltar" id="resaltar" value="veloz" />
<input type="button" value="resaltar" onclick="recorrer()" />
</form>

</body>
</html>

En el código me he basado en uno que he encontrado en foro y le he modificado.

Haber si hay suerte y me podéis ayudar.

Muchas Gracias por vuestra ayuda.

yazo · #2 (**permalink**) 03/11/2009, 14:02

¿Alguien me puede ayudar?

Me urge un poco.

Gracias de antemano.

Adler · #3 (**permalink**) 03/11/2009, 14:53

Hola

Referente a tu primera consulta, cambia 'div'+i ya que "i" en tu caso obcila entre 0 y 4, por esto otro els[i].id ya que lo que necesitas es acceder a la id del elemento

Suerte

yazo · #4 (**permalink**) 03/11/2009, 15:20

Gracia por tu respuesta Adler.
¿A que te refieres exactamente?

Adler · #5 (**permalink**) 03/11/2009, 15:37

Hola

Pues a eso, a que cambies todos los 'div'+i por els[i].id y te funcionará

Suerte

yazo · #6 (**permalink**) 03/11/2009, 16:26

Ok, muchas gracias

Hay alguna forma de poner un if del prototype o algo así que compruebe si esa palabra está en una capa?

Gracias

yazo · #7 (**permalink**) 04/11/2009, 02:25

Ya he conseguido resolver los puntos 1 y 2, pero el cambiar el fondo no he podido conseguirlo.

El código que tengo es:

Código HTML:

<html>
<head>
<script type="text/javascript">
	//Prototype para resaltar
	String.prototype.resaltar = function (capa) {
		return this.split(capa).join(capa.fontcolor("red"));
	}
	
	//Actualizamos la función suma
	window.onload=function(){
		//Numero de divs de la capa principal
		els = document.getElementById('CapaPrincipal').getElementsByTagName('div');
		
		//Recorremos los divs
		for(i=0;i<els.length;i++){
			//Guardamos los valores iniciales de los textos
			window[els[i].id] = document.getElementById(els[i].id).innerHTML;
		}
	}

	//Recorre los divs para encontrar las palabras
	function recorrer(){
		//Numero de divs de la capa principal
		els = document.getElementById('CapaPrincipal').getElementsByTagName('div');
		//Iniciamos el contador
		contador = 0;
		
		//Recorremos los divs
		for(i=0;i<els.length;i++){
			//Busca el texto y le resalta
			document.getElementById(els[i].id).innerHTML = window[els[i].id];
			document.getElementById(els[i].id).innerHTML = document.getElementById(els[i].id).innerHTML.resaltar(document.getElementById('palabra').value);
			//Texto de la capa
			texto = document.getElementById(els[i].id).innerHTML;
			if (texto.indexOf(document.getElementById('palabra').value) != -1) contador++;
		}
		
		//Indicamos el numero de resultados
		alert((contador==0)?"No se encontro ''"+document.getElementById('palabra').value+"''":"Se encontraton "+contador+" coincidencias");
	}
</script>
</head>
<body>

<div id="texto">El veloz murciélago está en el techo con el insecto que acaba de dar caza... (este no debe cogerle en la busqueda)</div>


<div id="CapaPrincipal">

    <div id="div0">0 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div1">1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2">2 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2_1">2 1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>
    
    <div id="div2_1_1">2 1 1 El veloz murciélago está en el techo con el insecto que acaba de dar caza...</div>

</div>

<form name="resalte" >
Palabra: <input type="text" name="palabra" id="palabra" value="veloz" />
<input type="button" value="Buscar" onClick="recorrer()" />
</form>

</body>
</html>

¿Como puedo cambiar el fondo del texto que buscas?

Gracias

Adler · #8 (**permalink**) 04/11/2009, 12:59

Hola

Estas usando el método string, así que hechale un vistazo a esto

Suerte