<!DOCTYPE html>
<body>
	<h1>Hello World</h1>
	<div>
			<label>digite o CPF / insert CPF:</label>
      <input id="CPFInput" maxlength="11" oninput="criaMascara('CPF')">
	</div>
  <div>
    <label>digite o Celular / insert phone number:</label>
    <input id="CelularInput" maxlength="11" oninput="criaMascara('Celular')">
  </div>
  <div>
    <label>digite o CEP / insert zip code:</label>
    <input id="CEPInput" maxlength="8" oninput="criaMascara('CEP')">
  </div>
  <div>
    <label>digite o número do processo (padrão CNJ):</label>
    <input id="CNJInput" maxlength="20" oninput="criaMascara('CNJ')">
  </div>
</body>
<script>
function criaMascara(mascaraInput) {
  const maximoInput = document.getElementById(`${mascaraInput}Input`).maxLength;
  let valorInput = document.getElementById(`${mascaraInput}Input`).value;
  let valorSemPonto = document.getElementById(`${mascaraInput}Input`).value.replace(/([^0-9])+/g, "");
  const mascaras = {
    CPF: valorInput.replace(/[^\d]/g, "").replace(/(\d{3})(\d{3})(\d{3})(\d{2})/, "$1.$2.$3-$4"),
    Celular: valorInput.replace(/[^\d]/g, "").replace(/^(\d{2})(\d{5})(\d{4})/, "($1) $2-$3"),
    CEP: valorInput.replace(/[^\d]/g, "").replace(/(\d{5})(\d{3})/, "$1-$2"),
    CNJ: valorInput.replace(/[^\d]/g, "").replace(/(\d{7})(\d{2})(\d{4})(\d{1})(\d{2})(\d{4})/, "$1-$2.$3.$4.$5.$6"),
  };

  valorInput.length === maximoInput ? document.getElementById(`${mascaraInput}Input`).value = mascaras[mascaraInput]
 : document.getElementById(`${mascaraInput}Input`).value = valorSemPonto;
};
</script>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.