在输入手机号时实现按3-4-4格式自增空格（JS）

在手机号码中按照3-4-4的格式添加空格是常见的业务需求，但是没有搜索到现成能用的方法，在此记录一下自己的实现；

整理需求如下：

1. 在输入第四个数字的时候，将1231转换为123 1；
2. 123 1在由第四个数字退格的时候，将123转换为123（删除多余空格）；
3. 在输入第8个数字时与由第8个数字退格时，逻辑同1、2；

监听输入框的input事件，绑定如下方法：

function onPhoneInput() {
  const { userInfo } = _this; // 获取到存有用户手机号码信息的对象
  if (userInfo.phone.length === 4) {
    // 加入trim()以应对退格情况
    userInfo.phone = userInfo.phone.replace(/^(\d{3})(\d?)$/, '$1 $2').trim();
  } else if (userInfo.phone.length === 9) {
    userInfo.phone = userInfo.phone.replace(/^(\d{3})\s(\d{4})(\d?)$/, '$1 $2 $3').trim();
  } else if (userInfo.phone.length === 11) {
    // 直接复制粘贴手机号码的情况
    userInfo.phone = userInfo.phone.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1 $2 $3').trim();
  }
}

但是目前的解决方案依然是不完美的，如果从中间进行数字的删减，还是会产生一些不如意的效果，如果监听从中间删减号码的动作，在完成正则替换后，光标的焦点将会被移动到最后；

如有一个正则能搞定的办法请赐教，不胜感激。