JavaScript中的正则表达式之正向环视(正向断言)
正则表达式在前端页面中很多地方有被应用到,特别是表单的验证逻辑部分,像验证邮箱,手机号,网址等,以及格式化字符串。比如最近遇到一个需求如下:
输入: 15210790946
输出: 152 1079 0946
对11位的手机号从最后面一位数字开始每4位数字前就需要加一个空格
要写好一个正则表达式最重要的首先是要清楚的知道组成每一个正则表达式部分的含义,元字符是正则表达式的重要组成部分。
元字符
| 元字符 | 名称 | 匹配对象 |
|---|---|---|
| . | 点号 | 单个任意字符 |
| * | 星号 | 之前紧邻的字符出现0+次 |
| + | 加号 | 之前紧邻的字符出现1+次 |
| ? | 问号 | 之前紧邻的字符出现0或者1次 |
| [...] | 字符组 | 列出的任意一个字符 |
| [^...] | 排除型字符组 | 除列出的字符外任意一个字符 |
| (...) | 分组符 | 括号内的分为一组 |
| {n,m} | 匹配次数限制 | 之前紧邻的字符出现至少n次至多m次 |
| ^ | 脱字符 | 行的起始位置 |
| $ | 美元符 | 行的末尾位置 |
| | | 竖线 | 匹配任意分隔的表达式 |
| \< or \b | 单词分界符 | 单词左边界 |
| \> or \b | 单词分界符 | 单词右边界 |
| \1,\2 | 反向引用 | 分别存放匹配第一组括号,第二组括号文本内容 |
| (?:...) | 非捕获型分组 | 这个括号中匹配的内容不会被反向引用 |
| \w | 缩写 | 等价于[A-Za-z0-9_] |
| \W | 缩写 | 等价于[^A-Za-z0-9_] |
| \d | 缩写 | 等价于[0-9] |
| \D | 缩写 | 等价于[^0-9] |
| \s | 缩写 | 匹配一个空白字符，包括空格、制表符、换页符和换行符。1 |
| \S | 缩写 | 排除\s 2 |
| (?=...) | 正向环视 | 匹配前面(右边)是...的位置 |
| (?<=...) | 逆向环视 | 匹配后面是...的位置 |
完成需求
// 对手机号码参数进行调整,去除手机号码中非数字字符,然后对手机号码应用格式化正则规则
// (?=(?:\d{4})+$) 这个部分匹配以整数倍4个数字结尾的位置
// (\d) 这里用来匹配一个数字,即只有以整数倍4个数字结尾的位置前面还有一个数字的情况下才需要添加空格。
// 因JavaScript 不支持逆向环视(逆向断言) 所以不能用replace(/(?<=\d)(?=(?:\d{4})+$)/g,' ');
return (num + '').replace(/[^\d]/g, '').replace(/(\d)(?=(?:\d{4})+$)/g,'$1 ');
1. 等价于[\f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。 ↩
2. 等价于[^ \f\n\r\t\v\u00a0\u1680\u180e\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]。 ↩