Foros del Web » Programando para Internet » Javascript »

Función para buscar en web

Estas en el tema de Función para buscar en web en el foro de Javascript en Foros del Web. Hola queria saber si alguien me puede ayudar u orientarme, necesito una función javascript para colocar en un botón y que realice una búsqueda en ...
  #1 (permalink)  
Antiguo 24/09/2010, 06:33
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
De acuerdo Función para buscar en web

Hola queria saber si alguien me puede ayudar u orientarme, necesito una función javascript para colocar en un botón y que realice una búsqueda en mi página web del texto que se puso en un cuadro de texto.
Los elementos del formulario son del estilo de los que aparecen en algunas páginas tales como: un cuadro de texto dende el usuario puede ingresar una palabra que desea buscar en la página o en la web, también estan las opciones con dos radiobuttons donde se clickea para especificar donde se quiere buscar si en la página que se esta visualizando o en la web en general.
Por si no se entiende aqui dejo un link de una página en donde tiene este tipo de opciones:
www.perfil.com
También como se hace para que la fecha aparezca en castellano y con los datos del tiempo.
Se que es mucho lo que pido pero si alguien sabe esto por fabor una manito. Por lo menos lo del cuadro de texto.-
Gracias
  #2 (permalink)  
Antiguo 24/09/2010, 06:47
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

Este es de @panino
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>test</title>
  6. <script>
  7. String.prototype.preg_quote=function(){
  8.     p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
  9.     return this.replace(p,"\\$1");
  10. }
  11. function buscar(cadena){
  12.        resetear();
  13.     if(!cadena.length)return;
  14.     var info3;
  15.     cadena=cadena.preg_quote();
  16.     var patron=new RegExp(cadena+'(?!\}\})','gim');
  17.     var espacio=/^\s$/;
  18.     var el=document.getElementById('tabla').getElementsByTagName('*');
  19.    for(var ii=0;ii<el.length;ii++){
  20.         if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){
  21.             var tt=el[ii].childNodes;
  22.             for(var jj in tt){
  23.                 if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
  24.                     patron.lastIndex = 0;
  25.                     if(info3=patron.exec(tt[jj].nodeValue)){
  26.                         tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
  27.                
  28.                     }
  29.                 }
  30.  
  31.             }        
  32.         }
  33.     }
  34.    document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
  35.    
  36. }
  37. function resetear(){
  38.     document.getElementById('tabla').innerHTML=original;
  39. }
  40. window.onload=function(){
  41.     original=document.getElementById('tabla').innerHTML;
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <form id="form1" name="form1" method="post" action="">
  48.   <input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
  49.   <br />
  50.   <div id="tabla">
  51.   <table width="300" border="1" cellpadding="1" >
  52.    
  53.     <tr>
  54.       <td>Pepe</td>
  55.       <td>L&#243;pez</td>
  56.     </tr>
  57.     <tr>
  58.       <td>Jos&#233;</td>
  59.       <td>San Mart&#237;n </td>
  60.     </tr>
  61.   </table>
  62.   </div>
  63. </form>
  64. </body>
  65. </html>
y este otro es mio
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6. var cadena = '';
  7. var largo_cadena = 0;
  8.  
  9. window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
  10.  
  11. function Resaltar(cadABuskar) {
  12. var caracteresInput = cadABuskar.length;
  13.  
  14.     if (caracteresInput == 2) {
  15.         document.getElementById('texto').innerHTML = cadena;
  16.         document.getElementById('terminos').style.border = '';
  17.  
  18.     } else if (caracteresInput >= 3) {
  19.  
  20. var rgEx = new RegExp(cadABuskar, 'g\i');
  21.  
  22.         if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
  23.                 var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
  24.                     document.getElementById('texto').innerHTML =  marca;
  25.             document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
  26.             } else {
  27.             document.getElementById('texto').innerHTML = cadena;
  28.             document.getElementById('terminos').style.border = 'solid #FF0000 1px';
  29.         }
  30.     }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <form method="post" action="" name="" autocomplete="off">
  36. Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
  37. </form>
  38. <div id="texto">
  39. <table width="300" border="1" cellpadding="1" >
  40.    
  41.     <tr>
  42.       <td>Pepe</td>
  43.       <td>López</td>
  44.     </tr>
  45.     <tr>
  46.       <td>José</td>
  47.       <td>San Martín </td>
  48.     </tr>
  49.   </table>
  50. </div>
  51. </body>
  52. </html>
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;" />
  #3 (permalink)  
Antiguo 24/09/2010, 11:59
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Buenisimo! Gracias!
Esta bárbaro el código, justo lo que necesitaba.-
Gracias.-
  #4 (permalink)  
Antiguo 25/09/2010, 12:19
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Cita:
Iniciado por Adler Ver Mensaje
Hola

Este es de @panino
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>test</title>
  6. <script>
  7. String.prototype.preg_quote=function(){
  8.     p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
  9.     return this.replace(p,"\\$1");
  10. }
  11. function buscar(cadena){
  12.        resetear();
  13.     if(!cadena.length)return;
  14.     var info3;
  15.     cadena=cadena.preg_quote();
  16.     var patron=new RegExp(cadena+'(?!\}\})','gim');
  17.     var espacio=/^\s$/;
  18.     var el=document.getElementById('tabla').getElementsByTagName('*');
  19.    for(var ii=0;ii<el.length;ii++){
  20.         if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){
  21.             var tt=el[ii].childNodes;
  22.             for(var jj in tt){
  23.                 if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
  24.                     patron.lastIndex = 0;
  25.                     if(info3=patron.exec(tt[jj].nodeValue)){
  26.                         tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
  27.                
  28.                     }
  29.                 }
  30.  
  31.             }        
  32.         }
  33.     }
  34.    document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
  35.    
  36. }
  37. function resetear(){
  38.     document.getElementById('tabla').innerHTML=original;
  39. }
  40. window.onload=function(){
  41.     original=document.getElementById('tabla').innerHTML;
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <form id="form1" name="form1" method="post" action="">
  48.   <input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
  49.   <br />
  50.   <div id="tabla">
  51.   <table width="300" border="1" cellpadding="1" >
  52.    
  53.     <tr>
  54.       <td>Pepe</td>
  55.       <td>López</td>
  56.     </tr>
  57.     <tr>
  58.       <td>José</td>
  59.       <td>San Martín </td>
  60.     </tr>
  61.   </table>
  62.   </div>
  63. </form>
  64. </body>
  65. </html>
y este otro es mio
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6. var cadena = '';
  7. var largo_cadena = 0;
  8.  
  9. window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
  10.  
  11. function Resaltar(cadABuskar) {
  12. var caracteresInput = cadABuskar.length;
  13.  
  14.     if (caracteresInput == 2) {
  15.         document.getElementById('texto').innerHTML = cadena;
  16.         document.getElementById('terminos').style.border = '';
  17.  
  18.     } else if (caracteresInput >= 3) {
  19.  
  20. var rgEx = new RegExp(cadABuskar, 'g\i');
  21.  
  22.         if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
  23.                 var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
  24.                     document.getElementById('texto').innerHTML =  marca;
  25.             document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
  26.             } else {
  27.             document.getElementById('texto').innerHTML = cadena;
  28.             document.getElementById('terminos').style.border = 'solid #FF0000 1px';
  29.         }
  30.     }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <form method="post" action="" name="" autocomplete="off">
  36. Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
  37. </form>
  38. <div id="texto">
  39. <table width="300" border="1" cellpadding="1" >
  40.    
  41.     <tr>
  42.       <td>Pepe</td>
  43.       <td>López</td>
  44.     </tr>
  45.     <tr>
  46.       <td>José</td>
  47.       <td>San Martín </td>
  48.     </tr>
  49.   </table>
  50. </div>
  51. </body>
  52. </html>
Suerte
En la <table> que pusiste yo cambié los contenidos y puse 2 radiobuttons: ¿Como puedo hacer para que dentro de las opciones de busqueda aparezca una busqueda distinta en función de la opcion que se elija de cualquiera de los 2 fadiobuttons ?
  #5 (permalink)  
Antiguo 25/09/2010, 12:43
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

¿Una opción de búsqueda distinta? No lo entiendo ¿Te refieres a algo como los operadores "=" y "like" en SQL?

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;" />
  #6 (permalink)  
Antiguo 27/09/2010, 06:52
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
De acuerdo Respuesta: Función para buscar en web

Me parece que si, que eso es lo que estoy buscando pero no se el lenguaje Sql, asi que lo voy a tener que aprender supongo.
Si tenes un tutorial sobre lo mismo, te lo voy a agradecer.-
saludos.
  #7 (permalink)  
Antiguo 27/09/2010, 07:41
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

No has de usar SQL a menos que quieras atacar a una base de datos. En tal caso tendrás que usar un lenguaje del lado del servidor. Olvida todo esto.
Mi pregunta es, cuando dices que quieres tener distintas opciones de búsqueda ¿a qué te refieres?
Pongamos que tienes esta cadena
Cita:
Todo toda todavía
Ahora en el textfiel inserta la palabra toda. Tienes dos opciones
Cita:
1) Encontrar: toda y todavía (todas aquellas palabras que empiecen por toda)
2) Encontrar: solamente toda (todas aquellas palabras que casen exactamente con toda, es decir ella misma)
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;" />
  #8 (permalink)  
Antiguo 27/09/2010, 15:18
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Cita:
Iniciado por Adler Ver Mensaje
Hola

No has de usar SQL a menos que quieras atacar a una base de datos. En tal caso tendrás que usar un lenguaje del lado del servidor. Olvida todo esto.
Mi pregunta es, cuando dices que quieres tener distintas opciones de búsqueda ¿a qué te refieres?
Pongamos que tienes esta cadena
Ahora en el textfiel inserta la palabra toda. Tienes dos opciones
Suerte
No, me refiero a que tenga la opción de buscar la cadena en la pagina web en este caso pongamosle por ejemplo: www.periodicodigital.com, o en la web en general como con google, como la opcion que tienen ustedes en el banner de foros del web, viste que arriba de la página tienen un cuadro de texto donde ingresas una palabra y te la busca en la página pero te aparece encontrada en google. Se entiende?
  #9 (permalink)  
Antiguo 27/09/2010, 16:21
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

Lee este articulo

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;" />
  #10 (permalink)  
Antiguo 28/09/2010, 06:21
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Bárbaro, siempre preciso.
Saludos
  #11 (permalink)  
Antiguo 28/09/2010, 12:42
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Cita:
Iniciado por Adler Ver Mensaje
Hola

Este es de @panino
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>test</title>
  6. <script>
  7. String.prototype.preg_quote=function(){
  8.     p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
  9.     return this.replace(p,"\\$1");
  10. }
  11. function buscar(cadena){
  12.        resetear();
  13.     if(!cadena.length)return;
  14.     var info3;
  15.     cadena=cadena.preg_quote();
  16.     var patron=new RegExp(cadena+'(?!\}\})','gim');
  17.     var espacio=/^\s$/;
  18.     var el=document.getElementById('tabla').getElementsByTagName('*');
  19.    for(var ii=0;ii<el.length;ii++){
  20.         if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){
  21.             var tt=el[ii].childNodes;
  22.             for(var jj in tt){
  23.                 if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
  24.                     patron.lastIndex = 0;
  25.                     if(info3=patron.exec(tt[jj].nodeValue)){
  26.                         tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
  27.                
  28.                     }
  29.                 }
  30.  
  31.             }        
  32.         }
  33.     }
  34.    document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
  35.    
  36. }
  37. function resetear(){
  38.     document.getElementById('tabla').innerHTML=original;
  39. }
  40. window.onload=function(){
  41.     original=document.getElementById('tabla').innerHTML;
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <form id="form1" name="form1" method="post" action="">
  48.   <input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
  49.   <br />
  50.   <div id="tabla">
  51.   <table width="300" border="1" cellpadding="1" >
  52.    
  53.     <tr>
  54.       <td>Pepe</td>
  55.       <td>López</td>
  56.     </tr>
  57.     <tr>
  58.       <td>José</td>
  59.       <td>San Martín </td>
  60.     </tr>
  61.   </table>
  62.   </div>
  63. </form>
  64. </body>
  65. </html>
y este otro es mio
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6. var cadena = '';
  7. var largo_cadena = 0;
  8.  
  9. window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
  10.  
  11. function Resaltar(cadABuskar) {
  12. var caracteresInput = cadABuskar.length;
  13.  
  14.     if (caracteresInput == 2) {
  15.         document.getElementById('texto').innerHTML = cadena;
  16.         document.getElementById('terminos').style.border = '';
  17.  
  18.     } else if (caracteresInput >= 3) {
  19.  
  20. var rgEx = new RegExp(cadABuskar, 'g\i');
  21.  
  22.         if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
  23.                 var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
  24.                     document.getElementById('texto').innerHTML =  marca;
  25.             document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
  26.             } else {
  27.             document.getElementById('texto').innerHTML = cadena;
  28.             document.getElementById('terminos').style.border = 'solid #FF0000 1px';
  29.         }
  30.     }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <form method="post" action="" name="" autocomplete="off">
  36. Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
  37. </form>
  38. <div id="texto">
  39. <table width="300" border="1" cellpadding="1" >
  40.    
  41.     <tr>
  42.       <td>Pepe</td>
  43.       <td>López</td>
  44.     </tr>
  45.     <tr>
  46.       <td>José</td>
  47.       <td>San Martín </td>
  48.     </tr>
  49.   </table>
  50. </div>
  51. </body>
  52. </html>
Suerte
UNA PREGUNTA: YO TENGO UNA PAGINA WEB QUE ES UN PERIODICO DIGITAL(DIARIO), QUE TIENE UNA SECCIÓN EN DONDE SE PUBLICAN CLASIFICADOS. LOS AVISOS ESTAN EN TABLAS COMO LAS SIGUIENTES:
<div class="clasificados">
<table width=600 height=100 cellpadding=2 cellspacing=2 class="estilotabla">
<tr>
<td class="estilocelda">Fecha</td>
<td class="estilocelda">Automotor-Compra/Venta</td></tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td class="estilofila">Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
</table>
<table width=600 height=100 cellpadding=2 cellspacing=2 class="estilotabla">
<tr>
<td class="estilocelda">Fecha</td>
<td class="estilocelda">Inmuebles</td></tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td class="estilofila">Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
</table>
<table width=600 height=100 cellpadding=2 cellspacing=2 class="estilotabla">
<tr>
<td class="estilocelda">Fecha</td>
<td class="estilocelda">Empleos</td>
</tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td class="estilofila">Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
<tr>
<td class="estilocelda">&nbsp;</td>
<td>Este es un texto de lo que podría ser la parte de abajo de la tabla con el contenido
relacionado con este título.</td></tr>
</table>
</div>
UTILIZANDO CUALQUIERA DE LAS FUNCIONES QUE ME HAN MANDADO USTEDES;
PUEDO REALIZAR UNA BÚSQUEDA EN ESTAS TABLAS PONIENDO EN EL DIV QUE LAS CONTIENE UN Id: "texto"? Quizá resulte media obvia esta pregunta pero la verdad es que me había quedado con la duda y, por otra parte, a mi me enseñaron que no hay nada obvio en la vida.
Disculpen nuevamente mi intromisión.-
Saludos
  #12 (permalink)  
Antiguo 28/09/2010, 13:29
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

Has de insertar la tabla dentro del div con id tabla o texto. En el caso que te ocupa te recomiendo que uses el código de @Panino. Ya que el mio está mas pensado para texto plano

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;" />
  #13 (permalink)  
Antiguo 30/09/2010, 08:15
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
Respuesta: Función para buscar en web

Cita:
Iniciado por Adler Ver Mensaje
Hola

Este es de @panino
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>test</title>
  6. <script>
  7. String.prototype.preg_quote=function(){
  8.     p= /([:.\+*?[^\]$(){}=!<>|:)])/g;
  9.     return this.replace(p,"\\$1");
  10. }
  11. function buscar(cadena){
  12.        resetear();
  13.     if(!cadena.length)return;
  14.     var info3;
  15.     cadena=cadena.preg_quote();
  16.     var patron=new RegExp(cadena+'(?!\}\})','gim');
  17.     var espacio=/^\s$/;
  18.     var el=document.getElementById('tabla').getElementsByTagName('*');
  19.    for(var ii=0;ii<el.length;ii++){
  20.         if(el[ii].hasChildNodes && el[ii].nodeName.toLowerCase()!='title' && el[ii].nodeName.toLowerCase()!='script' && el[ii].nodeName.toLowerCase()!='meta' && el[ii].nodeName.toLowerCase()!='link' && el[ii].nodeName.toLowerCase()!='style'){
  21.             var tt=el[ii].childNodes;
  22.             for(var jj in tt){
  23.                 if(tt[jj].nodeType==3 && !espacio.test(tt[jj].nodeValue)){
  24.                     patron.lastIndex = 0;
  25.                     if(info3=patron.exec(tt[jj].nodeValue)){
  26.                         tt[jj].nodeValue=tt[jj].nodeValue.replace(patron,'{{'+tt[jj].nodeValue.substr(info3['index'],cadena.length)+'}}');
  27.                
  28.                     }
  29.                 }
  30.  
  31.             }        
  32.         }
  33.     }
  34.    document.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
  35.    
  36. }
  37. function resetear(){
  38.     document.getElementById('tabla').innerHTML=original;
  39. }
  40. window.onload=function(){
  41.     original=document.getElementById('tabla').innerHTML;
  42. }
  43. </script>
  44. </head>
  45.  
  46. <body>
  47. <form id="form1" name="form1" method="post" action="">
  48.   <input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
  49.   <br />
  50.   <div id="tabla">
  51.   <table width="300" border="1" cellpadding="1" >
  52.    
  53.     <tr>
  54.       <td>Pepe</td>
  55.       <td>López</td>
  56.     </tr>
  57.     <tr>
  58.       <td>José</td>
  59.       <td>San Martín </td>
  60.     </tr>
  61.   </table>
  62.   </div>
  63. </form>
  64. </body>
  65. </html>
y este otro es mio
Código Javascript:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
  3. <head>
  4. <meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
  5. <script type="text/javascript">
  6. var cadena = '';
  7. var largo_cadena = 0;
  8.  
  9. window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
  10.  
  11. function Resaltar(cadABuskar) {
  12. var caracteresInput = cadABuskar.length;
  13.  
  14.     if (caracteresInput == 2) {
  15.         document.getElementById('texto').innerHTML = cadena;
  16.         document.getElementById('terminos').style.border = '';
  17.  
  18.     } else if (caracteresInput >= 3) {
  19.  
  20. var rgEx = new RegExp(cadABuskar, 'g\i');
  21.  
  22.         if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
  23.                 var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
  24.                     document.getElementById('texto').innerHTML =  marca;
  25.             document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
  26.             } else {
  27.             document.getElementById('texto').innerHTML = cadena;
  28.             document.getElementById('terminos').style.border = 'solid #FF0000 1px';
  29.         }
  30.     }
  31. }
  32. </script>
  33. </head>
  34. <body>
  35. <form method="post" action="" name="" autocomplete="off">
  36. Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
  37. </form>
  38. <div id="texto">
  39. <table width="300" border="1" cellpadding="1" >
  40.    
  41.     <tr>
  42.       <td>Pepe</td>
  43.       <td>López</td>
  44.     </tr>
  45.     <tr>
  46.       <td>José</td>
  47.       <td>San Martín </td>
  48.     </tr>
  49.   </table>
  50. </div>
  51. </body>
  52. </html>
Suerte
Hola, una última cuastión que me gustaría transformar del código de @panino es que el campo del formulario en donde el usuario puede ingresar la cadena de caracetres a buscar, esta formulado con un onkeyup y me gustaría agregarle un button para que el usuario presione una vez haya terminado de redactar lel texto que quiere buscar.
Perdón mi ignorancia para no poder realizar esto yo misma pero, estuve intentando enteder el código estudiando mas afondo el javascript, pero no entiendo muy bien todavía lo de agregar o quietar nodos, asi es que no me animaba a modificar el código por mi misma ya que no sabía como insertar la función al button.-
Desde ya muchas gracias.-
Saludos
  #14 (permalink)  
Antiguo 30/09/2010, 12:22
Avatar de Adler
Colaborador
 
Fecha de Ingreso: diciembre-2006
Mensajes: 4.671
Antigüedad: 17 años, 3 meses
Puntos: 126
Respuesta: Función para buscar en web

Hola

No has de tocar el js solo el HTML
Cita:
<form id="form1" name="form1" method="post" action="">
<input name="key" type="text" id="key" />
<input type="button" onclick="buscar(document.getElementById('key').val ue)" value="Buscar" />
<br />
<div id="tabla">
<table width="300" border="1" cellpadding="1" >

<tr>
<td>Pepe</td>
<td>López</td>
</tr>
<tr>
<td>José</td>
<td>San Martín </td>
</tr>
</table>
</div>
</form>
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;" />
  #15 (permalink)  
Antiguo 30/09/2010, 14:22
 
Fecha de Ingreso: julio-2010
Mensajes: 38
Antigüedad: 13 años, 8 meses
Puntos: 0
De acuerdo Respuesta: Función para buscar en web

Cita:
Iniciado por Adler Ver Mensaje
Hola

No has de tocar el js solo el HTML

Suerte
Bueno, disculpen nuevamente el uso de su tiempo. Agradezco enormemente su ayuda y el código funciona a la perfección como todas las veces que me han ayudado, espero algún dia ayudar a otros de la forma en que ustedes lo hacen conmigo.-
Saludos

Etiquetas: Ninguno
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.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:41.