1.什么是正则表达式

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

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

3.请在上图中找出【戴帽子和眼镜的男人】

4.戴帽子、戴眼镜、男人都是描述信息，通过这些信息能够在人群中查找到确定的某个人，那么这些用于查找的描述信息编写一个模式，对应到计算机中就是所谓的正则表达式。

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

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

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

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

3.正则表达式的语法

1. 定义正则表达式语法

let 变量名 = /表达式/
 //其中 / / 是正则表达式字面量
let red = /潮吧/

2.判断是否有符合规则的字符串

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

语法

regObj.test(被检测的字符串)

列如

let str = '我的兄第是一个大潮吧'
let reg = /潮吧/
let re = reg.test(str)
console.log(re)  //true
//如果正则表达式与指定的字符串匹配 ，返回true，否则false

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

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

语法

regObj.exec(被检测的字符串)

列如

let str = '我的,兄弟,是,一个,大,潮吧,'
let reg = /潮吧/
let re = reg.exec(str)
console.log(re)  //返回的是个数组
//如果匹配成功，exec() 方法返回一个数组，否则返回null

4.元字符

1.普通字符

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

2.元字符(特殊字符）

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

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

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

3.参考文档

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

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

4.边界符

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

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

边界符	说明
/^ /	表示匹配行首的文本(以谁开始)
/ $/	表示匹配行尾的文本(以谁结束)
/^ $/	如果^和$在一起表示必须是精确匹配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <script>
         const str ='潮吧6666'
         //边界符   ^开头   $结尾
        //  const reg = /梦想/      //false
        // const reg = /潮吧/       //true
        // const reg = /^潮/        //true
        //  const reg = /潮吧$/   //false
        // const reg = /6$/    //true
         const reg = /^潮吧$/    //false   只能匹配 "潮吧"
         console.log(reg.test(str))
    </script>
</body>
</html>

5.量词

（表示重复次数）量词用来设定某个模式出现的次数

量词	说明
*	重复0次或更多次
+	重复1次或更多次
?	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次
注意：逗号左右两侧千万不要出现空格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>03-量词.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <script>
      const str="潮吧";
      const reg=/潮吧/;
      console.log(reg.test(str));

      //  *  表示 放在它前面那一个字符 可以出现0次或者多次
      // /^潮*$/   => ""，  潮，潮潮，潮潮潮,潮潮潮潮
      // console.log(/^潮*$/.test('')); // true
      // console.log(/^潮*$/.test('潮')); // true
      // console.log(/^潮*$/.test('潮潮')); // true
      // console.log(/^潮*$/.test('潮潮潮')); // true

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

      // ？ 表示出现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('')); // false
      // console.log(/^潮{2,}$/.test('潮')); // false
      // 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>
  </body>
</html>

6.字符类

1.[ ] 匹配字符集合

//后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
      //只要中括号里面的任意字符出现都返回为true
      console.log(/[abc] /.test(" andy ")); //  true
      console.log(/[abc] /.test(" baby ")); //  true
      console.log(/[abc] /.test(" cry ")); // true
      console.log(/[abc] /.test("die ")); //faLse

2.[ ] 里面加上 - 连字符

//使用连字符 - 表示一个范围
console.log(/^[a-z]$/.test('c'))  //true
//比如：
//[a-z] 表示 a 到 z 26个英文字母都可以
//[a-zA-Z] 表示大小写都可以
// [0-9] 表示 0~9 的数字都可以
//认识下：腾讯QQ号  从10000开始
^[1-9][0-9]{4,}$

3.[ ] 里面加上 ^ 取反符号

//比如：
//[^a-z] 匹配除了小写字母以外的字符
//注意要写到中括号里面

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

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9]
\D	匹配所有0-9以外的字符，相当于[^0-9]
\w	匹配任意的字母、数字和下划线，相当于[A-Za-zO-9_]
\W	除所有字母、数字和下划线以外的字符，相当于[^A-Za-z0-9_]
\s	匹配空格(包括换行符、制表符、空格符等)，相等于[ \tlrlnlvlf]
\S	匹配非空格的字符，相当于[^\tIrlnlvlf]
日期格式	^\d{4}-\d{1,2}-\d{1,2}
.	匹配除了换行符之外的任何字符

5.登录验证

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-作业.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <input type="text" id="username" placeholder="请输入用户名 6-12位" />
      </div>
      <div>
        <input type="password" id="password" placeholder="请输入密码 6-12位" />
      </div>
      <button type="button">注册</button>
    </form>
    <script>
      // 把正则的验证 封装在一个对象的方法中 方便我们使用
      const formTest = {
        validUserName: function (value) {
          return /^[a-zA-Z_]\w{5,11}$/.test(value);
        },
        // 验证密码
        validPassWord: function (value) {
          return /^[\d\D]{6,12}$/.test(value);
        },
      };

      const username = document.querySelector('#username');
      const password = document.querySelector('#password');
      const button = document.querySelector('button');

      button.addEventListener('click', function () {
        // 获取一下表单的值
        const usernameValue = username.value;
        const passwordValue = password.value;

        // 挨个通过正则来验证他们
        if (!formTest.validUserName(usernameValue)) {
          // 不通过
          alert('你的用户名不合法，请检查后重试');
          return; // 不通过就返回 返回了 return undefined  目的不在于返回值，而是终止这个函数 不再往下执行
        } else if (!formTest.validPassWord(passwordValue)) {
          // 不通过
          alert('你的密码不合法，请检查后重试');
          return;
        }

        // 经过了以上两个程序的验证 就是合法的了
        alert('恭喜你 注册成功');
      });
    </script>
  </body>
</html>

5.修饰符

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

语法：

/表达式/修饰符
//  i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
//  g 是单词 global 的缩写，匹配所有满足正则表达式的结果
console.log(/a/i.test('a'))   //true
console.log(/a/i.test('A'))   //true

替换 replace 替换

语法:

字符串.replace(/正则表达式/,'替换的文本')

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>13-正则替换.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <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>
  </body>
</html>

07-webAPI-正则表达式