Lista para telefones em javaScript

Nome|[]Idade|Profissão|Telefone|Cidade
Carla|32|Vendedora|0000-0001|?
Carlos|43|Confeiteiro|11 0000-0002|Sao Paulo
Sofia|11|Veterinaria|62 0000-0003|Goiânira
Lucrécia|66|Encanador|61 0000-0004|Brasília
Marco|80|Pedreiro|0000-0005|Caldas Novas

	Lista

Fonte:

<div id="dados" style="visibility: hidden;">Nome|[]Idade|Profissão|Telefone|Cidade<br />
Carla|32|Vendedora|0000-0001|?<br />
Carlos|43|Confeiteiro|11 0000-0002|Sao Paulo<br />
Sofia|11|Veterinaria|62 0000-0003|Goiânira<br />
Lucrécia|66|Encanador|61 0000-0004|Brasília<br />
Marco|80|Pedreiro|0000-0005|Caldas Novas<br />
</div><br />

<div id="modal" style="font-family: Arial, Helvetica, sans-serif; left: 10px; position: 
fixed; right: 10px; top: 10px; visibility: hidden;"><table id="fundo" 
style="border: 1px solid rgb(0, 51, 102); position: absolute; 
width: 100%;"><tbody><tr>    <td colspan="2" height="20" 
id="top_panel" style="border: 1px solid rgb(0, 51, 102); position: relative;" 
valign="top"><br /></td>   </tr>
<tr>    <td style="border: 1px solid rgb(0, 51, 102); position: relative;" 
valign="top" width="320"><div id="form_titulo" style="font-size: 10pt; 
font-weight: bold; left: 0px; padding: 5px; position: relative; right: 0px; 
top: 0px;"></div><div id="form_panel" style="bottom: 0px; font-size: 10pt; 
inset: 0px; left: 0px; overflow: scroll; position: relative; right: 0px; top: 0px; 
width: 100%;"></div><br /></td>    <td style="border: 1px solid rgb(0, 51, 102); 
position: relative;" valign="top"><div id="table_titulo" style="font-size: 10pt; 
font-weight: bold; left: 0px; padding: 5px; position: relative; right: 0px; top: 0px;"></div><div 
id="table_labels" style="font-size: 8pt; left: 0px; position: relative; right: 13px; top: 0px; 
width: 100%;"></div><div id="table_panel" style="bottom: 0px; font-size: 8pt; 
inset: 55px 0px 0px; left: 0px; overflow: scroll; position: absolute; right: 0px; 
top: 55px; width: 100%;"></div></td>   </tr>
<tr>    <td colspan="2" height="60" id="buttons_panel" 
style="border: 1px solid rgb(0, 51, 102); position: relative;" valign="top"> <br />
</td>   </tr>
</tbody></table></div><br />
<script>
 //======================================================================================================
 // Inicio
 //======================================================================================================
 dimensoes  = ["20%","20%","20%","20%","20%"]



//======================================================================================================
 // dados
 //======================================================================================================
 var data;

 //======================================================================================================
 // cores
 //======================================================================================================
 var c0 ="#000000";
 var c1 ="#001133";
 var c2 ="#113355";
 var c3 ="#226699";
 var c4 ="#3399cc";
 var c5 ="#77bbdd";
 var c6 ="#ccddee";
 var c7 ="#FFFFFF";

 //======================================================================================================
 // formularios, tabelas, paineis
 //======================================================================================================
 var fundo  = document.getElementById("fundo");
 var top_panel  = document.getElementById("top_panel");
 var buttons_panel = document.getElementById("buttons_panel");
 var table_panel   = document.getElementById("table_panel");
 var table_titulo  = document.getElementById("table_titulo");
 var table_labels  = document.getElementById("table_labels");
 var form_panel    = document.getElementById("form_panel");
 var form_titulo   = document.getElementById("form_titulo");

 //======================================================================================================
 // acerta cores
 //======================================================================================================
 top_panel.style.backgroundColor  = c5;
 buttons_panel.style.backgroundColor = c5;
 form_titulo.style.backgroundColor = c2;
 table_titulo.style.backgroundColor = c2;
 table_labels.style.backgroundColor = c3;
 table_panel.style.backgroundColor = c4;
 form_panel.style.backgroundColor = c4;
 fundo.style.backgroundColor  = c4;

 //======================================================================================================
 // botoes e regras de modo de visualizaçao e edicao
 //======================================================================================================
 var buttons_metadados = new Array();

 buttons_metadados[0] = new Object();
 buttons_metadados[0].value = "Localizar";
 buttons_metadados[0].action = "Localizar";
 buttons_metadados[0].array_visibilidade = [1,0];

 buttons_metadados[1] = new Object();
 buttons_metadados[1].value = "Limpar";
 buttons_metadados[1].action = "Limpar";
 buttons_metadados[1].array_visibilidade = [1,1];

 buttons_metadados[2] = new Object();
 buttons_metadados[2].value = "Fechar";
 buttons_metadados[2].action = "About_Source";
 buttons_metadados[2].array_visibilidade = [1,1];

 //======================================================================================================
 // troca todas as strings (sequência de caracteres) dadas por uma outra
 //======================================================================================================
 function replaceAll(str, find, replace) 
 {
    return str.replace(new RegExp(find, 'g'), replace);
 }

 //======================================================================================================
 // Fecha Botão
 //======================================================================================================
 function buttonClose() 
 {
   if(document.getElementById("modal").style.visibility=="visible")  
    document.getElementById("modal").style.visibility = "hidden"
   else 
    document.getElementById("modal").style.visibility="visible"
 }

 //======================================================================================================
 // encontra string dentro de outra com regex simples
 //======================================================================================================
 isContentInString = function( find, str )
 { 
    return  str.match(find) 
 }

 //======================================================================================================
 // converter string em dados
 //======================================================================================================
 stringToArray = function(str)
 {

str = replaceAll(str , "\\n", '\<br\>')
str = replaceAll(str , "\<br\/\>", '\<br\>')
str = replaceAll(str , "\<br\>", '\<br\>')
str = replaceAll(str , "\<br\>\<br\>", '\<br\>')


  var array_resposta = new Array();
  var array1 = str.split("\<br\>");

  //pega o nome dos campos:
  var Array_labels = array1[0].split("|");
  array_resposta.push(Array_labels);

  for(var i=1; i<array1.length-1; i++)
  {
    var array2 = array1[i].split("|");

    for(var j=0; j<Array_labels.length; j++)
    {
        if(Array_labels[j].charAt(0)=='[' && Array_labels[j].charAt(1)!=']')
        {

            var objRegex = /\[((([0-9]*)|([0-9]*\.[0-9]*))([r!%\*\+-^\/]|log)(([0-9]*)|([0-9]*\.[0-9]*))|(([0-9]*)|([0-9]*\.[0-9]*)))\]/ig ;
            var resp = ""+Array_labels[j].match(objRegex)

            resp = resp.substring(1,resp.length-1) 

            var objRegex2 = /([r!%\*\+\-^\/]|log)/ig ;
            n = resp.search(objRegex2)



            if(resp.charAt(n)=='%')
            {
                var r = resp.split('%')    
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a%b 
            }
            if(resp.charAt(n)=='!')
            {
                var r = resp.split('!')    
                resp = Number(array2[Number(r[0])])
                for(var k=resp-1; k>0; k--)
                resp= resp*k 
            }

            else if(resp.charAt(n)=='-')
            {
                var r = resp.split('-')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a-b 
            }

            else if(resp.charAt(n)=='+')
            {
                var r = resp.split('+')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a+b 
            }
            else if(resp.charAt(n)=='*')
            {
                var r = resp.split('*')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a*b 
            }
            else if(resp.charAt(n)=='/')
            {
                var r = resp.split('/')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= a/b 
            }
            else if(resp.charAt(n)=='^')
            {
                var r = resp.split('^')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= Math.pow(a,b)
            }
            else if(resp.charAt(n)=='r')
            {
                var r = resp.split('r')
                a = Number(array2[Number(r[0])])
                b = Number(array2[Number(r[1])])
                resp= Math.pow(a,1/b)
            }
        }

        else if(Array_labels[j].charAt(0)=='[' )
        {
            resp= Number(array2[j])
        }
        else
        {
            resp =array2[j] ;
        }
            
        array2[j]=resp
        
    }

       array_resposta.push(array2);
  }
  return array_resposta;
 }

 //======================================================================================================
 // converter dados em string
 //======================================================================================================
 dataToString = function(d)
 {
  resp=""
  for(var i=0; i<d.length; i++)
  {
   for(var j=0; j<d[i].length; j++)
   {
    if(j<d[i].length-1)
     resp+=d[i][j]+"|";
    else
     resp+=d[i][j]+"\<br\>";
   }
  }
  return resp;
 }

 //======================================================================================================
 // excluindo colunas
 //======================================================================================================
 dataToString2 = function(d)
 {
  var d_novos = [0, 2, 4, 5, 6, 9, 10, 12, 14, 15]
  var resp=""
  for(var i=0; i<d.length; i++)
  {
   for(var j=0; j<d_novos.length; j++)
   {
    if(j<d_novos.length-1)
     resp+=d[i][d_novos[j]]+"|";
    else
     resp+=d[i][d_novos[j]]+"\<br\>";
   }
  }
  return resp;
 }

 //======================================================================================================
 // executa função pelo nome
 //======================================================================================================
 function executeFunctionByName(functionName, context /*, args */)
 {
  var args = Array.prototype.slice.call(arguments, 2);
 
  var namespaces = functionName.split(".");
  var func = namespaces.pop();
  for(var i = 0; i < namespaces.length; i++)
  {
   context = context[namespaces[i]];
  }
  return context[func].apply(context, args);
 }

 //======================================================================================================
 // cria botões
 //======================================================================================================
 createButtons = function(metadados, buttons_panel)
 {
  for(var i=0; i<metadados.length; i++)
  {
   var btn = document.createElement("input"); 
   btn.type = "button"
   btn.style.margin = 3
   buttons_panel.appendChild(btn)
   btn.action = metadados[i].action
   btn.onclick = function(){executeFunctionByName(this.action, window)}
   btn.array_visibilidade = metadados[i].array_visibilidade
   btn.value = metadados[i].value
  }
 }

 //======================================================================================================
 // cria labels
 //======================================================================================================
 createLabels = function(labels, dimensoes)
 {
  var t=document.createElement("table");

  t.style.top                 = "0px"; 
  t.style.rigth               = "0px"; 
  t.style.width="100%"; 

  var row = t.insertRow(0);
  var k=0;
  for(var i=0; i<labels.length; i++)
  {
   k=i;
           var col    = row.insertCell(i);
   col.style.width   = dimensoes[i];

    if(labels[i].charAt(0)=='[')
    label = "&nbsp;"+labels[i].split("]")[1]
    else
    label = "&nbsp;"+labels[i]

   col.innerHTML   = label; 

   col.style.border  = "1px solid "+c1;
   col.style.backgroundColor = c5;
   col.style.fontFamily  = "Arial,Helvetica,sans-serif";
   col.style.fontSize  = "8pt";
   col.style.height  = 25;
   col.style.color   = c0;
  }

  col = row.insertCell(k+1);  
  col.innerHTML=" ";
  col.style.width="16px"; 
  col.style.border="1px solid "+c3;
  col.style.backgroundColor= c4;
  col.style.fontFamily="Arial,Helvetica,sans-serif";
  col.style.fontSize="8pt";
  return t;
 }

 //======================================================================================================
 // cria table
 //======================================================================================================
 createTable = function(titulo, labels, dimensoes)
 {
  table_titulo.innerHTML=titulo;
  table_titulo.style.color=c7  


  document.getElementById("table_labels").appendChild( createLabels(labels, dimensoes)  )

  var tableDados = document.createElement("table");

  tableDados.style.position            ="absolute";  
  tableDados.style.top                 = "0px"; 

  tableDados.cellSpacing="0px";
  tableDados.cellPadding="0px";
  tableDados.style.width="100%";
  tableDados.style.fontFamily="Arial,Helvetica,sans-serif";
  tableDados.style.fontSize="8pt";

  table_panel.appendChild( tableDados );

  tableDados.Limpar = function() 
  {
   for(var i=0; i<data[0].length; i++)
   {

    if(data[0][i].charAt(0)=='[')
    {
     document.getElementById("input_0_"+i).value="";
     document.getElementById("input_0_"+i+"_A").value="";
     document.getElementById("input_0_"+i+"_B").value="";
    }
    else if(data[0][i].charAt(0)!='[')
    {

    document.getElementById("input_0_"+i).value="";
    document.getElementById("input_0_"+i+"_x").checked=false;
    }

   }
   tableDados.deselecionar();
  }
  
  tableDados.getSelectedRow = function()
  {
   return tableDados.selected_row;
  }

  tableDados.getIntColunName=function(str)
  {
   var j = tableTitulos.getElementsByTagName('tr')[0].getElementsByTagName('td');
   for(var i=0;i<j.length;i++)
   {
    if(j[i]==str)
    return i;
   }
  }
  
  tableDados.removeAll=function()  
  {
   for(var y=0; y<tableDados.getElementsByTagName('tr').length; y++)
   {
    for(var x=0; x<tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td').length;x++)
    {
     tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].innerHTML="&nbsp;";
     tableDados.getElementsByTagName('tr')[y].getElementsByTagName('td')[x].style.backgroundColor=c4;
    }
   }
  }

  tableDados.deselecionar=function()
  {
   TRs=this.getElementsByTagName('tr');
   for(var h=0;h<TRs.length;h++)
   {
    TDs=TRs[h].getElementsByTagName('td');
    for(var h2=0; h2<TDs.length; h2++)
    {
     if(TDs[0].innerHTML=="Totais")
     {
      TDs[h2].style.backgroundColor=c6;
     }
     else 
     {
      TDs[h2].style.backgroundColor=c7;
     }
    }
   }
  }


tableDados.setData=function(data)
{
    var qt = this.rows.length
    while(qt>0)
    {
        this.deleteRow(qt-1);
        qt = this.rows.length
    }


    //====================================================
    // 
    //====================================================
    for(var y=0; y<data.length-1; y++)
    {
        var row=tableDados.insertRow(y);
        for(var i=0; i<data[0].length; i++)
        {
            var col=row.insertCell(i);
            col.innerHTML="&nbsp;";
            col.style.width=dimensoes[i];
            col.style.padding="2px";
            col.style.borderBottom="1px solid "+c2;
            col.style.borderLeft="1px solid "+c2;
            col.style.backgroundColor=c4;
   
            //=========================================================
            // Click Linha
            //=========================================================
            col.onclick=function()
            { 
                tableDados.deselecionar();
                tableDados.selected_row = this.line;
                for(var h=0; h<data[0].length; h++)
                {
                    //para todas as colunas mostro o conteúdo nas propriedades
                    //if(data[0][h].charAt(0)=='[')
                    document.getElementById("input_0_"+h).value = this.parentNode.getElementsByTagName('td')[h].innerHTML
                    
                        
                    //para todas as colunas mudo a cor do fundo da linha selecionada
                    this.parentNode.getElementsByTagName('td')[h].style.backgroundColor = c5;
                }
            }
        }
    } 

    for(var y=1; y<data.length; y++)
    {
        for(var x=0; x<data[y].length; x++)
        {
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].line=y-1
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].innerHTML=data[y][x];
            tableDados.getElementsByTagName('tr')[y-1].getElementsByTagName('td')[x].style.backgroundColor=c7;
        }
    }

    //====================================================
    // totais
    //====================================================
    var row=tableDados.insertRow(data.length-1); 
    for(var i=0; i<data[0].length; i++)
    {
        var col=row.insertCell(i);
        col.style.width=dimensoes[i];
        col.style.padding="2px";
        col.style.borderBottom="1px solid "+c2;
        col.style.borderLeft="1px solid "+c2;
        col.style.fontWeight="bold";

        if(i==0)
        {
            col.innerHTML="Totais" ;
        }
        else if(data[0][i].charAt(0)=='[')
        {
            resp=0;
            for(var q=1; q<data.length; q++)
            {
                resp+=data[q][i]
            }

            if(resp>0)
                col.style.color="000066";
            else
                col.style.color="cc0000";

            col.innerHTML=resp ;
        }
        else
        {
            col.style.textAlign = "center";
            col.innerHTML="-" ;
        }
    }


    tableDados.deselecionar();  
}



  //======================================================================================================
  // Localizar 
  //======================================================================================================
  tableDados.Localizar = function() 
  {
   var str_data = document.getElementById('dados').innerHTML;
   var data = stringToArray(str_data)

   var new_data = new Array(); 

   //pega nome das colunas
   new_data[0] = data[0]

   //pega conteudo dos dados
   for(var y=1; y<data.length; y++)
   {
    var add = true;

    zero_data = new Array()

    for(var i=0; i<new_data[0].length; i++)
    {
     var v = document.getElementById("input_0_"+i).value
     if( v!="" && new_data[0][i].charAt(0)=='[' )
     {
      if( Number(data[y][i]) == Number(v) )
      {
       zero_data.push(data[y][i])
      }
      else
      {
       add=false;
       i = new_data[0].length
      }  
     }
     else
     {
      if(new_data[0][i].charAt(0)=='[')
      { 
       var v1 = document.getElementById("input_0_"+i+"_A").value
       var v2 = document.getElementById("input_0_"+i+"_B").value
 
       if(v1=="" && v2=="")
       {
        zero_data.push(data[y][i])     
       }
       else if(v1!="" && v2=="")
       {
        if( Number(v1) < Number(data[y][i]) ) 
        {
         zero_data.push(data[y][i]) 
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
       else if(v1=="" && v2!="")
       {
        if( Number(data[y][i]) < Number(v2) ) 
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
       else if( v1!="" && v2!="" )
       {
        if( Number(v1) < Number(data[y][i]) && Number(data[y][i]) < Number(v2) ) 
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }
       }
      }
      else
      {
       v1 = document.getElementById("input_0_"+i).value

       if(!document.getElementById("input_0_"+i+"_x").checked)
       {

        v1 = v1.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        v2 = data[y][i].normalize("NFD").replace(/[\u0300-\u036f]/g, "")
        reg = new RegExp(v1, "i")
         if(isContentInString( reg, v2 )!=null && isContentInString( reg, v2 ))
         {
          zero_data.push(data[y][i])
         }
         else
         {
          add=false;
          i = new_data[0].length
         }
       }
       else
       {
        if( v1!="" && data[y][i].toUpperCase() == v1.toUpperCase() )
        {
         zero_data.push(data[y][i])
        }
        else if(v1=="")
        {
         zero_data.push(data[y][i])
        }
        else
        {
         add=false;
         i = new_data[0].length
        }

       }
      }
     }
    }
    if(add)
    {
     new_data.push(zero_data)
    }
   }
   tableDados.removeAll()
   tableDados.setData(new_data)
  }
  return tableDados;
 }




 //======================================================================================================
 // cria form
 //======================================================================================================
 createForm = function(titulo, labels)
 {
  form_titulo.innerHTML=titulo;
  form_titulo.style.color=c7

  for(var i=0; i<labels.length; i++)
  {
   if(labels[i].charAt(0)=='[')
   {

    var campo =document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";

    label = labels[i].split("]")[1]
    campo.innerHTML="<span id='label_"+0+"_"+i+"'>"+ label +"</span> = <input type='text' id='input_"+0+"_"+i+"' style='position:absolute; font-Size:8pt; background-color:#FFFFFF; left:90px; width:90px;'></BR>"
    form_panel.appendChild(campo);

    var campo=document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";
    campo.innerHTML="Ou entre:<input type='text' id='input_"+0+"_"+i+"_A' style='position:absolute; font-Size:8pt; left:90px; width:90px; background-color:#DDDDDD;'> <input type='text' id='input_"+0+"_"+i+"_B' style='position:absolute; font-Size:8pt; left:200px; width:90px; background-color:#DDDDDD;'></BR></BR>"
    form_panel.appendChild(campo);
   }

   else
   {
    var campo=document.createElement("div");
    campo.style.padding=5
    campo.style.background=c6
    campo.style.fontSize="8pt";
    campo.innerHTML="<span id='label_"+0+"_"+i+"'>"+labels[i]+"</span>:<input type='text' id='input_"+0+"_"+i+"' style='position:absolute; font-Size:8pt; left:90px; width:90px;background-color:#FFFFFF;'> <span style='position:absolute; font-Size:8pt; left:200px; '>Busca exata?</span><input type='checkbox' id='input_"+0+"_"+i+"_x' style='position:absolute; font-Size:8pt; left:270px; width:20px;'></BR></BR>"
    form_panel.appendChild(campo);
   } 
  }
 }


//======================================================================================================
// eventos de botões
//======================================================================================================
Localizar = function()
{
    table.Localizar()
}

Limpar = function()
{
    table.Limpar()
}

About_Source = function()
{
    document.getElementById("modal").style.visibility = "hidden"
    alert("Produzido por Luiz Augusto Prado\nFaça uma contribuição para 
mais novidades.\nContato:\ntivideotutoriais.blogspot.com.br")
}


var str_dados = document.getElementById('dados').innerHTML;

data = stringToArray(str_dados)
//ou document.getElementById('dados').innerHTML = dataToString( data )
//alert( dataToString( data ) )
//alert( str_dados)

createButtons(buttons_metadados, buttons_panel) 
createForm("Buscar por", data[0]) 
table = createTable("Lista", data[0], dimensoes) 
table.setData(data)

//document.getElementById("dados").value = dataToString2(data)
</script>
<button onclick="buttonClose()">Abrir</button>