正则表达式RegExp介绍
-
RegExp作用 : 对字符串进行逻辑规则匹配运算
内置对象:存储一些属性和方法
表达式:对字符串进行逻辑规则匹配运算 -
RegExp使用流程:
1. 创建正则对象
2. 调用test()方法开始匹配
原义文本字符与元字符
-
正则表达式规则语法主要分为两大类
-
原义文本字符 : 就是字符串本身的含义,没别的意思。
/abc/ : 检测字符串里面有没有abc.
不是有a或者有b或者有c, 也不是说有a和b和c。 就是看有没有字符串叫做abc。 -
元字符 :改变了字符串原本的含义。 (类似于js中的关键字)
()
[]
{}
+
*
.
|
?
^
$
\
-
console.log( /abc/.test('a123456') )//false
console.log( /abc/.test('a1b2c3123') )//false
console.log( /abc/.test('ab666c') )//false
console.log( /abc/.test('cba') )//false
console.log( /abc/.test('456abc123') )//true
字符类与反向类
- 字符类 : /[ abc ]/
/abc/
: 原义文本字符,检测字符串有没有abc
/[abc]/
: 字符类。 将a和b和c这三种字符归为一类,只要满足任何一类即可- 字符串里面只要有 abc任意一个字符即可
console.log(/[abc]/.test('abc123'))// true
console.log(/[abc]/.test('a123'))//true
console.log(/[abc]/.test('b123'))//true
console.log(/[abc]/.test('c123'))//true
console.log(/[abc]/.test('abcabc'))//true
console.log(/[abc]/.test('123123'))//false
- 反向类(负向类) :
/ [^abc] /
/[^abc]/ : 将没有a , 没有b,没有c的字符串归为一类。- 字符串里面只要有任意一个不是a 、 b 、 c即可
console.log(/[^abc]/.test('abc123'))// true
console.log(/[^abc]/.test('a123'))//true
console.log(/[^abc]/.test('b123'))//true
console.log(/[^abc]/.test('c123'))//true
console.log(/[^abc]/.test('abcabc'))//false
console.log(/[^abc]/.test('123123'))//true
范围类
-
范围类
/[0-9]/ : 检测是否有数字字符
/[a-z]/ : 检测是否有小写字母
/[A-Z]/ : 检测是否有大写字母- 注意点:
a. 范围是一个闭区间 : /[0-9]/ 包含0和9
b.范围类可以连接
:/[0-9a-zA-Z]/
: 检测字符串有没有数字 或者 英文字母
c. 范围类左边 < 右边 , 否则正则报错
/[5-8]/ :正确 检测5-8范围的数字
/[8-5]/ :错误 报错
- 注意点:
// /[0-9]/ : 检测是否有数字字符
console.log( /[0-9]/.test('abcabc') );//false
console.log( /[0-9]/.test('abc0') );//true
// /[a-z]/ : 检测是否有小写字母
console.log( /[a-z]/.test('abcabc') );//true
console.log( /[a-z]/.test('abc123') );//true
console.log( /[a-z]/.test('123456') );//false
// /[A-Z]/ : 检测是否有大写字母
console.log( /[A-Z]/.test('abcabc') );//false
console.log( /[A-Z]/.test('abc123') );//false
console.log( /[A-Z]/.test('A123456') );//true
// console.log( /[8-5]/.test('123'));//false
// console.log( /[5-8]/.test('6'));//true
预定义类
-
预定义类:相当于js的api。 作者提前封装好的直接使用即可
正则表达式提供好的用来匹配常见的字符类
预定义类 | 等价类 | 含义 |
---|---|---|
. | [^\r\n] | 除了回车和换行之外的所有字符 |
\d | [0-9] | 数字字符 |
\D | [^0-9] | 非数字字符 |
\s | [\f\n\r\t\v] | 空白字符 |
\S | [^\f\n\r\t\v] | 非空白字符 |
\w | [a-zA-Z_0-9] | 单词字符(字母、下划线、数字) |
\W | [^a-zA-Z_0-9] | 非单词字符) |
// (1) /./ : [^\r\n] 除了回车和换行之外的所有字符
console.log( /./.test('asfsa') );//true
console.log( /./.test('\n\r') );//false
// (2) \d :[0-9] 数字字符
console.log(/\d/.test('abcabc'));//false
console.log(/\d/.test('abc123'));//true
console.log(/\d/.test('123123'));//true
// (3) \D :[^0-9] 非数字字符
console.log(/\D/.test('abcabc'));//true
console.log(/\D/.test('abc123'));//true
console.log(/\D/.test('123123'));//false
// (4) \s :[\f\n\r\t\v] 空白字符
console.log(/\s/.test('abcabc'));//false 字符串没有空格字符
console.log(/\s/.test('abc abc'));//true 字符串里面有空格
// (5) \S :[\f\n\r\t\v] 非空白字符
console.log(/\S/.test('abcabc'));//true 有非空白字符
console.log(/\S/.test('abc abc'));//true
console.log(/\S/.test(' '));//false 没有非空白字符,全是空白字符
// (5) \w : [a-zA-Z_0-9] 单词字符 (字母、数字、下划线_)
console.log(/\w/.test('abcabc'));//true
console.log(/\w/.test('abc123'));//true
console.log(/\w/.test('_.,.,.,.,'));//true
console.log(/\w/.test('.,.,.,.,'));//false
// (6) \W : [a-zA-Z_0-9] 非单词字符 (字母、数字、下划线_)
console.log(/\W/.test('abcabc'));//false
console.log(/\W/.test('abc123'));//false
console.log(/\W/.test('_.,.,.,.,'));//true
console.log(/\W/.test('.,.,.,.,'));//true
边界
- 边界:正则表达式提供了几个常用的边界匹配字符
边界字符 | 含义 |
---|---|
^ | 以xxxx开头 |
$ | 以xxxx结束 |
\b | 单词边界 |
\B | 非单词边界 |
- /^abc/ : 开头边界,以xxx开头
- /[^abc]/ : 方向类。 有非abc任意字符
- /^abc/ : 开头边界
- 正确含义:
以a开头 + bc
- 千万不要理解错了, 错误含义: 以abc开头. 看起来效果是一样,但是这样解读就是错的
console.log( /^abc/.test('a1b1bc1') );//false
console.log( /^abc/.test('abc123') );//true
console.log( /^abc/.test('123abc') );//false
- /abc$/ : 结尾边界。 以xxx结尾
- 正确含义:
ab + c(结尾)
- 错误含义: 以abc结尾. 虽然效果类似,但是这样解读就是错的
console.log( /abc$/.test('a1b1c') );//false
console.log( /abc$/.test('abc123') );//false
console.log( /abc$/.test('123abc') );//true
- 正则最重要的知识点:
严格匹配
- /^abc$/ : 严格匹配。 只有唯一的正确答案: abc
- 正确含义: 以 a(开头) + b + c(结尾)
console.log( /^abc$/.test('abcabc'));//false
console.log( /^abc$/.test('abc123'));//false
console.log( /^abc$/.test('123abc'));//false
//唯一的正确答案
console.log( /^abc$/.test('abc'));//true
量词
-
量词: 表示字符出现的数量
量词 含义 ? 出现零次或一次(最多出现一次) + 出现一次或多次(至少出现一次) * 出现零次或多次(任意次) {n} 出现n次 {n,m} 出现n-m次 {n,} 出现至少n次(>=n)
console.log( 'a123456789'.replace(/\d?/,'X')) ;//Xa123456789
console.log( '123456789'.replace(/\d?/,'X')) ;//X23456789
console.log( '123456789'.replace(/\d+/,'X')) ;//X
console.log( 'a123456789'.replace(/\d+/,'X')) ;//aX
console.log( '123456789'.replace(/\d*/,'X')) ;//X
console.log( 'a123456789'.replace(/\d*/,'X')) ;//Xa123456789
console.log( '123456789'.replace(/\d{5}/,'X')) ;//X6789
console.log( '123456789'.replace(/\d{5,8}/,'X')) ;//X9
console.log( '123456789'.replace(/\d{5,}/,'X')) ;//X
console.log( '123'.replace(/\d{5,}/,'X')) ;//123 此时数字数量小于五, 正则无法匹配。 无法替换
分组
- ()元字符在正则表达式中有三种含义
- 分组 :将多个字符分为一组(默认情况下,量词只能对单个字符生效。如果希望量词可以对多个字符生效,就可以使用()将多个字符分为一组。)
console.log(/love{3}/.test('lovelovelove'));//fasle
console.log(/love{3}/.test('loveee'));//true
console.log(/(love){3}/.test('lovelovelove'));//true
console.log(/(love){3}/.test('loveee'));//false
- 提升优先级:提升优先级 : 需要结合 | 一起使用
| :
或。 默认会被两边所有的字符生效。如果只希望对某个字符生效,就可以使用()提升|的优先级
/*需求: 匹配 出现love 或者 live的单词
/lo|ive/ : 匹配 lo 或者 ive的单词
/l(o|i)ve/ : 匹配 l + o或者i + ve的单词
*/
console.log(/lo|ive/.test('lo1111'));//true
console.log(/lo|ive/.test('222ive'));//true
console.log(/lo|ive/.test('love'));//true
console.log(/l(o|i)ve/.test('lo1111'));//false
console.log(/l(o|i)ve/.test('222ive'));//false
console.log(/l(o|i)ve/.test('love'));//true
- 反向引用 : 正则表达式会把小括号中匹配到的内容给存起来。存入$1-$9中。 用于反向引用。
/*
场景 : 日期格式 大陆日期格式 yyy-mm-dd 香港日期格式:dd-mm-yyyy
2020-08-15 转换成 15/08/2020
*/
console.log( '2020-08-15'.replace(/(\d{4})-(\d{2})-(\d{2})/,'$3/$2/$1') );//15/08/2020
修饰符
- 修饰符:影响整个正则规则的特殊符号(对正则起修饰作用)
i
: intensity 不区分大小
g
: global 全局匹配
m
: multiple 检测换行符(需要和边界一起使用) - 修饰符语法: /正则表达式/修饰符
//1. i : intensity 不区分大小
console.log( 'AaAAAaaa'.replace(/a/,'X') );// AXAAAaaa 默认情况下正则区分大小写
console.log( 'AaAAAaaa'.replace(/a/i,'X') );// XaAAAaaa i:不区分大小写
//2. g : global 全局匹配
console.log( 'AaAAAaaa'.replace(/a/,'X') );// AXAAAaaa 默认情况下正则只能匹配第一个
console.log( 'AaAAAaaa'.replace(/a/g,'X') );// AXAAAXXX g:全局匹配
/* 细节: 修饰符支持同时写多个 */
console.log( 'AaAAAaaa'.replace(/a/ig,'X') );//XXXXXXX 不区分大小写,全局匹配
//3 m : multiple 检测换行符
/*
让边界 能够识别换行符
*/
//每一行的第一个我,改成你字
let str = '我爱她\n我爱她\n我爱她';
console.log(str);
console.log( str.replace(/^我/gm,'你') );
贪婪模式与非贪婪模式(一般用于量词)
- 贪婪模式:正则表达式在匹配成功的前提下,尽可能多的匹配(默认模式)
- 非贪婪模式:正则表达式匹配成功的前提下,尽可能少的匹配(在量词后面加上 ?)
//1.贪婪模式:正则表达式在匹配成功的前提下,尽可能多的匹配
var reg = /\d{3,6}/;//匹配3-6位数字
console.log ( "1234567890".replace ( reg, "X" ) );//X7890 (正则表达式会匹配6位数字)
//2.非贪婪模式:正则表达式匹配成功的前提下,尽可能少的匹配
//语法:在量词后面加上 ?
var reg1 = /\d{3,6}?/;//匹配3-6位数字
console.log ( "1234567890".replace ( reg1, "X" ) );//X4567890 (正则表达式会匹配3位数字)