Criar máscaras em campos de texto é algo bastante útil em diferentes contextos, tais como filtrar o que o usuário digitará nos campus ou aplicar determinados formatos aos dados que serão exibidos.

Há várias ferramentas disponíveis para auxiliar nessa tarefa, muitas utilizando a linguagem JavaScript. Ela possui uma método chamado replace, que substitue um valor por outro dentro de uma string.
Por padrão, o método faz a substituição apenas ao encontrar a primeira combinação. Mas é possível utilizar expressão regular para realizar essa tarefa de outras formas. Você pode encontrar exemplos de uso desse e de outros métodos em W3Schools.

A seguir, veja um exemplo de função que você pode adaptar às diversas situações que você pode se deparar durante o desenvolvimento dos seus trabalhos.

<div class="alert alert-light" id="addMaskJs"></div>
<script>
   function maskJs(value, pattern) {
      let i = 0;
      const v = value.toString();
      return pattern.replace(/#/g, () => v[i++] || '');
   };
   const formatado = maskJs('00123456789', '(##) #####-####');
   document.getElementById('addMaskJs').innerHTML = formatado;
</script>

Resultado:

Melhorando o exemplo anterior, podemos aplicar a função a um campo de texto e restringir para que somente números possam ser inseridos. Também é possível, é claro, utilizar os atributos do HTML 5, tais como maxlength para delimitar a quantidade de caracteres inseridos no campo.

<input type="cpf" maxlength="14" id="cpf" name="cpf" onkeypress="aplicar(cpf.value)">
<script>
   function maskJs(value, pattern) {
      let i = 0;
      let v = value.toString();
      v = v.replace(/\D/g, '');
      return pattern.replace(/#/g, () => v[i++] || '');
   };

   function aplicar(value) {
      const formatado= maskJs(value, '###.###.###-##');
      document.getElementById('cpf').value = formatado;
    }
</script>

Insira valores e teste o campo:

Legal, né?

Veja mais em:
– https://www.w3schools.com/js/js_string_methods.asp
– https://tableless.com.br/mascaras-javascript-em-campos-de-formulario/
– https://www.instagram.com/p/B2aJBhYng3p/