文章目录
一、正则表达式是什么?
💡 Tips:正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中,正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法,以及 String 的 match、matchAll、replace、search 和 split 方法。
二、正则表达式作用是什么?
💡 Tips:用正则的语法书写一个规则, 验证 字符串 是否符合规则
三、创建正则表达式
(一)字面量方式创建
语法 var reg = /正则符号/
(二)内置构造函数方式创建
var reg = new RegExp('正则符号')
四、正则符号
(一)常用元字符
💡 Tips:元字符是拥有特殊含义的字符
1.普通元字符
- \d 表示匹配 一位 数字(0-9)
var reg = /\d/
console.log(reg.test('asdfasdfasdfasdf')); // false
console.log(reg.test('$asdfasdfasdfasdf')); // false
console.log(reg.test('#asdfasdfasdfasdf')); // false
console.log(reg.test('1asdfasdfasdfasdf')); // true
console.log(reg.test('asdfasdfa888888sdfasdf')); // true
- \D 表示匹配 一位 非数字
var reg = /\D/
console.log(reg.test('1234567890'));//false
console.log(reg.test('1234567890#'));//true
console.log(reg.test('123456 7890'));//true
console.log(reg.test('d1234567890'));//true
- \s 表示匹配 一位 空白内容 (空格 缩进 制表符…)
var reg = /\s/
console.log(reg.test('afsdfasdfasdf'));
console.log(reg.test('afsdfas dfasdf'));
- \S 表示匹配 一位 非空白内容
var reg = /\S/
console.log(reg.test(' '));
console.log(reg.test(' 1 '));
- \w 表示匹配 一位 数字(0-9) 字母(a-zA-Z) 下划线(_) 任意内容
var reg = /\w/
console.log(reg.test('!#$%&@*()'));
console.log(reg.test('!#$%&@*()4'));
console.log(reg.test('!#$%&@*()_'));
console.log(reg.test('!#$%&@*()a'));
console.log(reg.test('!#$%&@*()A'));
- \W 表示匹配 一位 非数字字母下划线内容
var reg = /\W/
console.log(reg.test('!#$%&@*()'));
console.log(reg.test('!#$%&@*()4'));
console.log(reg.test('!#$%&@*()_'));
console.log(reg.test('!#$%&@*()a'));
console.log(reg.test('!#$%&@*()A'));
console.log(reg.test('123456789_abc'));
console.log(reg.test('123456789_abc#'));
- . 表示匹配 一位 非换行(\n)的任意内容
var reg = /./
// var test = 'a\na\na'
// console.log(test);
console.log(reg.test("\na"));
- \ 表示转义符,把有意义的符号转换成没有意义的文本,把没有意义的文本转换成有意义的符号
var reg = /d/ // 只要字符串中有字母d就可以, 此刻d是一个普通文本
var reg = /\d/ // 此刻 \ 转义符把普通文本转成了有意义的符号
console.log(reg.test('abcd'));
2.边界元字符
💡 Tips:当开头^和结尾$一起使用的时候,表示从开头匹配到结尾
- ^ 表示开头,规则是表示字符串必须由指定的字符开头
var reg = /^\d/
console.log(reg.test('sksflksdfglkd'));
console.log(reg.test('3adfadfasf'));
console.log(reg.test('33asdfasdfas'));
- $ 表示结尾,规则是表示字符串必须指定的字符结尾
var reg = /\d$/
console.log(reg.test('asfasdfasdfasdf'));
console.log(reg.test('1asfasdfasdfasdf'));
console.log(reg.test('1asfasdfasdfasdf6'));
3.^和结尾$连用,表示从开头到结尾只能由指定的字符组成
var reg = /^\d$/
console.log(reg.test('12341234'));
console.log(reg.test('1abc2'));
console.log(reg.test('5'));
3.限定元字符
- ** * **表示 0 ~ 正无穷次
// 规则 表示字符串从开头到结尾只能由 0 ~ 多个 数字组成
var reg = /^\d*$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
- ** + **表示 1 ~ 正无穷次
// 规则 表示字符串从开通到结尾只能由 1 ~ 多个 数字组成
var reg = /^\d+$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
- ** ? ** 表示 0 ~ 1 次
// 规则 表示字符串从开头到结尾只能由 0 ~ 1 数字组成
var reg = /^\d?$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('123'));
console.log(reg.test('12345'));
console.log(reg.test('a'));
- ** {n} **表示 限定n次
// 规则 表示字符串从开头到结尾只能由2个数字组成
var reg = /^\d{2}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('1345'));
console.log(reg.test('a'));
- ** {n,} **表示 至少n次
- {0,} 0 ~ 正无穷
- {1,} 1 ~ 正无穷
// 规则 表示字符串从开头到结尾只能由 5 ~ 多个 数字组成
var reg = /^\d{5,}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('13454'));
console.log(reg.test('a'));
- **{n,m} **表示n ~ m次
- {0,1} 表示 0 ~ 1 次
// 规则 表示字符串从开头到结尾只能由 3 ~ 5 数字组成
var reg = /^\d{3,5}$/
console.log(reg.test(''));
console.log(reg.test('1'));
console.log(reg.test('13'));
console.log(reg.test('13454'));
console.log(reg.test('a'));
4.特殊元字符
1. ()
- 表示单独捕获,是一个整体
// 此时 {2} 修饰的是前面的一个(),表示()里面的内容整体出现2次
var reg = /^(abc){2}$/
console.log(reg.test('abc'));
console.log(reg.test('abcc'));
console.log(reg.test('abcabc'));
2. |
- 表示或
- 注意 或的边界到小括号或者正则边界
// 规则 ()里面的内容出现两次, () 里面的内容是abc 或者 def
/^(abc|def)(abc|def)$/
var reg = /^(abc|def){2}$/
console.log(reg.test('abc'));
console.log(reg.test('def'));
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
// 或的分界线在哪里 ===> 小括号 () 或者 正则边界 //
var reg = /^abc|def$/
console.log(reg.test('abcef'));
console.log(reg.test('abdef'));
console.log(reg.test('abcasdfasdfascccc'));
console.log(reg.test('aassdfasdfdef'));
var reg = /^(abc|def)$/
console.log(reg.test('abc'));
console.log(reg.test('def'));
3. []
- 表示包含
- 注意 一个[] 只占一个字符位置
- 书写在[]里面的任意一个都行
// 该字符串只能有一位字符,这个字符可以是 a b c d中的任意一个
var reg = /^[abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('aa'));
console.log(reg.test('e'));
4. [^]
- 表示 非
- 一个[^]只占一个字符位置
- 书写在[^]里面的任意一个都不行
// 该字符串只能有一个字符,这个字符串除了abcd都可以
var reg = /^[^abcd]$/
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('aa'));
console.log(reg.test('e'));
5. -
- 表示 到
- 注意 必须是unicode编码连着的才可以写
- [0-9] 等价于 \d
- [^0-9] 等价于 \D
- [0-9A-Za-z_] 等价于 \w
- [^0-9A-Za-z_] 等价于 \W
- [\u4e00-\u9fa5] 表示所有中文
// 表示该字符串只能有一个字符组成 , 这个字符可以是0-9任意一个
var reg = /^[0-9]$/
console.log(reg.test(''));
console.log(reg.test('0'));
console.log(reg.test('9'));
console.log(reg.test('a'));
5.重复元字符
💡 Tips:作用: 表示重复第n个小括号的内容,要求和第n个小括号的内容一模一样
符号: \数字
\1
// 表示这个()里面的整体内容出现2次就可以。不要求一模一样
var reg = /^(abc|def){2}$/
console.log(reg.test('abcabc'));
console.log(reg.test('abcdef'));
console.log(reg.test('defdef'));
// 表示 \1 的位置上 需要出现一个 和 第一个 小括号 一模一样的内容
var reg = /^(abc|def)\1$/
console.log(reg.test('abcabc'));
console.log(reg.test('defdef'));
console.log(reg.test('abcdef'));
var reg = /^<(p|span)><\/\1>$/
console.log(reg.test('<p></p>'));
console.log(reg.test('<span></span>'));
console.log(reg.test('<p></span>'));
\2
// 表示重复第2个小括号的内容,要求和第2个小括号的内容一模一样
var reg = /^(abc|def)\2$/
console.log(reg.test('abcabcabc'));
console.log(reg.test('abcdefdef'));
console.log(reg.test('abcabcdef'));
(二)常用修饰符
💡 Tips:修饰符,也叫标识符。可以全局搜索,修饰整个正则表达式的符号 , 书写在正则表达式外面。修饰符有好几个,这里给大家介绍常用的两个。
- **i **
// 表示 验证字符串的时候,忽略大小写
var reg = /^[abcd]$/i
console.log(reg.test('a'));
console.log(reg.test('b'));
console.log(reg.test('c'));
console.log(reg.test('d'));
console.log(reg.test('A'));
- g
💡 Tips:学习修饰符g之前可以先了解一下正则的捕获方式
全局搜索
// 1. 有符合规则的字符串片段,没有使用g全局搜索
var reg = /\d{3}/
var str = 'adfa123sals456hdfl789kasakhdf012'
console.log(reg.exec(str));
// 1. 使用g全局搜索
var reg1 = /\d{3}/g
var str1 = 'adfa123sals456hdfl789kasakhdf012'
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
console.log(reg1.exec(str1));
💻Run:执行结果可以看出没有匹配到的返回null,匹配到的返回一个数组。在不使用全局搜索g时只能捕获(拿到)第一组匹配规则的字符串片段,当使用全局搜索g时,第二次捕获开始会从第一次捕获的结束为止开始检索,依次捕获,直到找不到内容,返回null。
五、正则常用方法
(一)匹配
- 语法 正则.test(检测的字符串)
- 返回值
- true 字符串满足要求
- false 字符串不满足要求
// 准备一个正则表达式
var reg = /abcd/
// 规则: 字符串中需要包含一个 'abcd' 字符串片段
// var res = reg.test('abcdadjflasfalkjglakdg')
// var res = reg.test('adjflasfalkjglakdgabcd')
var res = reg.test('adjflasfalab cdkjglakdg')
console.log(res);
(二)捕获
💡 Tips:作用 从原始字符串中捕获到符合正则规则的字符串片段
- 语法 正则表达式.exec(字符串)
- 返回值
- 当原始字符串没有符合规则的时候,返回null
- 当原始字符串由符合规则的片段的时候,返回值必然是一个数组
var reg = /\d{3}/
// 1. 没有符合规则的字符串片段
var str = 'affasfasfasf'
// console.log(reg.test(str));
console.log(reg.exec(str));
// 2. 有符合规则的字符串
var str1 = 'sbf12j123lkkj454ty'
console.log(reg.exec(str1));
console.log(reg.exec(str1));
console.log(reg.exec(str1));
💻Run:执行结果可以看出没有匹配到的返回null,匹配到的返回一个数组。细心的朋友们肯定发现了只能捕获(拿到)第一组匹配规则的字符串片段。当没有全局匹配g的时候不管写多少次,只能捕获到第一组。
案例
💡 Tips:需求是把字符串中满足正则规则的片段全部获取,放到一个数组中返回
🤔思考一下几个问题帮助解题:
- 循环 执行重复的步骤
- 循环多少次,循环的终止条件是啥
- 只要捕获的结果不是null, 就要再次循环
var reg = /\d{3}/g
var str = 'adfa123sals456hdfl789kasakhdf012'
// 准备空数组
var arr = []
var res = reg.exec(str)
while (res !== null) {
arr.push(res[0])
res = reg.exec(str)
}
console.log(arr);