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