一、正则表达式

介绍

作用：正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式
是什么：正则表达式也是对象。
场景：正则表通常被用来检索、替换那些符合某个模式（规则）的文本
1. 验证：例如表单，用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入
  中文(匹配)。
2. 过滤：正则表达式还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想
  要的特定部分(提取)等。
要求：
- 灵活性、逻辑性和功能性非常的强。可以迅速地用极简单的方式达到字符串的复杂控制
- 对于刚接触的人来说，比较晦涩难懂。/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+ ([-.]\w+)*$/
- 实际开发,一般都是直接复制写好的正则表达式. 但是要求会使用正则表达式并且根据实际情
  况修改正则表达式. 比如用户名: /^[a-z0-9_-]{3,16}$/

语法

对象：{ } [ ] 函数 DOM BOM 用户行为event 正则
方式一：通过调用RegExp对象的构造函数创建

//2.了解  构造函数  了解
var regexp = new RegExp(/123/);
console.log(regexp);

方式二：利用字面量创建正则表达式; 正则对象和字母类字符串没有任何关系！
var rg = /规则内容/; //字面量 /写规则/

test方法

test() 正则对象的方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false，其参数是
测试字符串。

//如何进行检查匹配
      let reg = /abc/;
      // 对象.test();
      //     参数：被检测的文本内容  字符串  数字
      //     结果：true / false
      let res1 = reg.test("abd")
      console.log(res1)
      let res2 = reg.test("abcdefg")
      console.log(res2)
      //1.正则，对象  2.reg.test();  3./abc/  只需要包含就算满足要求

特殊字符

一个正则表达式可以由简单的字符构成，比如 /abc/，也可以是简单和特殊字符的组合，比如
/ab*c/ 。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如 ^ 、$
、+ 等
参考：
- 特殊字符非常多，可以参考： MDN
- jQuery 手册：正则表达式部分正则测试工具

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符 | 边界符 | 说明 | | :—-: | :—-: | | ^ | 表示匹配行首的文本（以谁开始） | | $ | 表示匹配行尾的文本（以谁结束） |

如果 ^和 $ 在一起，表示必须是精确匹配
注意：正则表达式里面不需要加引号不管是数字型还是字符串型

//基本语法：
      //         ^:位置  /^规则/  被检测文本必须要按照正则要求这样开头才可以
      //         必须：必须开头，必须是我要求检测，缺一不可
      let reg1 = /^abc/
      let res1 = reg1.test("labe")
      console.log(res1)
//   ^:位置  /$规则/  被检测文本必须要按照正则要求这样结尾才可以
      //    必须：必须结尾，必须是我要求检测，缺一不可
      let reg = /abc$/
      let res = reg.test("sddaadadd")
      console.log(res);
// ^  $:位置，从  ^,到$结束
      //    必须:必须从头到尾都是规则要求的内容；
      let reg = /^abc$/
      let res = reg.test("abc")
      console.log(res);

( | )

从()内选出一组就可以

var rg = /^(abc|bbb|ccc)$/;
rg.test("bbb") // true;

[ ]

表示有一系列字符可供选择，只要匹配其中一个就可以了

var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));//true
console.log(rg.test('baby'));//true
console.log(rg.test('color'));//true
console.log(rg.test('red'));//false
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
console.log(rg1.test('aa')); //false
console.log(rg1.test('a'));//true
console.log(rg1.test('b'));//true
console.log(rg1.test('c'));//true
console.log(rg1.test('abc'));//false
//------------------------------------------------------------------
var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
console.log(reg.test('a'));//true
console.log(reg.test('z'));//true
console.log(reg.test('A'));//false
--------------------------------------------------------------------------------
//字符组合
var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
--------------------------------------------------------------------------------
//取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
var reg2 = /^[^a-zA-Z0-9]$/;
console.log(reg2.test('a'));//false
console.log(reg2.test('B'));//false
console.log(reg2.test(8));//false
console.log(reg2.test('!'));//true
//组合使用
        let reg6 = /^[^A-Za-z0-9|A-Za-z0-9]%/
        let reg5 = /^[^A-Za-z0-9]$/
        //  [^规则：]：取多立面，只要不是中括号里面的一个 字符串就满足要求
        let res5 = reg5.test(" ")
        console.log(res5);

量词符号

量词	说明
*	重复0次或更多次
+	重复1次或更多
?	重复0次或1次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

   //[ ] ()  ;个数默认事1
        // 量词符: 按照设置数量匹配
        //     *：允许规则重复0次或者多次；次数>=0
        //     位置：放在规则后面
        let reg1 = /^a*$/
        console.log(reg1.test("abc"));  //false
        let reg2 = /^[abc]*$/
        console.log(reg2.test("abcabc"));  //true
        let reg3 = /^(aa|bb|cc|abc)*$/
        console.log(reg3.test("abcaaabc"));  //true
//+:允许满足规则的文本，重复1次或者多次；次数+1
        let reg1 = /^a+$/
        console.log(reg1.test(""));   //false
        let reg2 = /^a+b$/
        console.log(reg2.test("ab"));   //true
        let reg3 = /^[a-z]+[0-9]*|[A-Z]$/
        // console.log(reg3.test("a - z + 0 - 9 | A - Z"));  //true
        console.log(reg3.test("sa93AZ1aa"))   //true
//?   允许满足规则的文本  重复0次或者1次；0或1选择一次
        let reg1 = /^a?$/
        console.log(reg1.test("aa"));  //false
        let reg2 = /^[a-z]?$/
        console.log(reg2.test("aa"));  //false
        let reg3 = /^[a-z]?[A-Z]?[0-9]$/
        console.log(reg3.test("aA"));  //false
//{}  允许满足规则的文本，具体控制重复次数 6-9次
        //   {n,m}   n-m次
        //   {n}  固定此时n次
        //    {n,}  至少重复n次

案例：用户名表单验证功能需求:

<input type="text" class="uname" pattern="请输入用户名">
    <button>注册</button>
    <p></p>
 <script>
 // 用户名表单验证功能需求:
 //   需求: 用户注册用户名，有要求(字母、数字、下划线_、-)6 - 9位  [a-zA-Z0-9_]
// 点击注册的时候。如果满足要求。显示注册成功，不满足要求，提醒弹窗，且输入框置空:
        let ipt = document.querySelector(".uname")
        let btn = document.querySelector("button")
        let p = document.querySelector("p")
        btn.addEventListener("click", function () {
            let reg = /^[a-zA-Z0-9_-]{6,16}$/
            //升级  开头必须是大写
            // let reg = /^[a-zA-Z][a-zA-Z0-9_-]{5,8}$/
            // let res = reg.test(ipt.value)   声明
            if (reg.test(ipt.value) == true) {
                alert("注册成功")
                p.innerHTML = "用户格式输入正确"
                console.log()
            } else {
                alert("注册不成功，不满足要求")
                ipt.value = ""
                p.innerHTML = "用户格式输入错误"
                //字体颜色
                p.style.color = "red"
            }
        })
    </script>

预定义

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

//  只能记住常用，预先定义简单写法
  //只能记住常用:预先定义简单写法,/ld=[0-9];
      //D==除[0-9]范围外所有11
      //   \w   == [A-Za-z0-9_]
      //   \W   == [  ^A-Za-z-9_]
      //   \s ==[ \tlrinivif]
      //   \S ==[ ^\t\r\n\v\f  ]

预定类	说明
\d	匹配0-9之间的任一数字，相当于[0-9][^O-9]
\D	匹配所有0-9以外的字符，相当于[ ^0-9 ]
\w	匹配任意的字母、数字和下划线，相当于[A-Za-z0-9_]
\W	除所有字母、数字和下划线以外的字符，相当于[ ^A-Za-z-9_]
\s	匹配空格(包括换行符、制表符、空格符等)，相等于[ \tlrinivif]
\S	匹配非空格的字符，相当于[ ^\t\r\n\v\f ]

案例：验证座机号码

var reg = /^(\d{3}-\d{8}|\d{4}-\d{7})$/;
//座机：区号（3-4）-（7，9）
      let reg = /^d{3,4}-\d{7,9}$/
      console.log(reg.test("0000-1234567"));  //false

案例：用户注册列表

<style>
      .box {
          margin: 50px auto;
          width: 600px;
          box-shadow: 0 0 10px #000;
      }
      .item {
          padding-top: 20px;
          height: 30px;
          padding-left: 40px;
      }
      button {
          width: 100px;
          height: 40px;
          margin-left: 200px;
          margin-bottom: 10px;
          background-color: orange;
          border-radius: 10px;
      }
  </style>
<body>
  <div class="box">
      <div class="item">
          昵称：<input type="text" id="name">
      </div>
      <div class="item">
          密码：<input type="password" id="pwd">
      </div>
      <div class="item">
          再次密码：<input type="password" id="repwd">
      </div>
      <div class="item">
          手机：<input type="text" id="phone">
      </div>
      <button>注册</button>
  </div>
  <script>
      // 需求：
      //      1. 昵称  2-8非空字符
      //      2. 密码：字母数字组合，开头必须位字母大写，  6-9位
      //      3. 密码和再次密码 一样
      //      4. 手机号符号要求
      //      5. 点击注册, 不满足要求的,弹窗提醒,把该项置空!
      //         所有信息都满足要求,把收集到 {key:val}  输出;
      //         昵称:  username    密码：password   手机：phone
      //         {username:"xxxxx",password:1212121,phone:15211113333}
      // 步骤：
      //    1.btn,添加事件
      let btn = document.querySelector("button");
      let name = document.querySelector("#name");
      let pwd = document.querySelector("#pwd");
      let repwd = document.querySelector("#repwd");
      let phone = document.querySelector("#phone");
      btn.addEventListener("click", function () {
          // 2 昵称
          // 2.1 用户输入数据
          let nameVal = name.value;
          // 2.2 正则
          let nameReg = /^\S{2,8}$/;
          // 2.3 验证
          let nameRes = nameReg.test(nameVal);
          // 2.4 判断
          if (nameRes == false) {
              alert("昵称不满足要求");
              name.value = "";
              return;
          }
          // 3 密码
          // 3.1 用户输入数据
          let pwdVal = pwd.value;
          // 3.2 正则
          let pwdReg = /^[A-Z][a-zA-Z0-9]{5,8}$/;
          // 3.3 验证
          let pwdRes = pwdReg.test(pwdVal);
          // 3.4 判断
          if (pwdRes == false) {
              alert("密码不满足要求");
              pwd.value = "";
              return;
          }
          // 4 再次密码：
          // 4.1 用户输入数据
          let repVal = repwd.value;
          if (pwdVal != repVal) {
              alert("两次密码输入不一致");
              repwd.value = "";
              return;
          }
          // 5.手机
          // 5.1 用户输入数据
          let phoneVal = phone.value;
          // 5.2 正则
          let phoneReg = /^1[356789]\d{9}$/;
          // 5.3 验证
          let phoneRes = phoneReg.test(phoneVal);
          // 5.4 判断
          if (phoneRes == false) {
              alert("手机号不满足要求");
              phone.value = "";
              return;
          }
          // 执行这
          let obj = {
              username: nameVal,
              password: pwdVal,
              phone: phoneVal
          }
          alert("注册成功")
          console.log(obj);
      })

字符串.replace

字符串的方法：replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是
一个正则表达式。

var str = 'andy和red';
var newStr = str.replace('andy', 'baby');
console.log(newStr)//baby和red
// 等同于 此处的andy可以写在正则表达式内
var newStr2 = str.replace(/andy/, 'baby');
console.log(newStr2)//baby和red
// 替换一个
var str = 'abcabc'案例:过滤敏感词汇
var nStr = str.replace(/a/,'哈哈')
console.log(nStr) //哈哈bcabc
// 全部替换 g
var nStr = str.replace(/a/g,'哈哈')
console.log(nStr) //哈哈bc哈哈bc
// 忽略大小写i
var str = 'AAbcAba';
var newStr = str.replace(/a/i,'哈哈')//"哈哈AbcAba"
// 忽略大小写i且 全部替换
var str = 'AAbcAba';
var newStr = str.replace(/a/ig,'哈哈')//"哈哈AbcAba"

案例:过滤敏感词汇

<textarea name="" id="message"></textarea> 
<button>提交</button>
<div></div>
<script>
let text = document.querySelector('textarea');
let btn = document.querySelector('button');
let div = document.querySelector('div');
btn.onclick = function() {
div.innerHTML = text.value.replace(/(激情|gay)/g, '**');
}
</script>

二、表单事件

表单元素：form表单内元素：
- 输入框：
  - focus : 获得焦点
  - blur : 失去焦点
blur : 失去焦点
change : 表单控件值发生改变的时候
keydown: 键盘按下
keyup : 键盘弹起

Web 前端资料

4.12-day7-正则表达式

一、正则表达式

介绍

语法

test方法

特殊字符

边界符

( | )

[ ]

量词符号

案例：用户名表单验证功能需求:

预定义

案例：用户注册列表

字符串.replace

案例:过滤敏感词汇

二、表单事件