这个例子非常简单，使用vanilla JS的“input”事件

const input = document.getElementById("credit-card-input");
input.addEventListener("input", () => input.value = formatNumber(input.value.replaceAll(" ", "")));

const formatNumber = (number) => number.split("").reduce((seed, next, index) => {
  if (index !== 0 && !(index % 4)) seed += " ";
  return seed + next;
}, "");

<input id="credit-card-input" type="text" maxlength=19 placeholder="0000 0000 0000 0000">

下面是我实现

const getMaskedValue = (value: string) => Array.from(value.replaceAll(/\D/g, '').matchAll(/(\d{0,4})(\d{0,4})(\d{0,4})(\d{0,4})/g))[0].slice(1, 5).join(' ').trim()

值应为字符串，它将只匹配数字值，任何其他字符将被删除
说明：

1. value.replaceAll将替换所有非数字值
   1.正则表达式将匹配4位数组
2. matchAll将返回regexp迭代器示例
3. array from将从此对象创建数组
   1.我们将用' '连接数组，并修剪周围的任何空格