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.