10

estou precisando formatar um mascara para CNPJ. Até ai esta feito, mas o padrão da empresa é formatar com espaço ao invés de ponto.

Este é o código que estou usando.

valorDoTextBox = valorDoTextBox.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3")

Alguém pode me explicar com funciona esta parte (/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3") para que possa tirar os ponto e colocar um espaço.

obrigado que poder me ajudar.

function MascaraParaLabel(valorDoTextBox) {

        if (valorDoTextBox.length <= 14) {  

            //Coloca ponto entre o segundo e o terceiro dígitos
            valorDoTextBox = valorDoTextBox.replace(/^(\d{2})(\d)/, "$1.$2")

            //Coloca ponto entre o quinto e o sexto dígitos
            valorDoTextBox = valorDoTextBox.replace(/^(\d{2})\.(\d{3})(\d)/, "$1 $2 $3")

            //Coloca uma barra entre o oitavo e o nono dígitos
            valorDoTextBox = valorDoTextBox.replace(/\.(\d{3})(\d)/, ".$1/$2")

            //Coloca um hífen depois do bloco de quatro dígitos
            valorDoTextBox = valorDoTextBox.replace(/(\d{4})(\d)/, "$1-$2") 
        } 
        return valorDoTextBox

Eu passo o valor do textbox sem formatar 14397462000109 e a label que fica na frente, mostra 14 397 462/0001-09 formatado na padrão da empresa.

3
  • Eu tire os ponto mas não funcionou , e fica tudo fora do lugar.
    – krispim
    30/07/2015 às 19:24
  • Eu passo o valor do textbox sem formatar 14397462000109 e a label que fica na frente, mostra 14 397 462/0001-09 formatado na padrão da empresa.
    – krispim
    30/07/2015 às 19:33
  • 1
    Usando este jsFiddle -> jsfiddle.net/jn8rpev0 podes explicar que passos não estão a funcionar e como queres que funcione?
    – Sergio
    30/07/2015 às 19:51

4 Respostas 4

21

Pra formatar de uma vez só, você pode fazer dessa forma:

"14397462000109".replace(/^(\d{2})(\d{3})(\d{3})(\d{4})(\d{2})/, "$1 $2 $3/$4-$5")

Vai resultar em 14 397 462/0001-09.

Agora, caso você utilize uma máscara de input na digitação, pode utilizar algo como:

$("input").on("keyup", function(e)
{
    $(this).val(
        $(this).val()
        .replace(/\D/g, '')
        .replace(/^(\d{2})(\d{3})?(\d{3})?(\d{4})?(\d{2})?/, "$1 $2 $3/$4-$5"));
});

Fiddle

A diferença na regex é que deixei do segundo grupo em diante como opcional, adicionando o ? depois de cada um. Não é uma máscara perfeita de input, mas você pode melhorar ela limitando outros caracteres etc.

3
  • DontVoteMeDown, obrigado pela ajudar, consegui resolver o me problema com a solução proposta por você e pelo Sergio. Muito obrigado mesmo pela ajuda.
    – krispim
    31/07/2015 às 12:40
  • @krispim Ok, que bom que deu certo. Se essa for a resposta correta você pode marca-la, ou se o Sergio contribuiu mais, peça pra ele postar uma resposta pra que você possa marca-la. 31/07/2015 às 13:00
  • Eu não fiz nada de especial, só criei um jsFiddle para ajudar a diagnosticar o problema :) . Por mim está resposta é válida e pode ser aceite se resolveu o problema. (cc @krispim)
    – Sergio
    31/07/2015 às 14:33
3

Eu fiz esse código, achei que ficou simples.

    document.getElementById('produto-1-cnpj').addEventListener('input', function (e) {
      var x = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,4})(\d{0,2})/);
      e.target.value = !x[2] ? x[1] : x[1] + '.' + x[2] + '.' + x[3] + '/' + x[4] + (x[5] ? '-' + x[5] : '');
    });
<input id="produto-1-cnpj" class="form-control rounded-form" type="text" placeholder="Insira o CNPJ da sua loja" maxlength="18"/>

-3

utilizando a função feita pelo @Dr.G, eu apenas adicionei um if que checa se os valores passados no input são sequências, assim evitamos números em sequência como cnpj. Na minha função está pegando todos os inputs com name=cnpj, ou seja, se vc tiver mais de um form com input de cnpj na página ele pega e aplica a máscara neles

var input_cnpj = document.querySelectorAll('[name="CNPJ"]');
      
input_cnpj.forEach(el => {
  el.addEventListener('input', (e) => {
    var x = e.target.value.replace(/\D/g, '').match(/(\d{0,2})(\d{0,3})(\d{0,3})(\d{0,4})(\d{0,2})/);
    e.target.value = !x[2] ? x[1] : x[1] + '.' + x[2] + '.' + x[3] + '/' + x[4] + (x[5] ? '-' + x[5] : '');
    console.log(e.target.value);
    if (e.target.value) {
      if (e.target.value == "00.000.000/0000-00" || 
        e.target.value == "11.111.111/1111-11" || 
        e.target.value == "22.222.222/2222-22" || 
        e.target.value == "33.333.333/3333-33" || 
        e.target.value == "44.444.444/4444-44" || 
        e.target.value == "55.555.555/5555-55" || 
        e.target.value == "66.666.666/6666-66" || 
        e.target.value == "77.777.777/7777-77" || 
        e.target.value == "88.888.888/8888-88" || 
        e.target.value == "99.999.999/9999-99") {
          // el.value = ''
          e.target.value = ''
      }
    }
  })
});
1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    18/03/2022 às 19:48
-5

@Sergio

Olá. Não tem variável global. Segue um exemplo, você pode fazer mudanças caso não lhe atenda. Onde tem "os pontos do cpf", coloquei "espaço".

obj = o; //variavel recebe o//
fun = f; //variavel recebe f//
setTimeout("execMascara()", 1);
}

function execMascara() {
    obj.value = fun(obj.value);
}

function cpf(cpf) {
    mascara = cpf.replace(/\D/g, "");
    mascara = cpf.replace(/(\d{3})(\d)/, "$1 $2");
    mascara = cpf.replace(/(\d{3})(\d)/, "$1 $2");
    mascara = cpf.replace(/(\d{3})(\d)/, "$1 $2");

    return mascara;
}

No formulário:

<label="cpf">
CPF: <input onkeypress="mascara(this, cpf)" maxlength="14"/>
</label>
2
  • André dei -1 pois acho essa resposta errada, pelo menos com problemas. Tem erros de sintaxe no JavaScript e variáveis globais. Repara que o nome da função é cpf e estás a usar o mesmo nome para uma variável dentro da função. Se corrigires dá-me um toque com "@Sergio" que tenho gosto em rever e votar de novo.
    – Sergio
    31/07/2015 às 20:41
  • @Sergio este é o código original. Creio que tenha sido(mal) copiado desse post. 3/08/2015 às 13:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .