Cita:
Iniciado por Adler 
Hola
Este es de
@panino
Código Javascript
:
Ver original<!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>test</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.getElementById('tabla').getElementsByTagName('*');
for(var ii=0;ii<el.length;ii++){
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'){
var tt=el[ii].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.getElementById('tabla').innerHTML=document.getElementById('tabla').innerHTML.split('}}').join('</span>').split('{{').join('<span style="background-color: yellow">');
}
function resetear(){
document.getElementById('tabla').innerHTML=original;
}
window.onload=function(){
original=document.getElementById('tabla').innerHTML;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input name="key" type="text" id="key" onkeyup="buscar(this.value)" />
<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>
</body>
</html>
y este otro es mio
Código Javascript
:
Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"lang="es" xml:lang="es">
<head>
<meta name="http-equiv" content="Content-type: text/html; charset=UTF-8"/>
<script type="text/javascript">
var cadena = '';
var largo_cadena = 0;
window.onload = function() {cadena = document.getElementById('texto').innerHTML; largo_cadena = cadena.length;};
function Resaltar(cadABuskar) {
var caracteresInput = cadABuskar.length;
if (caracteresInput == 2) {
document.getElementById('texto').innerHTML = cadena;
document.getElementById('terminos').style.border = '';
} else if (caracteresInput >= 3) {
var rgEx = new RegExp(cadABuskar, 'g\i');
if (rgEx.test(cadena.substr(0,parseInt(largo_cadena)))) {
var marca = cadena.substr(0,parseInt(largo_cadena)).replace(rgEx, function(coincidencia){return '<span style=\"background-color:#9ACD32;color:#FFF;\">' + coincidencia + '</span>';});
document.getElementById('texto').innerHTML = marca;
document.getElementById('terminos').style.border = 'solid #9ACD32 1px';
} else {
document.getElementById('texto').innerHTML = cadena;
document.getElementById('terminos').style.border = 'solid #FF0000 1px';
}
}
}
</script>
</head>
<body>
<form method="post" action="" name="" autocomplete="off">
Buscar Terminos: <input type="text" value="" id="terminos" onkeyup="Resaltar(this.value);" />
</form>
<div id="texto">
<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>
</body>
</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