正则表达式
推荐正则表达式的练习网站:
正则表达式
介绍
含义
是用于匹配字符串中字符组合的模式
用来查找、替换那些符合正则表达式的文本
在js中,正则表达式也是对象
使用场景
- 表单验证:手机号的格式(匹配)
- 过滤掉页面中的敏感词,或者个人信息(替换)
- 获取我们想要的特定部分(提取)
组成
普通字符
写啥匹配啥
大多数的字符仅表示它自身,例如所有的字母和数字
元字符
是一些具有特殊含义的字符,可以极大提高灵活性和匹配功能
例如:26个英文字母,元字符写法:[a-z]
语法
- 定义规则
- 查找
语法:
let 变量名 = /表达式/
例如:
let reg = /a/
// 这句正则用于匹配a
方法
- test方法
判断字符串中是否有符合正则模式的。
如果有返回true,否则返回false。
- exec方法
搜索匹配字符串
如果找到了结果是数组
没有找到结果是null
元字符
预定义类
- \d 匹配 0-9 的任意一个数字
- \D 匹配非 0-9 的数字
- \w 匹配任意一个单词字符 a-z A-Z 0-9 下划线
- \W 匹配任意非单词字符
- \s 匹配不可见字符(空白,比如空格 换行\n 制表符\t )
- \S 匹配可见字符
- . 匹配除换行\n外的任意字符
优先级
|
:或 优先级最低
()
优先级最高
// | 优先级最低 左右两边都是个单独的整体
console.log(/f|boot/.test('f')) // t
console.log(/f|boot/.test('foot')) // t
console.log(/f|boot/.test('boot')) // t
console.log(/f|boot/.test('boo')) // f
console.log(/f|boot/.test('foo')) // t
console.log(/f|boot/.test('oot')) // f
// () 优先级最高
// 分析:/(f|b)oot/ 表示匹配的是foot或者boot
console.log(/(f|b)oot/.test('f')) // f
console.log(/(f|b)oot/.test('foo')) // f
console.log(/(f|b)oot/.test('boo')) // f
console.log(/(f|b)oot/.test('oot')) // f
console.log(/(f|b)oot/.test('foot')) // t
console.log(/(f|b)oot/.test('boot')) // t
字符类
/[]/
字符类的元字符
[] 自带或者含义
-
比如 /[abc]/ 表示匹配的是a b c 中的任意一个
-
在[]里面可以写 - 表示范围
- /[a-z]/ 表示匹配 a-z 中的任意一个
- /[0-9]/ 表示匹配 0-9 中的任意一个
- /[A-K]/ 表示匹配 A-K 中的任意一个
console.log(/[a-zA-Z0-9]/) // 表示 a-z或者 A-Z 或者 0-9 范围中的任意一个
-
在[]里面可以写 ^ 表示非
- 比如 /[^abc]/ 表示匹配的不能是a b c中的任意一个
边界符
表示位置,开头和结尾,必须用什么开头,用什么结尾
^
以谁开始
$
以谁结束
// ^ 以谁开始
// $ 以谁结束
// 使用边界符进行精确匹配
console.log(/chuan/.test('chuang')) // t
console.log(/chuan/.test('dachuan')) // t
console.log(/chuan/.test('chuanchuan')) // t
// ^
console.log(/^chuan/.test('chuang')) // t
console.log(/^chuan/.test('dachuan')) // f
console.log(/^chuan/.test('chuanchuan')) // t
// $
console.log(/chuan$/.test('chuang')) // f
console.log(/chuan$/.test('dachuan')) // t
console.log(/chuan$/.test('chuanchuan')) // t
// ^ $ 一起使用
console.log(/^chuan$/.test('chuang')) // f
console.log(/^chuan$/.test('dachuan')) // f
console.log(/^chuan$/.test('chuanchuan')) // f
console.log(/^chuan$/.test('chuan')) // t
量词
表示重复次数
*
≥0次 {0,+∞}
+
≥1次 {1 , +∞}
?
0次或1次
{m}
m次 注意: {}是就近修饰的
{m,}
大于等于 m次
{m,n}
m到n次,包含m和n次
// *
console.log(/^a*$/.test('')) // t
console.log(/^a*$/.test('a')) // t
console.log(/^a*$/.test('aa')) // t
console.log(/^a*$/.test('aab')) // f
// +
console.log(/^a+$/.test('')) // f
console.log(/^a+$/.test('a')) // t
console.log(/^a+$/.test('aa')) // t
console.log(/^a+$/.test('aab')) // f
// ?
console.log(/^a?$/.test('')) // t
console.log(/^a?$/.test('a')) // t
console.log(/^a?$/.test('aa')) // f
console.log(/^a?$/.test('aab')) // f
// {}
console.log(/chuan{2}/.test('chuanchuan')) // f
console.log(/chuan{2}/.test('chuann')) // t
console.log(/(chuan){2}/.test('chuanchuan')) // t
// {2,5} 之间不要有空格
console.log(/(chuan){2,5}/.test('chuanchuan')) // t
例子
// 验证用户名案例
let input = document.querySelector('input')
// 中文范围的正则 [\u4e00-\u9fa5]
input.addEventListener('blur' , function() {
let res = /^[\u4e00-\u9fa5]{2,4}$/
if(res.test(input.value)) input.nextElementSibling.className = 'right'
else input.nextElementSibling.className = 'wrong'
})