整数不能小于0的正则表达式_前端使用正则表达式的常见场景（2）

文章内容整理自王峰老师的PPT。

常见场景一：正则与数值

1. 数值的判断

/[0-9]+/

[] 括起来的部分叫字符集；
使用连字符-表示指定字符的范围(如果想匹配连字符可以进行转义，或挨着方括号放置）；0-9表示匹配从0-9的数字字符（常见的还有a-z匹配小写字母，u4e00-u9fa5匹配汉字等）；
如果只是匹配数字还可以使用d
+ 为限字符，匹配一个或多个

这个正则的缺点：

不是全字符匹配，存在误判

const 

/^d+$/

这个表达式，将字符集缩写成了d，前后加了定位符

^ 匹配字符串的开始位置。当结合m修饰符时，匹配某一行的开始位置
$ 匹配字符串的结束位置。当结合m修饰符时，匹配某一行的结束位置
常见的定位符还有 ：
b 匹配一个单词的边界，也就是字与空格间的位置
B 非单词边界匹配

const 

这个正则表达式的缺点：

不能匹配带符号的数值，如+1，-2

不能匹配小数，如3.1415926

/^[+-]?d+(.d+)?$/

()，圆括号内是一个子表达式，当圆括号不带任何修饰符时，表示同时创建一个捕获组
?，在正则表达式中有多种含义，作为限定符时，表示匹配0个或1个
.，.可以匹配除换行符之外的任意字符，结合修饰符s可以匹配包括换行符在内的任意字符

PS：想了解更多修饰符相关，可查看正则表达式修饰符

const 

这个表达式的缺点：

不能匹配无整数部分的小数，如.123

捕获组会带来额外的开销

/^[+-]?(?:d*.)?d+$/

这个正则表达式中上个的区别是，上次是把小数点和小数部分放在括号里的，这次把整数部分和小数点放在括号里。

(?:)，创建一个非捕获组
*，限定符，匹配0个或多个

const 

这个表达式的缺点：

不能匹配无小数部分的数值，如2.

不能匹配科学计数法，如1e2,3e-1,-2.e+4

完整的数值正则

CSS Syntax Module Level 3​drafts.csswg.org

下面是一个完整的CSS数值token，在javascript需要多考虑一种情况，整数后边带小数点和科学计数法的表示在js中是合法的。

+'2.'; //2
+'2.e1'; // 20

分成正负符号两个分支

表示分成正负符号两个分支

表示分成整数+小数点+整数；整数；小数点+整数三个分支

表示分成有e部分和无e部分两个分支，其中有e时又往下分为小写e和大写E两个分支，分为正负符号两个分支，整数。

/^[+-]?(?:d+.?|d*.d+)(?:e[+-]?d+)?$/i

|，用来创建分支，当位于圆括号内时，表示子表达式的分支条件，当位于圆括号外时，表示整个正则表达式的分支条件
i，修饰符表示匹配时忽略大小定

上面这个表达式还有没有缺点呢？

实操

1. 下面我们来实现一个函数，功能如下：

function 

函数如何实现才能输入想要的结果呢？

const 

/[+-]?(?:d*.)?d+(?:e[+-]?d+)?(?=px|s|$)/gi;

这个正则表达式跟之前的表达式有些类似，也有些区别

1. 首先去掉了全字匹配
2. 添加了g修饰符（在使用时重置了正则的lastIndex）,表示全局匹配，用于取出目标字符串中所有符合条件的结果
3. 增加了(?=px|s|$)

注意：

• 按照CSS规范，只有数值为0才可以省略单位，这种情况没有必要靠正则来过滤，可以先通过JS进行过滤处理
• 这个例子只验证了px单位，实际不存在pt,em,vw等单位，并且没有考虑百分比的情况
• 实际工作中，要根据需求再追加处理逻辑

断言

(?=exp) 先行断言（也称零宽度正预测先行断言，正向肯定环视或顺序肯定环视）用于表示符合正则表达式的位置，匹配exp前面的位置。

var 

先行断言简单的例子，正则表达式匹配以ing结尾的单词的前面部分（除了ing以外的部分）

类似的断言还有：

(?<=exp) 后行断言（也称零宽度正回顾后发断言，反向肯定环视，逆序肯定环视）匹配exp后面的位置，es2018新增。

var 

正则表达式匹配以re开头的单词的后半部分（除了re以外的部分）

(?!exp)先行否定断言（也称零宽度负预测先行断言，正向否定环视，顺序否定环视）断言此位置的后面不能匹配表达式exp

var 

正则表达式表示匹配三位数字，而且这三位数字的后面不能是数字

(?<!exp) 后行否定断言（也称零宽度负回顾后发断言，反向否定环视，逆序否定环视），es2018新增，断言此位置的前面不能匹配表达式exp

var 

正则表达式表示匹配前面不是小写字母的七位数字

2. 数值转货币格式

还是先来看一下最终要实现的目标

function 

下面看一下如何通过正则输出上面的结果

const 

{n}，限定符，表示重复n次，n必须是非负整数
类似的语法还有：
{n,m}表示重复n到m次，n和m都必须是非负整数，且n<=m
{n,} 表示重复n次以上
$n 用于replace的字符串中，表示第n个捕获组，n可以从1到9，一共可以匹配9个捕获组
$& 表示本次完整的匹配，所以这段代码还可以写成下面的方式：

const 

PS:因为这里只需要捕获数字，后面是个先行断言，所以可以改写成上面的方式。

在es2018以上的环境，还可以使用后行断言，只匹配个位置，所以只需要替换成逗号。

const