推荐正则表达式的练习网站: 正则表达式
是用于匹配字符串中字符组合的模式
用来查找、替换那些符合正则表达式的文本
在js中,正则表达式也是对象
写啥匹配啥
大多数的字符仅表示它自身,例如所有的字母和数字
是一些具有特殊含义的字符,可以极大提高灵活性和匹配功能
例如:26个英文字母,元字符写法:[a-z]
语法:
let 变量名 = /表达式/
例如:
let reg = /a/
// 这句正则用于匹配a
判断字符串中是否有符合正则模式的。
如果有返回true,否则返回false。
搜索匹配字符串
如果找到了结果是数组
没有找到结果是null
💡 转义字符: \
|
:或 优先级最低
()
优先级最高
// | 优先级最低 左右两边都是个单独的整体
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 中的任意一个
在[]里面可以写 - 表示范围
console.log(/[a-zA-Z0-9]/) // 表示 a-z或者 A-Z 或者 0-9 范围中的任意一个
在[]里面可以写 ^ 表示非
表示位置,开头和结尾,必须用什么开头,用什么结尾
^
以谁开始
$
以谁结束
// ^ 以谁开始
// $ 以谁结束
// 使用边界符进行精确匹配
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'
})