正则表达式

正则表达式

推荐正则表达式的练习网站：
正则表达式

介绍

含义

是用于匹配字符串中字符组合的模式

用来查找、替换那些符合正则表达式的文本

在js中，正则表达式也是对象

使用场景

• 表单验证：手机号的格式（匹配）
• 过滤掉页面中的敏感词，或者个人信息（替换）
• 获取我们想要的特定部分（提取）

组成

普通字符

写啥匹配啥

大多数的字符仅表示它自身，例如所有的字母和数字

元字符

是一些具有特殊含义的字符，可以极大提高灵活性和匹配功能

例如：26个英文字母，元字符写法：[a-z]

语法

1. 定义规则
2. 查找

语法：

let 变量名 = /表达式/ 

例如：

let reg = /a/ 
// 这句正则用于匹配a

方法

1. test方法

判断字符串中是否有符合正则模式的。

如果有返回true，否则返回false。

2. 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'
        })