正则表达式

予我一襟星河
310 阅读5分钟

基本概念

背景

当需要对各种数据进行验证（用户名、密码、用户输入的手机号、邮箱）时，为了验证用户输入的是合法，会写大量的验证代码来处理。这样会导致代码量过大。需要一个更好的数据验证的方案-正则表达式。

概念

正则表达式本质上是一个特殊的字符串。它是按照一定格式书写，能够用来对其他的字符串进行判断验证，可以用来判断某个字符串是否符合我们条件，这种字符串就是一个正则表达式。
正则表达式需要我们学习语法编写字符串，用JavaScript提供的api用来对其他字符串进行判断，判断是否满足正则表达式的条件。

正则表达式语法

使用

var 正则表达式变量名 = /正则表达式语法/;
正则表达式变量名.test(待判断的字符串);

例子：判断字符串是否是一个数字
var str = "a"; //要判断的数据
var reg = /[0-9]/; //正则表达式
console.log(reg.test(str)); //false

书写正则表达式后，可以利用JavaScript提供的test()来判断某个字符串是否满足正则表达式，test返回布尔型数据，true表示满足，false表示不满足。

一般使用流程

1.先根据验证要求写出对应的正则表达式
2.再利用正则表达式.test(要验证的数据)来进行判断

注意点

正则表达式是从左往右依次按照顺序来判断的，即也会字符串的书写顺序。

基础语法

[0-9]：表示匹配一个数字。
[a-z]：表示匹配一个小写字母。
[A-Z]：表示匹配一个大写字母。
[123abc]：表示匹配一次123abc 6个字符中的其中一个。
[a-zA-Z]：表示匹配一个小写或大写字母。
[0-9a-zA-Z]：表示匹配一个数字或字母。
{m,n}：表示匹配前一项的次数，至少m次，最多n次。最多的话需是在匹配整个字符串的时候才有效。
匹配5个数字：[0-9]{5}
匹配至少5个数字：[0-9]{5,}
匹配最多5个数字：[0-9]{,5}
匹配最少2个数字，最多5个数字：[0-9]{2,5}
^：表示从开头进行匹配
匹配以数字开头:^[0-9]
匹配以字母开头:^[a-zA-Z]
匹配以小写字母开头:^[a-z]
$:表示匹配以什么结束
匹配以数字结尾:[0-9]$
匹配以3个字母结束:[a-zA-Z]{3}$
匹配以一个小写字母结束:[a-z]$
/^$/：表示匹配的是整个字符串
字符串是否是18位数字：/^[0-9]{18}$/
(a|b|c)：匹配abc中的其中一个字母，等同于[abc]
(a|b)bc：匹配abc或bbc中的一种
James bond：匹配James bond //?^james bond$/
(Java|Type)script：判断整个字符串是否是JavaScript或TypeScript中的一个
(HTML|CSS|JavaScript)：判断整个字符串是否是这三个中的其中一个。
例子
判断用户输入的字符串是否包含至少连续的5个数字/[0-9]{5, }/
判断用户输入的字符串是否包含至少连续的5个小写字母/[a-z]{5}/
判断用户输入的字符串是否包含至少5个最多10个连续的字母或数字/[a-zA-Z0-9]{5,10}/
判断用户输入的字符串是否以数字开头 /^[0-9]/
判断用户输入的字符串是否以小写字母结尾 /[a-z]$/
判断整个字符串是否是大写字母加一个数字 /^[A-Z][0-9]$/
判断整个字符串是否是11位数字 /^[0-9]{11}$/
判断整个字符串是否是james bond /^james bond/
判断整个字符串是否是JavaScript或TypeScript中的一个 /(Java|Type)Script/
判断整个字符串是否是HTML或CSS或JavaScript中的一个 /(HTML|CSS|JavaScript)/

练习

//判断qq号：5-10位数字
        var str = prompt('输入字符串');
        var QQ = /^[0-9]{5,10}/;
        console.log(QQ.test(str));
        //手机号：11位数字，1开头，第二位至少为3
        var str = prompt('输入字符串');
        var phone = /^1[3-9][0-9]{9}$/;
        console.log(phone.test(str));
        //邮箱：以字母开头，后续跟1-10的字母或数字或_，后续跟@，@后跟2-3个字母或数字，后跟.，后跟com或cn或net
        var str = prompt('输入字符串');
        var email = /^[a-zA-Z][a-zA-Z0-9_]{1,10}@[a-zA-Z0-9]{2,3}.(com|cn|net)$/;
        console.log(email.test(str));

高级语法（语法扩展）

\d：表示匹配一个数字。等同于[0-9]
匹配手机号:1[3-9]\d{9}
匹配5-10个数字：\d{5,10}
\w：表示匹配一个单词字符。等同于[0-9a-zA-Z_]
匹配10个字母或数字或下划线：\w{10}
匹配5到9个单词字符：\w{5,9}
* ：匹配前一项出现的次数为0次、1次或多次。即可有可无，等同于{0,}
匹配任意数量的字母：[a-zA-Z]*
匹配任意数量的数字：\d*
+ ：匹配前一项的次数至少为1次，等同于{1,}
匹配至少1个数字:\d+
?：匹配前一项的次数为0次或1次
匹配一个数字后可以跟一个字母或无：\d[a-zA-Z]?
匹配+或？或* 本身，需要进行转义，在符号前面加一个\。
匹配一个一个数字跟+再跟一个数字：[0-9]\+[0-9]

正则表达式模式

概念：不同的正则表达式模式对于正则表达式有不同的作用，默认模式为u。
常用模式
u：只匹配最近的一项
i：不考虑大小写
g：全局匹配
指定模式
var 正则表达式变量名 = /正则表达式/模式

正则表达式在字符串中的应用

字符串中的部分api是支持正则表达式的：
match：通过正则表达式以及全局谋杀能够获取字符串中所有符合条件的内容。
用于判断某个字符串是否符号某个正则表达式,返回正则表达式匹配的数据，是一个对象，但是可以通过下标的方式去获取数据。
字符串.match(正则表达式);
例子：找到字符串中手机号并返回
var str = "hoaeghuedkh18870308717dfgsdgsd";
var reg = /1[3-9]\d{9}/;
var phone = str.match(reg);
console.log(phone); //18870308717

如果要返回所有的匹配字符串，就设置正则表达式为全局模式-g
split：支持以正则表达式作为分隔符

例子：把所有人名提取出来，放入数组中。
var str = "张三@李四$王五#赵六@@@田七&&王八";
var newArr = str.split(/[@$#&]/);
console.log(newArr);

replace：返回一个由替换值替换一些或所有匹配的模式后的新字符串。

let str = "abcdefg123";
let rg = /([a-zA-Z]+)/g;
console.log(str.replace(rg, '$$')); // 输出：$123

let str = "123abcd123efgh";
let rg = /([a-zA-Z]+)/g;
console.log(str.replace(rg, '.$&')); //输出：123.abcd123.efgh
实例
function replacer(match, p1, p2, p3, offset, string) {
    return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%()**'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
console.log(newString);  //abc - 12345 - #$*%dfghjk,()p
avatar
文章
阅读
粉丝