Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

RegExp para CPF

Referente ao curso Expressões regulares: capturando textos de forma mágica

por Leandro Soares Ribeiro
| 126.9k xp | 149 posts

Srs, boa tade.

Estou incluindo os ( . e - ) no momento em que o usuário digita o cpf na tela. No final da digitação não consigo incluir o '-' ele inclui um ponto ou nada. O código é simples que conseguir ajuda eu agradeço.

Obrigado.

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>    
    <form>
      <label>Phone</label>    
      <bbr title="Informe apenas os numeros">
        <input type="text" name="cpf" id="cpf"
               minlength="14" maxlength="14"
                 onkeyup="mask(this)" >                
      </bbr>
      <button type="submit">Enviar</button>    
    </form>                
  </body>
</html>
<script type="text/javascript">

function mask(cpf)
{ 
  let $ = document.getElementById.bind(document);
  $('cpf').value = setMask($('cpf').value);
}

function setMask(cpf){   
  //cpf = cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, '$1.$2.$3-$4');
  cpf = cpf.replace(/(\d{3})/g, '$1');
  cpf = cpf.replace(/(\d{3})(\d{3})/g, '$1.$2');
  cpf = cpf.replace(/(\d{3})(\d{3})(\d{3})/g, '$1$2.$3');
  cpf = cpf.replace(/(\d{3})(\d{3})(\d{3})(\d{2})/g, '$1.$2.$3-$4');
  return cpf;
}

</script>
3 respostas
solução!
por Leandro Meili
| 355k xp | 66 posts
Engenheiro de Dados

Pode não ser a solução mais elegante, mas resolve! Limpei os caracteres não númericos toda vez que a função é chamada (assim ela só aceita números como input) e usei alguma condicionais para acertar a colocação do ponto separador. \d{1,3} auxilia a colocar o ponto entre os blocos incompletos.

function setMask(cpf){   

  var num = cpf.replace(/[^\d]/g, ''); //remove todos os caracteres não numéricos
  var len = num.length; //guarda o número de digitos até o momento

  if(len <= 6){
    cpf = num.replace(/(\d{3})(\d{1,3})/g, '$1.$2');  
  }else if(len <= 9){
    cpf = num.replace(/(\d{3})(\d{3})(\d{1,3})/g, '$1.$2.$3');
  }else{
    cpf = num.replace(/(\d{3})(\d{3})(\d{3})(\d{1,2})/g, "$1.$2.$3-$4");
  }
  return cpf;
}
por Leandro Soares Ribeiro
| 126.9k xp | 149 posts

Oi Leandro. Show. Obrigado pela dica.

por Leandro Soares Ribeiro
| 126.9k xp | 149 posts

Pessoa, bom dia!

Depois de muita pesquisa e teste, consegui chegar em uma outra forma de aplicar o a expressão regular sem uso de 'if'

<!DOCTYPE html>
<html>
  <head>
    <title></title>
  </head>
  <body>
    <form>
      <div>
        <label>Cpf</label>
        <input type="text" name="cpf" 
               id="cpf" onkeyup="setMask(this)"
               maxlength="14">               
      </div>  
    </form>  
  </body>
</html>
<script type="text/javascript">
  function setMask(inputCpf)
  {
    var cpf = inputCpf;

    setTimeout("aplicar()",250);
  }  

  function aplicar()
  {
    cpf.value = mask(cpf.value);  
  }

  function mask(cpf)
  {
    cpf = cpf.replace(/\D/g, "");    
    cpf = cpf.replace(/^(\d{3})/g, "$1.");
    cpf = cpf.replace(/(\d{3})(\d{3})/g, "$1.$2-");        
    return cpf;
  }
</script>