Máscara de Boleto

Boleto

Função de Máscara:

export function maskPaymentSlip(payment_slip: string) {
  return payment_slip
    .replace(/\D/g, "")
    .replace(/(\d{33})(\d)/, "$1 $2")
    .replace(/(\d{32})(\d)/, "$1 $2")
    .replace(/(\d{26})(\d)/, "$1.$2")
    .replace(/(\d{21})(\d)/, "$1 $2")
    .replace(/(\d{15})(\d)/, "$1.$2")
    .replace(/(\d{10})(\d)/, "$1 $2")
    .replace(/(\d{5})(\d)/, "$1.$2")
    .slice(0, 54);
}

Exemplo:

import React from "react";

export function maskPaymentSlip(payment_slip: string) {
  return payment_slip
    .replace(/\D/g, "")
    .replace(/(\d{33})(\d)/, "$1 $2")
    .replace(/(\d{32})(\d)/, "$1 $2")
    .replace(/(\d{26})(\d)/, "$1.$2")
    .replace(/(\d{21})(\d)/, "$1 $2")
    .replace(/(\d{15})(\d)/, "$1.$2")
    .replace(/(\d{10})(\d)/, "$1 $2")
    .replace(/(\d{5})(\d)/, "$1.$2")
    .slice(0, 54);
}

export default function App() {
  const [paymentSlip, setPaymentSlip] = React.useState("");
  return (
    <div className="App">
      <input
        type="tel"
        placeholder="XXXXX.XXXXX XXXXX.XXXXXX XXXXX.XXXXXX X XXXXXXXXXXXXXXXX"
        value={paymentSlip}
        onChange={(e) => setPaymentSlip(maskPaymentSlip(e.target.value))}
      />
    </div>
  );
}

Observação:

Ao utilizar máscaras, use input com o type='tel', dessa forma o input abrirá o teclado numérico em dispositivos mobile e permitirá a escrita de caracteres especiais.

A função de máscara no exemplo acima já previne que o usuário digite letras quando não for permitido.