Problema con Búsqueda para resaltar coincidencias...

ciisteado · #1 (**permalink**) 18/04/2008, 12:33

Hola a todos:

No recuerdo exactamente si fue de las FAQ's de Foros del Web de donde saque esto... pero bueno el problema es fácil de entender aunque no sé que tan fácil sea resolverlo...

Tengo esta funcion par resaltar los resultados de una busqueda de acuerdo a datos que estan previamente cargados en un FORM..

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>BUSCADOR</title>
<script>
String.prototype.preg_quote=function(){
	p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
	return this.replace(p,"\\$1");
}
function buscar(cadena){
	resetear();
    if(!cadena.length)return;
	var info3;
	cadena=cadena.preg_quote();
	var patron=new RegExp(cadena+'(?!\}\})','gim');
	var espacio=/^\s$/;
	var el=document.getElementsByTagName('html')[0].getElementsByTagName('*');
	for(var i=0;i<el.length;i++){
		if(el[i].hasChildNodes && el[i].nodeName.toLowerCase()!='title' && el[i].nodeName.toLowerCase()!='script' && el[i].nodeName.toLowerCase()!='meta' && el[i].nodeName.toLowerCase()!='link' && el[i].nodeName.toLowerCase()!='style'){
			var tt=el[i].childNodes;
			for(var jj in tt){
				if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
					patron.lastIndex = 0;
					if(info3=patron.exec(tt[jj].nodeValue)){
						tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
				
					}
				}

			}		
		}
	}
	document.getElementsByTagName('body')[0].innerHTML=document.getElementsByTagName('body')[0].innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: #FFFF99">');
}
function resetear(){
	original=document.getElementsByTagName('body')[0].innerHTML=original;
}
window.onload=function(){
	original=document.getElementsByTagName('body')[0].innerHTML;
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
  <input name="cadena" type="text" id="cadena" />
  <input type="button" name="Button" value="buscar" onclick="buscar(cadena.value)" />

</form>

ver Buscador simple
<div>sí, dije buscador <div id="pepe">buscador <span> y
      metemos otra vez la palabra buscador} a ver /a qué pasa</span><span>algo
      más </span>y
      esto fuera del span y dentro de div </div>
</div> 
y si ponemos buscador fuera otra vez?
</body>
</html>

Funciona correctamente, me resalta las coincidencias que encuentra... el problema es que antes de hacer la búsqueda los datos tienen un formato establecido mediante un CSS y asignado en una class... pero despues de hacer la búsqueda ese formato desaparece, es decir, me marca las coincidencias pero el formato que tenian los datos antes de hacer la búsqueda cambia por completo...¿Cómo hacer para conservar el mismo formato...?

¿¿No sé si me expliqué...??

Cualquier ayuda la agradeceré bastante...

Saludos...

ciisteado · #2 (**permalink**) 18/04/2008, 12:49

Hey:

Cita:

No recuerdo exactamente si fue de las FAQ's de Foros del Web de donde saque esto...

En efecto este código lo saque de las FAQ's de aqui...
FAQ 262-JavaScript

Todos los créditos Panino5001

Sorry...