正则表达式(规则表达式)
用来检测字符串是否符合规则
一.创建正则
1.字面量创建
var reg = /正则写在这里/
var reg = /abc/
console.log(reg);
2.构造函数创建
var reg = new RegExp('正则写在这里')
var reg2 = new RegExp('abc')
console.log(reg2);
二.正则常用方法
1.匹配 : 正则.test(字符串) : 匹配字符串是否符合正则规则,返回布尔值
- true : 符合规则
- false : 不符合规则
var reg = /abc/ // 匹配一段字符串中是否符合'abc'
var str1 = 'a'
var str2 = 'ab'
var str3 = 'abc'
var str4 = 'abcd'
var str5 = 'a1b2c3'
console.log(reg.test(str1)) // false
console.log(reg.test(str2)) // false
console.log(reg.test(str3)) // true
console.log(reg.test(str4)) // true 包含abc了
console.log(reg.test(str5)) // false 包含要连在一块,需要连贯
2. 捕获(还原) : 正则.exec(字符串)
(1) . 字符串没有符合正则规则的内容
- 捕获结果为 null
var reg = /\d{3}/ // 有三个数字即可
console.log(reg.exec('hshsfhihs')); // null 没有相关的东西
(2) . 正则没有小括号,没有标识符g
- 捕获到的是 一个数组 下标0是 我们捕获到的值,但是不管捕获多少次,都是从 下标0 开始,第一个满足条件的
var reg = /\d{3}/ // 有三个数字即可
console.log(reg.exec('hsh678hihs123ffs345')); // 678
console.log(reg.exec('hsh678hihs123ffs345')); // 678
(3). 有小括号
- 下标0 是符合正则规则的字符串
- 从下标1 开始, 每个小括号单独捕获出来的内容
var reg = /\d{2}/ // 两位数字
var reg = /(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/
var sum = '142622200310021234'
console.log(reg.exec(sum));
(4) . 有标识符 g
- g 叫做 全局标识符
- 第二次捕获时, 会从第一个捕获节点胡的位置开始进行捕获, 直到找不到内容, 会返回一个null
- 下一次再捕获, 会从字符串开始位置重新捕获
var reg = /\d{3}/g
var str = 'hsh678hihs123ffs345'
console.log(reg.exec(str)); // 下标0 的值 678
console.log(reg.exec(str)); // 下标0 的值 123
console.log(reg.exec(str)); // 下标0 的值 345
console.log(reg.exec(str)); // null
console.log(reg.exec(str)); // 重新捕获
三.正则的元字符 : 包含一位就好!!!
正则表达式的符号,由两种方式组成:
1. 元字符 : 正则规定的符号
普通文本(abc)和正则的规定符号(\ .)
2. 修饰符 : 修饰整个正则表达式的符号
-
普通元字符:
- \d : 表示 一位 数字 (0 ~ 9)
var reg = /\d/ // 表示匹配字符串中 包含一位数字
console.log(reg.test('abcd')); // false 是字符,规则是数字
console.log(reg.test('abcd#$%')); // false
console.log(reg.test('12345')); // true 包含数字
- \D : 表示 一位 非数字 (除了0 ~ 9)
var reg = /\D/ // 表示匹配非数字
console.log(reg.test('abcd')); // true
console.log(reg.test('abcd#$%')); // true
console.log(reg.test('12345')); // false
- \s : 表示 一位 空白内容 (空白,缩进)
var reg = /\s/
console.log(reg.test('1234#%@')); // false 没有空白
console.log(reg.test('12324 @#$%')); //true 有一位空白内容就是true
- \S : 表示 一位 非空白内容 (有内容就为true,无内容为false)
var reg = /\S/
console.log(reg.test('1234#%@')); //true 没有空白为true
console.log(reg.test(' 1 2 3 4 # % @ # ')); // true 有内容
console.log(reg.test('1234#%@#')); // true 有内容
console.log(reg.test(' ')) // false 非空白没有空白为true,有空白则为false
- \w : 表示 一位 数字(0~9)字母(a-zA-Z)下划线(_)
var reg = /\w/ //表示一位 数字(0-9)字母(a-zA-Z),下划线(_)
console.log(reg.test('abc')); // true 包含字母
console.log(reg.test('a1b2c3')); // true 包含字母,数字
console.log(reg.test('a1b2c3_')); // true 包含字母,数字,下划线
console.log(reg.test('#$%')); // false 没有数字,字母,下划线
- \W : 表示 一位 非数字字母下划线
var reg = /\W/ //表示一位 非数字字母下划线内容
console.log(reg.test('abc')); //false 匹配非数字字母下划线
console.log(reg.test('abc123')); //false
console.log(reg.test('abc123_')); //false
console.log(reg.test('#$%^')); // true
console.log(reg.test(' ')); // true
- . : 表示 一位 非换行内容
var reg = /./ //表示一位 非换行内容
console.log(reg.test('#$%^')); //true 没有换行
console.log(reg.test('adfgd')); //true 没有换行
console.log(reg.test('12345')); //true 没有换行
console.log(reg.test('\n')); //false \n: 在 js 中表示换行
- \ : 表示 转义
var reg = /\d\.\d/ // \. : 表示一个小数点没有特殊含义
// var reg = /4.5/
// var reg = /\d\.\d/ // 表示小数
console.log(reg.test('abc')); // false 不是小数
console.log(reg.test('5.4')); // true 是小数
console.log(reg.test('100')); // false 没有小数点
四.正则的边界元字符
1. ^ : 表示开头
var reg = /^\d/ // 表示字符串开头必须是数字
console.log(reg.test('100avbd')); // true 开头是数字
console.log(reg.test('acavd333')); //false
2. $ : 表示结尾
var reg = /\d$/ // 表示字符串结尾是一位数字
console.log(reg.test('100avbd')); // false
console.log(reg.test('acavd333')); //true 结尾是数字
当 开头与结尾 共同使用时,表示 字符串 必须是 规则里的内容
var reg = /abc/ // 表示 字符串 中包含 'abc'
console.log(reg.test('abcd')); // true
var reg = /^abc$/ // 表示字符串必须是abc
console.log(reg.test('abcd')); // false
五.正则的限定元字符
限定了 前一个符号 出现多少次
1. * : 表示 0 ~ 正无穷次
var reg = /^\d*$/ // 表示数字可以出现0 ~ 正无穷次
console.log(reg.test('abc')); // false 只能是数字!!!
console.log(reg.test('_99')); // false 只能是数字!!!
console.log(reg.test('666')); // true
2. + : 表示 1 ~ 正无穷次
var reg = /^\d+$/ // 表示 1 ~ 正无穷次
console.log(reg.test('abc')); // false 只能是数字!!!
console.log(reg.test('_99')); // false 只能是数字!!!
console.log(reg.test('666')); // true
console.log(reg.test(' ')); // false 只能是数字!!!
console.log(reg.test('!')); // false 只能是数字!!!
3. ? : 表示 0 ~ 1 次
var reg = /^\d?$/ // 表示 0 ~ 1 次
console.log(reg.test('6')); // true
console.log(reg.test('66')); // false
4. {n} : 表示 限定 n 次
var reg = /^\d{3}$/ // 表示 限定 3 次
console.log(reg.test('6')); // false
console.log(reg.test('66')); // false
console.log(reg.test('666')); // true
console.log(reg.test('6666')); // false
5. {n,} : 表示 限定 最少出现 n 次
var reg = /^\d{3,}$/ // 表示 限定 最少 3 次 ,逗号后不要加空格!!!
console.log(reg.test('6')); // false
console.log(reg.test('66')); // false
console.log(reg.test('666')); // true
console.log(reg.test('6666')); // true
6. {n,m} : 表示 限定 最少出现 n 次,最多出现 m 次
var reg = /^\d{3,4}$/ // 表示 限定 最少 3 次 ,最多 4 次 ,逗号后不要加空格
console.log(reg.test('6')); // false
console.log(reg.test('66')); // false
console.log(reg.test('666')); // true
console.log(reg.test('6666')); // true
console.log(reg.test('12345')); // false 最多4次,出现了5次
六.正则的特殊元字符
1. () :
- 含义1 : 单独捕获
- 含义2 : 一个整体
// var reg = /abc{2}/ // c 出现2次
var reg = /(abc){2}/ // abc 出现2次
console.log(reg.test('abc')); // false
console.log(reg.test('abcabc')); // true
console.log(reg.test('abcffd')); // false abc 出现2次!!
2. | : 或
var reg = /a|b/
console.log(reg.test('a')); // true
console.log(reg.test('b')); // true
console.log(reg.test('c')); // false 不存在!!
3. [] : 包含中括号内 其中一个即可
在中括号内可以书写任意数量的字符, 但是字符串只要满足其中一个即可
var reg = /^[abcd]$/ // 字符串中包含 a b c d 任意一个即可
console.log(reg.test('a')); // true
console.log(reg.test('b')); // true
console.log(reg.test('c')); // true
console.log(reg.test('d')); // true
console.log(reg.test('abcd')); // false 只能包含其中一个
4. [^] : 非 或者 不包含
在中括号内可以书写任意数量的字符,只要字符串不是其中的某一个就行
var reg = /^[^abcd]$/ // 字符串不包含a b c d 即可
console.log(reg.test('a')); // false
console.log(reg.test('c')); // false
console.log(reg.test('f')); // true 不是其中任何一个为true
5. - : 到 或者 至
通常和 []包含 [^]不包含 连用
/[0-9]/ 正则代表的含义 数字0-9 等价于 \d
/[^0-9]/ 正则代表的含义 非数字0-9 等价于 \D
/[a-z]/ 表示字母a-z
/[0-9a-zA-Z]/ 等价于\w
七.元字符或的分界线在哪里?
或的分界线为 小括号 或者 正则的边界
1. 正则的边界
var reg = /^abc|def$/
// 分析: ^abc 或者 def$
console.log(reg.test('abc1233')); //true
console.log(reg.test('1233def')); //true
console.log(reg.test('123abcdef3')); //false 开头和结尾不匹配
2. 小括号的边界
var reg = /^ab(c|d)ef$/
/*
分析:
^ab c ef$
^ab d ef$
*/
console.log(reg.test('abcef')); //true
console.log(reg.test('abdef')); //true
console.log(reg.test('hhvf')); //false
console.log(reg.test('abdhih')); //false
八.正则的重复元字符
- 符号 : \数字
- 符号 : \1 \2 \3
- 含义 : 表示 重复 第n个 小括号的内容, 并且要求和小括号内容完全一致
var reg = /^(abc|def)\1$/
/*
// \1 : 重复前边第一个小括号的内容,小括号内如果是'abc' 那么\1 的值也需要时'abc
*/
console.log(reg.test('abcabc')); // true
console.log(reg.test('defdef')); // true
console.log(reg.test('abcdef')); // false abc符合 \1 应该是abc
console.log(reg.test('defabc')); // false def符合 \1 应该是def
要求 字符串是 span 标签或者 p 标签
/*
流程:
1. var reg = /<span></span>/
!!!因为 span 的结束标签前有一个 / js会把它识别为正则的结束, 所以需要加一个转义符
2. var reg = /<span><\/span>/
!!! 因为 span 或者 p 标签都可以, 所以需要将 span 标签开头加一个 元字符 或|
3. var reg = /<span|p><\/span>/
!!! 因为 结束标签的文本一定要和开始标签相同, 所以可以在结束标签后写一个 \1 ,表示重复第一个小括号的内容
4. var reg = var reg = /<(span|p)><(\/\1)>/
*/
var reg = /<(span|p)><(\/\1)>/
console.log(reg.test('<span></span>')); // true
console.log(reg.test('<p></p>')); // true
console.log(reg.test('<div></div>')); // false
九.正则的标识符
书写在正则的外面,用来描述整个正则表达式
1. i : 表示忽略大小写
// var reg = /^[abcd]$/ // abcd 其中任意一个,必须是小写
var reg = /^[abcd]$/i // abcd 其中任意一个,大小写都可
console.log(reg.test('a')); // true
console.log(reg.test('A')); // true
console.log(reg.test('w')); // false
2. g : 全局
十.案例练习
案例需求 : 将 字符串内 所有满足正则规则的片段 全部捕获出来,放到一个数组内
var reg = /\d{3}/g
var str = 'qwe123asd456zxc789'
/*
['123','456','789']
*/
十一.正则的两大特性
1. 懒惰
- 每次捕获 都是在 下标0 的位置开始捕获
- 解决 : 在正则后添加全局标识符
var str = '<div class="box" id="id_box"><span></span></div>'
// 贪婪限定符
var reg1 = /<div.*>/
console.log(reg1.exec(str)[0]);
2. 贪婪
- 每次捕获内容时, 尽可能多去捕获
- 解决 : 使用非贪婪限定符 (在原有的限定符后添加一个?)
- 贪婪限定符 : * , + , ? , {n,} , {n,m}
- 非贪婪限定符 : +? , {n,}
var str = '<div class="box" id="id_box"><span></span></div>'
var reg2 = /<div.*?>/
console.log(reg2.exec(str)[0]);
