正则表达式

1.1 什么是正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。

正则表达式在 JavaScript中的使用场景：

例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)

比如用户名: /^[a-z0-9_-]{3,16}$/

过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

1.2 语法

我们想要查找是否有戴眼镜的人, 怎么做呢？

1、定义规则： 戴眼镜的

2、根据规则去查找：找到则返回

正则同样道理，我们分为两步：

1、定义规则

2、查找

比如：查找下面文本中是否包含字符串 '前端'

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

1. 定义正则表达式语法：

2. 其中 / / 是正则表达式字面量 比如：

   

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法： 判断是否有符合规则的字符串：

test() 方法 用来查看正则表达式与指定的字符串是否匹配

语法：

如果正则表达式与指定的字符串匹配 ，返回true，否则false

转大小写和字符串数组转换

    <script>
        // 正则的作用 寻找字符串 检测这个字符串有没有我想要的文字
        const str = `我有仙心一颗，久被尘劳封锁，何日尘尽光生，照破山河万朵。`
        // 判断这个字符串有没有仙心两个字
        // 定义规则
        const reg = /仙心/;
        // 查看规则和字符串 是否匹配 
        console.log(reg.test(str)); // 有则返回true  没有返回false
    </script>

    <script>
        let msg = 'asghjuigi'
        // 转大写 toUpperCase()
        console.log(msg.toUpperCase());
        // 转小写 toLowerCase()
        console.log(msg.toLowerCase());

        // 字符串和数组很相似
        // 把字符串转成数组  split('') 按照什么来分给你的字符串变成数组
        const str = 'adjadhjo'
        console.log(str.split('')); // ['a', 'd', 'j', 'a', 'd', 'h', 'j', 'o']
        const str1 = 'a-d-j-a-d-h-j-o'
        console.log(str1.split('-')); // ['a', 'd', 'j', 'a', 'd', 'h', 'j', 'o']
        console.dir(str1.split('-')); // ['a', 'd', 'j', 'a', 'd', 'h', 'j', 'o']

        // 数组转字符串 join('') join 加入的意思
        const arr = ['a', 'd', 'j', 'a']
        console.log(arr.join('')); // adja
        console.log(arr.join('-')); // a-d-j-a

        // 连接 数组和数组之间连接
        const arr1 = ['a', 'd', 'j', 'a']
        const arr2 = ['1', '2', '3', '4']
        // 将两个数组合并成一个数组
        console.log(arr1.concat(arr2)); // ['a', 'd', 'j', 'a', '1', '2', '3', '4']

        // 字符串也有一个 concat 也是表示合并
        const str2 = '123'
        const str3 = 'abc'
        // 很少用 键盘坏了才使用这个
        console.log(str2.concat(str3)); // 123abc
        // 字符串拼接正常都是用 + 号拼接
        console.log(str2 + str3); // 更容易理解 简单  123abc
    </script>

JavaScript 中定义正则表达式的语法有两种，我们先学习其中比较简单的方法：

3.检索（查找）符合规则的字符串：

exec() 方法 在一个指定字符串中执行一个搜索匹配

语法：

元字符

普通字符:

大多数的字符仅能够描述它们本身，这些字符称作普通字符，例如所有的字母和数字。也就是说普通字符只能够匹配字符串中与它们相同的字符。

元字符(特殊字符）

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

比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm…..

但是换成元字符写法： [a-z]

参考文档：

MDN：developer.mozilla.org/zh-CN/docs/…

正则测试工具: tool.oschina.net/regex

为了方便记忆和学习，我们对众多的元字符进行了分类：

1. 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）

2. 量词(修饰符) （表示重复次数）

3. 字符类(占位符) （比如 \d 表示 0~9）

1. 边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

如果 ^ 和 $ 在一起，表示必须是精确匹配。

    <script>
        const str = `我有仙心一颗，久被尘劳封锁，何日尘尽光生，照破山河万朵。`

        const reg = /仙心/;
        console.log(reg.test(str)); // 只能里面有“仙心” 二字    有 则返回true 没有返回false
        // 检测字符串  /^仙心$/ 必须以‘仙’开头 以‘心’结尾
        const reg1 = /^仙心$/;  // 只能匹配“仙心”   const str = `仙心`  是 则返回true 不是返回false
        console.log(reg1.test(str));
        const reg2 = /^仙心/;     // ^ 表示以什么为开头  const str = `我有仙心一颗`  是 则返回true 不是返回false
        console.log(reg2.test(str));
        const reg3 = /仙心$/;     // $ 表示以什么为结尾  const str = `我有仙心`  是 则返回true 不是返回false
        console.log(reg3.test(str));

        /*  边界符 
            开头 ^ 
            结尾 $ 
       */
    </script>

2. 量词

量词用来 设定某个模式出现的次数

注意： 逗号左右两侧千万不要出现空格

示例：

    <script>
        // * 表示放在它前面那一个字符 可以出现0次或更多次
        console.log(/^荒*$/.test(''));      // true
        console.log(/^荒*$/.test('荒'));     // true
        console.log(/^荒*$/.test('荒荒'));   // true
        console.log(/^荒*$/.test('荒荒荒'));     // true
        console.log(/^荒*$/.test('黑'));     // false

        // + 表示放在它前面那一个字符 可以出现1次或更多次
        console.log(/^荒+$/.test(''));      // false

        console.log(/^荒+$/.test('荒'));     // true
        console.log(/^荒+$/.test('荒荒'));   // true
        console.log(/^荒+$/.test('荒荒荒'));     // true

        // ? 表示可以出现0次或1次
        console.log(/^荒?$/.test(''));      // true
        console.log(/^荒?$/.test('荒'));     // true
        console.log(/^荒?$/.test('荒荒'));   // false
        console.log(/^荒?$/.test('荒荒荒'));     // false

        // {n} 表示放在它前面那一个字符 可以出现n次
        console.log(/^荒{2}$/.test(''));      // false
        console.log(/^荒{2}$/.test('荒'));     // false
        console.log(/^荒{2}$/.test('荒荒'));   // true
        console.log(/^荒{2}$/.test('荒荒荒'));     // false

        // {n,} 放在它前面的字符 最少出现n次
        console.log(/^路{2,}$/.test('')); // true
        console.log(/^路{2,}$/.test('路')); // true
        console.log(/^路{2,}$/.test('路路'));// true
        console.log(/^路{2,}$/.test('路路路')); // true

        // {n,m} 放在它前面的字符 最少出现n次，最大是m次
        console.log(/^路{0,2}$/.test('')); // true
        console.log(/^路{0,2}$/.test('路'));  // true
        console.log(/^路{0,2}$/.test('路路')); // true
        console.log(/^路{0,2}$/.test('路路路'));  // false
    </script>

3.字符类

[ ] 匹配字符集合

后面的字符串只要包含 abc 中任意一个字符，都返回 true 。

        // [ab]  => 可以匹配 a  或者 b
        // console.log(/[ab]/.test('a'));// true
        // console.log(/[ab]/.test('b'));// true
        // console.log(/[abc]/.test('c'));// true
        console.log(/[abc]/.test('cry'));// true
			console.log(/[abc]/.test('die'));// false

[ ] 里面加上 - 连字符
使用连字符 - 表示一个范围

[a-z] 表示 a 到 z 26个英文字母都可以

[a-zA-Z] 表示大小写都可以

[0-9] 表示 0~9 的数字都可以

示例

    <script>
        // 表示 a-z 任意的一个字母
        // console.log(/[a-z]/.test('c'));// true
        // console.log(/[a-z]/.test('d'));// true
        // console.log(/[a-z]/.test('123'));// false
        // console.log(/[a-d]/.test('a'));// true
        // console.log(/[a-d]/.test('g'));// false
  
        // 0-9 任意的一个数字
        // console.log( /[0-9]/.test("1") );// true
        // console.log( /[0-9]/.test("2") );// true
        // console.log( /[0-9]/.test("0") );// true
  
        // A-Z
        // console.log(/[A-Z]/.test("a"));// false
        // console.log(/[A-Z]/.test("B"));// true
  
        // 同时满足 0-9a-zA-Z
        console.log(/[0-9a-zA-Z]/.test('1'));// true
        console.log(/[0-9a-zA-Z]/.test('a'));// true
        console.log(/[0-9a-zA-Z]/.test('A'));// true
        console.log(/[0-9a-zA-Z]/.test(' '));// false
      </script>

[ ] 里面加上 ^ 取反符号
比如： 注意要写到中括号里面

. 匹配除换行符之外的任何单个字符

预定义：指的是某些常见模式的简写方式。

    <script>
        // . 表示除了(换行符之外) 任意字符都可以
        console.log(/./.test('路路路'));  // true
        console.log(/叶.仙/.test('叶倾仙')); // true
        console.log(/叶.仙/.test('叶小仙')); // true
        console.log(/叶.仙/.test('叶仙')); // false
        console.log(/叶.仙/.test('叶 仙')); // true

        // \d 表示数字
        // console.log(/\d/.test("路飞"));// false

        // console.log(/\d/.test("1路飞"));// true
        // console.log(/\d/.test("路3飞"));// true

        // \D 不是数字之外的任意1个字符
        // console.log(/\D/.test("123"));// false
        // console.log(/\D/.test("12a3"));// true
        // console.log(/\D/.test("12a3"));// true

        // \w  字母、数字、下划线
        // console.log(/\w/.test("123"));//  true
        // console.log(/\w/.test("%%"));//  false
        // console.log(/\w/.test("%1%"));//  true
        // console.log(/\w/.test("%a%"));//  true
        // console.log(/\w/.test("%_%"));//  true

        // \W  除去了 字母 、数字、下划线 之外字符
        // console.log(/\W/.test("123"));// false
        // console.log(/\W/.test("1%23"));// true

        // \s  匹配空格
        // console.log(/\s/.test("123"));// false
        // console.log(/\s/.test("1 23"));// true

        // \S 除了空格之外的字符
        // console.log(/\S/.test('123'));// true
        // console.log(/\S/.test(' '));// false
        // console.log(/\S/.test('   '));// false
    </script>

4 修饰符

修饰符约束正则执行的某些细节行为，如是否区分大小写、是否支持多行匹配等

语法：

i 是单词 ignore 的缩写，正则匹配时字母不区分大小写

g 是单词 global 的缩写，匹配所有满足正则表达式的结果

正则替换

替换 replace 替换

语法：

替换演示

    <script>
      let str = '天文 今天请吃饭';

      // 吃饭 -> 上天台
      // "字符串".replace("待替换文字","替换什么样")    返回一个新的字符串
      let newStr = str.replace('吃饭', '上天台');
      console.log(newStr);
    </script>

将数字 替换成 *

g 属于正则中的 修饰符 表示 全局 global

i ignore忽略 忽略大小写

    <script>
      let str = '天文 HEIGHT 180 ';

      // 将数字 替换成 *
      // str.replace("支持正则的方式来匹配文字","要替换成什么样");
      // str = str.replace(/\d+/, '*');// 找到一个或者多个数字，然后只替换成一个 * 
      // str = str.replace(/\d/g, '*');// g 属于正则中的 修饰符 表示 全局 global 
      // console.log(str);

      //  把英文字母替换成 * 
      // str=str.replace(/[a-zA-Z]/g,"*")
      str=str.replace(/[a-z]/gi,"*") // i ignore忽略  忽略大小写 
      console.log(str);
    </script>

    <script>
        // let str ='0980980980980980'
        // replace方法是字符串的方法，
        // 语法 : str.replace(/正则表达式/，'替换的文本')
        // 只会值的第一处满足条件的字符串
        // str = str.replace(/0/g,'')
        // str = str.replaceAll('0','')
        // console.log(str)
        let keys =['上', '下', '左', '右']
        let str ="我在上楼的时候，看到下面有人在左侧抽烟"
        let reg
        for (let i = 0; i < keys.length; i++) { 
            reg = new RegExp(`${keys[i]}`) 
            console.log(reg, typeof reg)
            str = str.replace(reg, '*')
        }
        console.log(str)
    </script>

演示

    <script>
      // 注册账号  填写用户名 规则 必须是字母，范围 3-8
      // console.log(/[a-zA-Z]/);// 一个字母
      // console.log(/[a-zA-Z]/.test("a"));// true
      // 3-8
      // {3,8} 修饰前面[]
      // console.log(/[a-zA-Z]{3,8}/.test("ab"));// false
      // console.log(/[a-zA-Z]{3,8}/.test("abc"));// true
      // console.log(/[a-zA-Z]{3,8}/.test("111222 abc 333444"));// true
      // 边界符
      // console.log(/^[a-zA-Z]{3,8}$/.test("111222 abc 333444"));// false
      // console.log(/^[a-zA-Z]{3,8}$/.test("abc"));// true

      // 手机号码 验证  知道手机号码的验证规则 不懂去百度
      // 规则 以数字1开头 第二位数字可以是 35789  其他9位数字 （11位数组）
      // console.log( /^1[35789]\d{9}$/.test("dd")  );// false
      // console.log( /^1[35789]\d{9}$/.test("12345678901")  );// false
      // console.log( /^1[35789]\d{9}$/.test("13345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("15345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("17345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("18345678901"));// false
      // console.log( /^1[35789]\d{9}$/.test("19345678901"));// false

      // 邮箱  yeah123@dsfdf.com
      //  邮箱名称  yeah123   可以是字母或者数字  最少要有一个 {1,} 或者 +
      // 分隔符  @
      // 字母或者数字
      // 匹配一个.   => \.
      // 规定 com  com

      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("yeah123@dsfdf"));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("@dsfdf"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@"));// false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+$/.test("sdfd@3"));// true

      // console.log(/./.test('a'));
      // 就想要表示. 本身   加一个反斜杠
      // console.log(/\./.test('a'));// false
      // console.log(/\./.test('.'));// true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3')); // false
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.com$/.test('sdfd@3.com')); // true

      // 感受 代码不多 贼难！ 
      // 
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.com')); // true
      // console.log(/^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.c(om|n)$/.test('sdfd@3.cn')); // true
      // c om
      // c n
    </script>