前言

又是美好的早上，直到产品过来叫我去处理bug，我也是无奈，昨天才搞了30多个，又来，主要都是些小细节，难受啊，宝们。UI还原95%以上，哈哈哈。不过毕竟人家都找来了，那就处理一下吧。这次的问题就是要讲输入手机号的输入框限制只能输入数字，并且格式要是344格式，并且要输入的同时就格式化好显示给用户看。

分析

1. 用户输入,记作value
2. 格式化只保留数字
3. 格式为344格式
4. 把格式好的字符串，记作:finalFormatValue，回显到输入框

核心代码分享

只保留数字格式化

const fValue = value.replace(/[^\d]/g, '')

一行可以搞定，但是还是建议封装成一个函数用

344格式化

344格式化经历了两次迭代，首先呈现初始if-else版本

/**
 * @desc 格式化为344格式：xxxxxxxxxxx --> xxx xxxx xxxx
 **/
function format344(value: string | undefined) {
  if (!value) return '';
  const trimValue = value.replace(/\s/g,"");
  const length = trimValue.length;
  let res = '';

  if (length <= 3) {
    res = trimValue;
  } else if (length > 3 && length <= 7) {
    res = trimValue.substring(0, 3) + ' ' + trimValue.substring(3, 7);
  } else {
    res =
      trimValue.substring(0, 3) +
      ' ' +
      trimValue.substring(3, 7) +
      ' ' +
      trimValue.substring(7, 11);
  }
  return res;
}

后面想了想，能不能用正则来处理一下呢？结果我发现原子组真的是好用啊，very nice好用！！！马上呈上,hhh

/**
 * @desc 格式化为344格式：xxxxxxxxxxx --> xxx xxxx xxxx
 **/
function format344(value: string | undefined) {
  if (!value) return '';
  return value.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim();
}

这就是正则的魅力，哈哈哈

希望

希望这个对大家有所帮助，看到记得收藏，不然你后面要用找不到洛，哈哈哈。正则照亮你的美，又是美好的一天，除了加班，其他都是美好的。