导语:今天说一下有关js中正则表达式的一些知识点。正则表达式主要是在表单输入验证,以及一些文本字符处理中特表好用。
# 正则表达式的概念
正则表达式是一个描述字符模式的对象,最早是诞生于Perl语言中,JavaScript继承了Perl语言的正则表达式的一些特性,方法和概念。在JavaScript中,有一个类RegExp表示正则表达式,而且String和RegExp都有对应的模式匹配和文本检索、替换的函数。
# 创建正则表达式
创建正则表达式可以使用两种方法,这是js对象一以贯之的方法,就是new实例化一个对象,或者直接写正则表达式。
- new运算符创建
通过new运算符来实例化一个RegExp对象。
语法表达:new RegExp(code is here);
例如:创建一个验证数字的正则表达式。
//注意:这里使用test()方法来检测是否符合
var numReg = new RegExp('a');
var num = 'a123';
console.log(numReg.test(num)); // true;
2
3
4
- 直接量创建
直接量就是直接赋值,创建一个表达式。这个看着更加简洁好用,非常灵活。
例如:还是上面那个例子。
var numReg = /a/;
var num = 'a123';
console.log(numReg.test(num)); // true;
2
3
# 正则表达式的匹配规则
# 字符类
之前都是直接写正则表达式,例如/abc/
,只是匹配任意一个符合abc的字符,而如果想要匹配多个字符,就可以使用字符类来实现。
字符类是使用方括号[]
,中间可以随意写一些匹配规则。
例如:我们要检测文本中是否包含0-9中的任意数字,就可以使用字符类。这里我们使用直接量比较方便。
var numReg = /[0-9]/;
var num = 'a123';
var str = 'hello';
console.log(numReg.test(num)); // true;
console.log(numReg.test(str)); // false;
2
3
4
5
补充:其他字符类
序号|字符|说明--|---|---|
1|[…]
|括号内的任意字符
2|[^…]
|不再括号内的任意字符
3|.]
|除换行符和Unicode行终止符之外的任意字符
4|\w
|任何ASCII(注释1)单字字符,等于[a-zA-Z0-9_]
5|\W
|任何非ASCII(注释1)单字字符,等于[^a-zA-Z0-9_]
6|\s
|任何Unicode空白符
7|\S
|任何非Unicode空白符的字符
8|\d
|任何ASCII数字,等于[0-9]
9|\D
|任何非ASCII数字,等于[^0-9]
10|[\b]
|退格直接量(特殊)
注释1:ASCII指的是美国信息交换标准代码。
以上就是一些字符类的说明,下面使用几个练习一下。
例如:一个检测是否包含数字、字母和下划线以及非空白符的正则表达式。
var patten = /\w\s/;
var str = 'abc 123';
console.log(patten.test(str)); // true
2
3
# 避免重复定义
上面的字符类,只能匹配单个,如果我们要匹配多个符合的字符,不能一直重复写吧,像这样/\d\d\d/,那这样就不高效了。
为了解决上面的烦恼,正则表达式用一些方法来表示这种情况,下面是一些列表。
序号|字符|说明--|---|---
1|{n,m}
|表示匹配前一项至少n次,不能超过m次
2|{n,}
|表示匹配前一项n次,或者更多次
3|{n}
|表示匹配前一项正好n次
4|?
|表示匹配前一项0次或者1次,等于{0,1}
5|+
|表示匹配前一项1次或者多次,等于{1,}
6|*
|表示匹配前一项0次或者多次,等于{0,}
举个例子:匹配2到4位数字。
var numReg = /\d{2,4}/;
var num = '123';
console.log(numReg.test(num)); // true;
2
3
# 用于选择的字符
正则表达式中有用于选择的字符|。这个是从左到右进行匹配,一旦左边符合就返回结果。
例如:匹配是带有ab或者cd或者ef的正则表达式。
var numReg = /ab|cd|ef/;
var num = 'ab123';
console.log(numReg.test(num)); // true;
2
3
# 用于分组的字符
正则表达式中有用于分组的字符()。
知识点:正则中括号的含义:
把单独的项目组合成子表达式,例如:/java(script)?/
匹配的是字符串java,后面可以有script,也可以没有。
在完整的模式中定义子模式,例如:/[a-z]+(\d+)/
,匹配的是尾部是否是数字。
例如:匹配是带有ab或者cd或者ef的正则表达式。
var numReg = /ab|cd|ef/;
var num = 'ab123';
console.log(numReg.test(num)); // true;
2
3
# 用于引用的字符
括号()
也可以表示引用,允许在同一个正则表达式中的后面部分引用前面的子表达式。
例如:开始和结束的引号相匹配。\1
引用的是第一个带括号的子表达式。
var quoat = /(['"])[^'"]*\1/;
console.log(quoat.test('1"2"3')); // true
2
补充:正则表达式的选择、分组和引用字符
序号|字符|说明--|---|---
1|竖杠|选择,匹配的是该符号左边或者右边的子表达式
2|(…)
|分组,组合,将一个项目组合成一个独立的单元,还可以供后面的引用使用
3|(?:…)
|只组合,把项目组合到一个单元,但是不记与该组匹配的字符
4|\n
|和第n个分组第一次匹配的字符相匹配
# 匹配指定的位置
先来看一个列表,里面罗列了需要用到的锚字符。
序号|字符|说明--|---|---
1|^
|匹配字符串的开头;如果是匹配多行,那就是匹配一行的开头
2|$
|匹配字符串的结尾;如果是匹配多行,那就是匹配一行的结尾
3|\b
|匹配一个词语的边界,例如在\w和\W之间的位置,注意:\b是退格符
4|\B
|匹配一个非词语的边界
5|(?=p)
|正前向声明,要求接下来的字符都有和模式p匹配,但是不包括匹配中的那些字符
6|(?!p)
|反前向声明,要求接下来的字符都不和模式p匹配
例如:匹配一个用户名,以字母开头,数字结尾的正则表达式。
var nameReg = /^[a-zA-Z]\d$/;
var name = 'a1';
console.log(111,nameReg.test(name)); // true;
2
3
# 标志
正则表达式的标志说明了高级模式里面匹配的规则。和上面的正则表达式的语法不同的是标志出现在/符合之外说明的,位于第二个\之后。
正则表达式中的标志列表
序号|字符|说明--|---|--- 1|g|模式匹配应该是全局的,应该找出被检索字符串所有的匹配。 2|i|模式匹配应该是不区分大小写的匹配。 3|m|多行模式,^匹配一行的开头和字符串的开头,$匹配一行的结尾和字符串的结尾
例如:匹配全局的a
var patten = /a/g;
var str = 'an apple';
console.log(patten.test(str)); // true
2
3
# String模式匹配的方法
# search()方法
这个方法的参数是正则表达式,返回一个与之匹配的子串的位置;如果找不到就返回-1,如果参数不是正则表达式,会转换成正则表达式进行匹配。
注意:该方法不支持全局检索,只要找到便会返回结果。
例如:匹配一个查找a的位置的正则表达式。
var patten = /a/i;
var str = 'apple';
console.log(str.search(patten)); // 0
2
3
# replace()方法
这个方法的第一个参数是正则表达式,第二个参数是要替换的字符串,也可以是一个函数。用于把匹配到的字符串替换成别的内容。
例如:把小写字母a替换成大写字母*。
var patten = /a/g;
var str = 'apple';
console.log(str.replace(patten,"*")); // *pple
2
3
# match()方法
这个是比较常用的String正则表达式方法,参数只有一个就是正则表达式。把匹配到的内容以数组的形式返回。
例如:解析一个url地址
var urlReg = /(\w+):\/\/([\w.]+)\/(\S*)\/(\d*)/;
var text = 'http://www.abc.com/post/1';
console.log(text.match(urlReg)); // ["http://www.abc.com/post/1", "http", "www.abc.com", "post", "1", index: 0, input: "http://www.abc.com/post/1", groups: undefined]
2
3
# split()方法
这个也是比较常用的String正则表达式方法,参数只有一个就是正则表达式或者一个字符。把字符串分解为一个子串数组,使用的分隔符就是它的参数。
例如:
var patten = /\s/;
var num = '123,456,789';
var num1 = '123 456 789';
console.log(num.split(',')); // ["123", "456", "789"]
console.log(num1.split(patten)); // ["123", "456", "789"]
2
3
4
5
RegExp对象的属性和方法 Javascript中的正则表达式是用RegExp对象来表示的,除了构造函数RegExp(),这个对象可以接受两个参数,一个是正则表达式的字符串,另一个是正则表达式的标志。
例如:new RegExp("\\d{2}","g")
;
# RegExp对象的属性
每个RegExp对象都有五个属性。包括以下:
- source是一个只读字符串,存放的是正则表达式的文本。
- global是一个只读的布尔值,是否具有标志g
- ignoreCase是一个只读的布尔值,是否具有标志i
- multiline是一个只读的布尔值,是否具有标志m
- lastIndex是一个可读写的整数。对于具有标志g的模式,这个属性存储在字符串中下一次可以检索的位置,由方法exec()和test()使用
# exec()方法
该方法是对于一个指定的字符串进行匹配,把匹配到的内容返回一个的数组。
例如:
var patten = /a/i;
var str = 'apple';
console.log(patten.exec(str)); // ["a", index: 0, input: "apple", groups: undefined]
2
3
# test()方法
该方法和exec()
方法类似,但是不只限于字符串,其他字符也支持;而且它返回的是一个布尔值,表示是否符合正则表达式的匹配规则。
var patten = /a/i;
var str = 'apple';
console.log(patten.test(str)); // true
2
3
# 案例
- 检验用户名为中文的
/^[\u4e00-\u9fa5]{0,}$/
- 检验密码强度
/^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$/
密码的强度必须是包含大小写字母和数字的组合不能使用特殊字符,长度在8-10之间
- 检测电子邮箱地址
/[\\w!#$%&'*+/=?^_{|}~-]+(?:\.[\w!#$%&’+/=?^_
{|}~-]+)@(?:\w?.)+\w?/`
- 检测手机号的
/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\\d{8}$/
- 检测身份证的
15位的:/^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$/
18位的:/^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$/
- 检验金额的
精确到2位小数。
/^[0-9]+(.[0-9]{2})?$/
- 判断ie版本
/^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$/
- 校验IP-v4地址
/\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b/
- 提取url链接
/^(f|ht){1}(tp|tps):\\/\\/([\\w-]+\\.)+[\\w-]+(\\/[\\w- ./?%&=]*)?/
# 写在最后
这个JavaScript中的正则表达式RegExp对象就讲到到这里,内容还是挺多的,需要慢慢吸收转化,可以多几个例子练习。