Vue 2中如何使用正则表达式格式化电话号码？

分步处理方案（覆盖全场景） #

先清理所有无关字符，再提取符合规则的有效内容，确保严格匹配需求：

// 1. 剔除所有非+、非数字的字符（空格、符号、字母、表情等）
const filtered = phoneNumber.replace(/[^+\d]/g, '');
// 2. 提取开头的合法内容：最多1个+，后面必须跟至少1个数字
const validMatch = filtered.match(/^[+]?\d+/);
// 3. 最终结果：有合法匹配则取结果，无则返回空字符串
const cleanedNumber = validMatch ? validMatch[0] : '';

this.$emit(`phoneEvent`, cleanedNumber);

正则与逻辑解释 #

1. 第一步的/[^+\d]/g：

   • [^+\d]匹配所有不是+也不是数字的字符
   • g表示全局替换，一次性删掉所有这类无关字符

2. 第二步的/^[+]?\d+/：

   • ^锚定字符串开头，确保从第一个字符开始验证
   • [+]?允许开头有最多一个+（?表示该字符可选）
   • \d+匹配至少一个连续数字（\d等价于0-9）
   • 整个正则只会匹配开头的合法片段，遇到非数字就停止

各类场景测试结果 #

原正则的问题分析 #

你写的/[^+][^\0-9]+/g存在3个核心问题：

1. [^+]匹配的是不是+的任意字符，完全漏掉了开头的多余+（比如+++++里的多个+）
2. [^\0-9]是错误写法，应该是[^0-9]（\0匹配的是空字符，不是数字范围的开头）
3. 正则逻辑是匹配“非+字符后面跟着非数字字符”，无法覆盖开头非法字符、纯+串等场景

内容的提问来源于stack exchange，提问作者Brentification