正则表达式：创建正则表达式的两种方式；正则表达式的常见用法；正则与数值和其它注意事项

Node.js ：什么是Node.js；Node.js基础；NPM。

正则表达式

创建正则表达式的两种方式

1. 使用正则表达式字面量const reg=/[a-z]\d+[a-z]/i

优点：简单方便，不需要考虑二次转义；

缺点：子内容无法重复使用；过长的正则导致可读性差

2. 使用RegExp构造函数

const alphabet=`[a-z]`;

const reg=new RegExp(`${alphabet}\\d+${alphabet}`,'i');

优点：子内容可以重复使用，可以通过控制子内容的粒度提高可读性

缺点：二次转义的问题非常容易导致bug

const reg=new RegExp(`\d+`);

reg.test('1');//false；reg.test('odd');//true

正则表达式的常见用法

1. RegExp.prototype.test()

const reg=/[a-z]\d+[a-z]/i;

reg.test('ala');//true

reg.test('lal');//false

reg.test(Symbol('ala'));//TypeError

输入：要求是输入字符串，如果输入的不是字符串类型，会尝试进行类型转换，转换失败会抛出TypeError

输出：true或者false，表示匹配成功或失败

2. RegExp.prototype.source和 RegExp.prototype.flags

const reg=/[a-z]\d+[a-z]/ig;

reg.source;//[a-z]\d+[a-z]

reg.flags;//gi

前者返回当前正则表达式的模式文本的字符串

es2015新增，返回当前正则表达式的修饰符的字符串，会随修饰符按照字母升序进行排序

3. RegExp.prototype.exec()和 String.prototype.match()

const reg=/[a-z]\d+[a-z]/i;

reg.exec('ala');//["ala",index:0,input:"ala",groups:undefined]

reg.exec('lal');//null

'ala'.match(reg);//["ala",index:0,input:"ala",groups:undefined]

'lal'.match(reg);//null

输入：前者要求输入字符串，遇到非字符串

类型会尝试转换，后者要求输入正则表达式，遇到其他类型会先尝试转成字符串，再以字符串为source创建正则表达式

输出：匹配成功，返回匹配结果；匹配失败，返回null

const reg=/(a)/g;

reg.exec('ala');//["a","a",index:0,input:"ala",groups:undefined]

'ala'.match(reg);//["a","a"]

当反正则表达式含有g修饰符时，RegExp.prototype.exec每次只返回一个匹配结果，数据格式和不含g修饰符相同。String.prototype.match（）会返回所有的匹配结果，数个是会变成字符串组。由于String.prototype.match（）返回的数据格式不固定，因此大多数情况都建议使用RegExp.prototype.exec。

4. RegExp.prototype.lastIndex

const reg=/(a)/g;

const str='ala';

reg.lastIndex;//0

reg.exec('ala');//["a","a",index:0,input:"ala",groups:undefined]

reg.lastIndex;//1

reg.exec('ala');//["a","a",index:2,input:"ala",groups:undefined]

reg.lastIndex;//3

reg.exec('ala');//null

reg.lastIndex;//0

当前正则表达式最后一次匹配成功的位置（也就是下一次匹配的开始位置）

注意：lastIndex不会自己重置，只有当上一次匹配失败v瑷珲重置为0，因此，当你需要反复使用同一个正则表达式的时候，需要在每次匹配新的字符串之前重置lastIndex！

5.String.prototype.replace(),String.prototype.search(),String.prototype.split()

'ala'.replace(/a/,'b');//'bla'

'ala'.replace(/a/g,'b');//'blb'

'ala'.search(/a/);//0

'ala'.search(/a/g);//0

'ala'.split(/a/);//["","1",""]

'ala'.split(/a/g);//["","1",""]

正则与数值

数值判断之一

/[0-9]+/`[]`字符集，使用连字符 - 表示指定的字符范围，如果想要匹配连字符，需要挨着方括号放置，或进行转义

`0-9` 表示匹配从 0 到 9 的数字字符，常用的还有 a-z 匹配小写字母，\u4e00-\u9fa5 匹配汉字等。如果只是匹配数字，还可以使用字符集缩写 \d

`+`限定符，匹配一个或多个

**不足之处**不是全字符匹配，存在误判，如 /[0-9]+/.test('a1') === true

数值判断之二

`/^\d+$/`

`^`匹配字符串开始位置，当结合 m 修饰符时，匹配某一行开始位置

`$`匹配字符串结束位置，当结合 m 修饰符时，匹配某一行结束位置

**不足之处**- 不能匹配带符号的数值，如 +1，-2- 不能匹配小数，如 3.14159

数值判断之三

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

`()`圆括号内是一个子表达式，当圆括号不带任何修饰符时，表示同时创建一个捕获组

`?` 在正则中有多种含义，作为限定符时，表示匹配零到一个

`.`可以匹配除换行符之外的任意字符，当结合 s 修饰符时，可以匹配包括换行符在内的任意字符。当匹配小数点字符时需要转义。

**不足之处**- 不能匹配无整数部分的小数，如.123- 捕获组会带来额外的开销

数值判断之三

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

`(?:)`创建一个非捕获组

`*`限定符，匹配零个或多个

**不足之处**不能匹配无小数部分的数值，如 2；不能匹配科学计数法，如 1e2、3e-1、-2.e+4

完整的数值正则怎么写

完整的数值 token

https://drafts.csswg.org/css-syntax-3/#number-token-diagram

![img](https://p.ssl.qhimg.com/t01480d461b3c6ceb1f.webp)

注意：这个 token 是 CSS 的 token，在 javascript 中，要多考虑一种情况

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

`|`用来创建分支，当位于圆括号内时，表示子表达式的分支条件，当位于圆括号外时，表示整个正则表达式的分支条件

`i` 修饰符，表示匹配时忽略大小写，在这个例子中用于匹配科学计数法的 e，去掉 i 修饰符需要把 e 改为 [eE]

**思考题：这个正则已经没有缺点了吗？**javascript 中，数值还可以如何表示？

用正则处理数值

**解析CSS**

function execNumberList(str) {·········}

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

function execNumberList(str) {

reg.lastIndex = 0;

let exec = reg.exec(str);

const result = [];

while (exec) {

result.push(parseFloat(exec[0]));

exec = reg.exec(str);

}

return result;}

`(?=\*expression\*)`

正向肯定环视 / 顺序肯定环视 / 先行断言，用于匹配符合条件的**位置**

类似的语法还有：

**(?!*expression*)** 正向否定环视 / 顺序否定环视 / 先行否定断言

**(?<=*expression*)** 反向肯定环视 / 逆序肯定环视 / 后行断言，es2018 新增

**(?

`g`修饰符，表示全局匹配，用于取出目标字符串中所有符合条件的结果。

**需要注意的点**- 按照 CSS 规范，只有数值为 0 才可以省略单位，这种情况没有必要靠正则来过滤- 这个例子中只验证了 px 单位，实际还存在 pt、em、vw 等单位，并且没有考虑百分比的情况

- 实际工作中，要根据需求追加处理逻辑

数值转货币格式

不卖关子了，直接放结果：

const reg = /(\d)(?=(\d{3})+(,|$))/g;

function formatCurrency(str) {

return str.replace(reg, '$1,');

}

console.log(formatCurrency('1')); // 1

console.log(formatCurrency('123')); // 123

console.log(formatCurrency('12345678')); // 12,345,678

`{n}`限定符，表示重复 n 次，n 必须是非负整数

类似的语法还有：

{n, m} 表示重复 n 到 m 次，n 和 m 都必须是非负整数，且 n <= m

{n,} 表示重复 n 次以上

`$n`用于 replace 的字符串中，表示第 n 个捕获组，n 可以从 1 到 9

$& 表示本次完整的匹配，所以这段代码还可以改写为：

const reg = /\d(?=(?:\d{3})+(?:,|$))/g;

function formatCurrency(str) {

return str.replace(reg, '$&,');

}

在ES2018以上的环境，还可以使用反向环视

const reg = /(?<=\d)(?=(?:\d{3})+(?:,|$))/g;

function formatCurrency(str) {

return str.replace(reg, ',');

}

其它注意事项

环视中的圆括号也会生成捕获组，所以都要采用 (?:) 的非捕获组形式

1.颜色有多少种表示方式

16进制表示法

color: #rrggbb;

color: #rgb;

color: #rrggbbaa;

color: #rgba;

**对应的正则写法**

const hex = '[0-9a-fA-F]';

const reg = new RegExp(`^(?:#${hex}{6}|#${hex}{8}|#${hex}{3,4})$`);

- 也可以使用 i 修饰符来匹配大小写，i 修饰符和 a-fA-F 要根据实际需求来做取舍

rgb/rgba 表示法

color: rgb(r, g, b);

color: rgb(r%, g%, b%);

color: rgba(r, g, b, a);

color: rgba(r%, g%, b%, a);

color: rgba(r, g, b, a%);

color: rgba(r%, g%, b%, a%);

**对应正则写法**

const num = '[+-]?(?:\\d*\\.)?\\d+(?:e[+-]?\\d+)?';

const comma = '\\s*,\\s*';

const reg = new RegExp(`rgba?\$\\s*${num}(%?)(?:${comma}${num}\\1){2}(?:${comma}${num}%?)?\\s*\$`);

`\n`反向引用，表示引用第 n 个捕获组；由于 r/g/b 必须同时为数值或百分比，所以 %? 只需要捕获一次，用 \1 来引用

`\s`字符集缩写，用于匹配空白

**需要注意的点**

- 按照规范，rgb(r,g,b,a) 和 rgba(r,g,b) 也是合法的

- r/g/b 的值应该是 0~255 的整数，但是溢出或小数并不会报错

- 当捕获组内的内容是可选的时候，一定要把问号写在捕获组内

如果可选内容的圆括号不可省略，如(a|b|c)?，应该多嵌套一层：((?:a|b|c)?)

其他

/* hsl & hsla */

color: hsl(h, s%, l%);

color: hsla(h, s%, l%, a);

color: hsla(h, s%, l%, a%);

/* keywords */

color: red;

color: blue;

/* …… */

. 用正则处理颜色-----16进制颜色的优化

function shortenColor(str) { // ……}

console.log(shortenColor('#336600')); // '#360'

console.log(shortenColor('#19b955')); // '#19b955'

console.log(shortenColor('#33660000')); // '#3600'

const hex = '[0-9a-z]';

// ?

const hexReg = new RegExp(`^#(?${hex})\\k(?${hex})\\k(?${hex})\\k(?${hex}?)\\k $`, 'i');

正则表达式和Node.js

正则表达式

正则与数值

完整的数值正则怎么写

其它注意事项

正则与URL

Node.js基础入门

基于Node.js的Web开发

功能列表

你可能感兴趣的:(正则表达式和Node.js)