【前端面试】正则表达式的使用/示例/基础篇

在面试过程中,经常会被问到是否了解过正则表达式。这里总结一下。

首先分享两个学习网站:正则表达式在线测试、 正则表达式课程练习平台

正则表达式有什么作用

正则表达式主要用于匹配字符串。
我们先看一个例子:提取email字符串中的所有数字。
先使用传统方法:

let email = "[email protected]";
//不使用正则表达式时:
let res = email.split("").filter(item=>{
    //isNaN:not-a-number
    return !isNaN(item);
});
console.log(res);   //['1', '1', '1', '2', '2', '2', '3', '3', '3', '1', '2', '3', '1', '6', '3']
let str = res.join("");
console.log(str);   //111222333123163

使用正则表达式:

//使用正则表达式:
let reg = /\d/g;        //字面量形式
let res2 = email.match(reg).join("");
console.log(res2);

上面是使用字面量的形式,下面使用一下对象的形式:调用RegExp对象的构造函数。

let reg = new RegExp(/\d/,"g");     //对象的形式
let res2 = email.match(reg).join("");
console.log(res2);

正则表达式使用起来很方便,下面介绍几个比较基础常用的匹配规则:

正则表达式的使用

[ ] 字符集

使用[ ]匹配单个字符

使用[ ]可以匹配[ ]集合中的任何一个字符。
【前端面试】正则表达式的使用/示例/基础篇_第1张图片
【前端面试】正则表达式的使用/示例/基础篇_第2张图片

使用[ ]匹配字母、数字

可以使用-来表示字母或数字的范围。
匹配数字:/[0-9]/g
匹配所有小写字母:/[a-z]/g
匹配所有大小写字母:/[a-zA-Z]/g
【前端面试】正则表达式的使用/示例/基础篇_第3张图片
【前端面试】正则表达式的使用/示例/基础篇_第4张图片
【前端面试】正则表达式的使用/示例/基础篇_第5张图片

在[ ]中匹配特殊字符

如果我们需要匹配的符号是-号,需要对-号进行转义:\-
转义的方法可以用于其他符号,比如\(就是对(的匹配。
注意:不在[]中匹配特殊字符时不需要转义字符!!
【前端面试】正则表达式的使用/示例/基础篇_第6张图片
【前端面试】正则表达式的使用/示例/基础篇_第7张图片

匹配所有非数字

使用^符号取非集。
比如匹配所有的非数字:/[^0-9]/g
【前端面试】正则表达式的使用/示例/基础篇_第8张图片
【前端面试】正则表达式的使用/示例/基础篇_第9张图片
【前端面试】正则表达式的使用/示例/基础篇_第10张图片

快捷方式匹配

/\d/g		//匹配所有数字

【前端面试】正则表达式的使用/示例/基础篇_第11张图片

/\w/g		//匹配单个字符 包括字母、数字或者下划线

【前端面试】正则表达式的使用/示例/基础篇_第12张图片

/\s/g		//匹配空白字符 包括空格 tab 换行等

【前端面试】正则表达式的使用/示例/基础篇_第13张图片

/\b/g		//匹配单词边界(例如单词在空格之间) 可以在要匹配的单词两边加上\b来进行匹配

【前端面试】正则表达式的使用/示例/基础篇_第14张图片
【前端面试】正则表达式的使用/示例/基础篇_第15张图片

快捷键取反匹配(取原来的大写字母)

/\D/g		//匹配所有非数字

【前端面试】正则表达式的使用/示例/基础篇_第16张图片

/\W/g		//匹配所有非字母、非数字、非下划线

【前端面试】正则表达式的使用/示例/基础篇_第17张图片

/\S/g		//匹配所有非空白字符

【前端面试】正则表达式的使用/示例/基础篇_第18张图片

匹配输入的开始与结束

^ 用在[ ]字符集中,用于给匹配取反。而当^ 没有用在[ ]字符集中时,用来匹配输入的开始。
下面例子中只匹配以master开头的数据,不会匹配后面出现的master。
【前端面试】正则表达式的使用/示例/基础篇_第19张图片
使用$ 匹配字符串的结尾
【前端面试】正则表达式的使用/示例/基础篇_第20张图片

任意字符

. 可以匹配除换行符之外的其他任意单个字符,只能出现在方括号以外。
【前端面试】正则表达式的使用/示例/基础篇_第21张图片
【前端面试】正则表达式的使用/示例/基础篇_第22张图片
【前端面试】正则表达式的使用/示例/基础篇_第23张图片

可选字符

可以使用? 匹配可选字符。可以指定一个字符、字符组、或者其他基本单元可选(可以出现也可以不出现)。
【前端面试】正则表达式的使用/示例/基础篇_第24张图片
【前端面试】正则表达式的使用/示例/基础篇_第25张图片
【前端面试】正则表达式的使用/示例/基础篇_第26张图片

匹配多个数据

匹配重复数据

可以使用{} 进行重复数据的匹配。在字符串后加{N} 就表示它前面的字符组出现N次。
比如匹配9个数字:/\d{9}/g
【前端面试】正则表达式的使用/示例/基础篇_第27张图片
【前端面试】正则表达式的使用/示例/基础篇_第28张图片

设置重复数据区间

贪婪模式

比如我们想要匹配长度为3~9的数字,就不能只写成/\d{9}/g。而应该在{}中指定范围区间。
/\d{3,9}/g
【前端面试】正则表达式的使用/示例/基础篇_第29张图片
【前端面试】正则表达式的使用/示例/基础篇_第30张图片
如果想要匹配3个以上的数字呢,应该使用/\d{3,}/g使用开区间即可。
【前端面试】正则表达式的使用/示例/基础篇_第31张图片
特殊的,+等价于{1,},表示可以接无限个任意字符。
*等价于{0,},表示可以不加字符。
【前端面试】正则表达式的使用/示例/基础篇_第32张图片
【前端面试】正则表达式的使用/示例/基础篇_第33张图片

【前端面试】正则表达式的使用/示例/基础篇_第34张图片

非贪婪模式

如果我们想要在符合要求时尽可能少的匹配呢,应该在贪婪模式后面加上?,实现尽可能少的匹配。
【前端面试】正则表达式的使用/示例/基础篇_第35张图片

综合实践

1、注意这道题中的-是可选的,应该加上?
【前端面试】正则表达式的使用/示例/基础篇_第36张图片
2、匹配信息
【前端面试】正则表达式的使用/示例/基础篇_第37张图片

你可能感兴趣的:(正则表达式,前端,javascript)