CPF and CNPJ generator with JavaScript
Tags: javascript, generator, cpf, cnpj
Published: 2020-10-31 02:12:12

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/gerador-de-cpf-e-cnpj-com-javascript-408b751f3afc)

When we are going to make a registration system at some point we end up needing a CPF or CNPJ number to validate the data, and today we have several tools that generate numbers for us, but the cool thing is to have our tool, so we will create one using HTML and JS.

## Code

First we will create the interface, we will do something simple, using only HTML.

```html
<h1>Gerador de CPF E CNPJ válidos</h1>
<form name="form_main">
  <label for="numero">Número:</label> 
  <input name="numero" id="numero" size="20" type="text" /><br />
  Tipo:
  <input name="tipo" value="cpf" id="cpf" checked="checked" type="radio"> 
  <label for="cpf">CPF</label>
  <input name="tipo" value="cnpj" id="cnpj" type="radio" /> 
  <label for="cnpj">CNPJ</label>
  <input name="mascara" value="mascara" id="mascara" type="checkbox"> 
  <label for="mascara">Máscara</label><br /><br />
  <input name="button" value="Gerar" onclick="gera()" type="button">
</form>
```

In the html structure, we have an `input` that will display the generated values, below we have the types of numbers to be generated, `CPF` or `CNPJ`, and we have a `checkbox` that defines whether the generated number has a mask or not.

Now let’s start the JavaScript part.

```javascript
let create_array = (total, numero) => Array.from(Array(total), () => number_random(numero));
let number_random = (number) => (Math.round(Math.random() * number));
let mod = (dividendo, divisor) => Math.round(dividendo - (Math.floor(dividendo / divisor) * divisor));

function gera() {
  document.form_main.numero.value = (document.form_main.tipo[0].checked) ? cpf() : cnpj();
}
```

In this part we have the auxiliary functions:
* **create_array** = Creates an array with the size of the `total` variable and the random values with a maximum number equal to the variable `numero`;
* **number_random** = Creates a random number of at most the value of variable `number`;
* **mod** = Returns the module of the `dividendo` and `divisor`;
* **gera** = Calls the function to generate `CPF` or `CNPJ` depending on the selected item;

```javascript
function cpf() {
  let total_array = 9;
  let n = 9;
  let [n1, n2, n3, n4, n5, n6, n7, n8, n9] = create_array(total_array, n);

  let d1 = n9 * 2 + n8 * 3 + n7 * 4 + n6 * 5 + n5 * 6 + n4 * 7 + n3 * 8 + n2 * 9 + n1 * 10;
  d1 = 11 - (mod(d1, 11));
  if (d1 >= 10) d1 = 0;

  let d2 = d1 * 2 + n9 * 3 + n8 * 4 + n7 * 5 + n6 * 6 + n5 * 7 + n4 * 8 + n3 * 9 + n2 * 10 + n1 * 11;
  d2 = 11 - (mod(d2, 11));
  if (d2 >= 10) d2 = 0;

  if (document.form_main.mascara.checked)
    return `${n1}${n2}${n3}.${n4}${n5}${n6}.${n7}${n8}${n9}-${d1}${d2}`;
  else
    return `${n1}${n2}${n3}${n4}${n5}${n6}${n7}${n8}${n9}${d1}${d2}`;
}
```

Here we have the `CPF` function, this function generates the CPF numbers, below is the step by step:

1. First, the variables are defined, `total_array`(this defines the size of the array), `n`(this defines the maximum limit of the generated number);
2. Then the variables `n1...n9` are removed from the array;
3. Then the variable `d1`(first check digit) is created, this variable is the beginning of the CPF generator algorithm, in which all values ​​are taken and multiplied by 2 to 10 (`n9 * 2 + ... + n1 * 10`);
4. After that, the value of `d1` is rewritten with the return value of `mod-11`;
5. If the result of the previous operation is greater than or equal to 10 then the check digit is `0`;
6. For `d2`(second check digit) the procedure is similar to d1, but now it starts from `d1`, (`d1 * 2 + n9 * 3 + ... + n1 * 11`);
7. After that the value of `d2` is rewritten with the return value of `mod-11`;
8. If the result of the previous operation is greater than or equal to 10 then the check digit is `0`;
9. Finally, it is checked whether the mask option is activated or not and returns the generated value;

```javascript
function cnpj() {
  let total_array = 8;
  let n = 9;
  let [n1, n2, n3, n4, n5, n6, n7, n8] = create_array(total_array, n);
  let n9 = 0;
  let n10 = 0;
  let n11 = 0;
  let n12 = 1;

  let d1 = n12 * 2 + n11 * 3 + n10 * 4 + n9 * 5 + n8 * 6 + n7 * 7 + n6 * 8 + n5 * 9 + n4 * 2 + n3 * 3 + n2 * 4 + n1 * 5;
  d1 = 11 - (mod(d1, 11));
  if (d1 >= 10) d1 = 0;

  let d2 = d1 * 2 + n12 * 3 + n11 * 4 + n10 * 5 + n9 * 6 + n8 * 7 + n7 * 8 + n6 * 9 + n5 * 2 + n4 * 3 + n3 * 4 + n2 * 5 + n1 * 6;
  d2 = 11 - (mod(d2, 11));
  if (d2 >= 10) d2 = 0;

  if (document.form_main.mascara.checked)
    return `${n1}${n2}.${n3}${n4}${n5}.${n6}${n7}${n8}/${n9}${n10}${n11}${n12}-${d1}${d2}`;
  else
    return `${n1}${n2}${n3}${n4}${n5}${n6}${n7}${n8}${n9}${n10}${n11}${n12}${d1}${d2}`;
}
```

Here we have the `CNPJ` function, this function generates the CNPJ numbers, below is the step by step:

1. First, the variables are defined, `total_array`(this defines the size of the array), `n`(this defines the maximum limit of the generated number);
2. Then the variables `n1...n8` are removed from the array;
3. Variables `n9...n12` represent the branch or matrix block for CNPJ `0001`;
4. Then the variable `d1`(first check digit) is created, this variable is the beginning of the CNPJ generator algorithm, it takes all the values ​​and multiplies from 2 to 9 and then repeats from 2 until the last (`n12 * 2 + ... + n5 * 9 + n4 * 2 + ... + n1 * 5`);
5. After that, the value of `d1` is rewritten with the return value of `mod-11`;
6. If the result of the previous operation is greater than or equal to 10 then the check digit is `0`;
7. For `d2`(second check digit) the procedure is similar to d1, but now it starts from `d1`, (`d1 * 2 + n12 * 3 + ... + n6 * 9 + n5 * 2 + ... + n1 * 6`);
8. After that the value of `d2` is rewritten with the return value of `mod-11`;
9. If the result of the previous operation is greater than or equal to 10 then the check digit is `0`;
10. Finally, it is checked whether the mask option is activated or not and returns the generated value;

ready as simple as that.

## Demo

See the complete project working below.

{% codepen https://codepen.io/WalterNascimento/pen/xxVRKgm %}

## Youtube

If you prefer to watch, I see the development on youtube (video in PT-BR).

{% youtube RC6qFlXxsio %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊