菠萝咕噜肉

Appearance

正则表达式 ​

1. 正则表达式概述 ​

1.1 什么是正则表达式 ​

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

正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）。此外，正则表达式还常用于过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等

其他语言也会使用正则表达式，本阶段我们主要是利用JavaScript正则表达式完成表单验证。

1.2 正则表达式的特点 ​

  1. 灵活性、逻辑性和功能性非常的强
  2. 可以迅速地用极其简单的方式达到字符串的复杂控制
  3. 对于刚接触的人来说，比较晦涩难懂。比如：^\w+([-+.][w+)*@\w+([-.]w+)*L.w+([-J][W+)*$
  4. 实际开发，一般都是直接复制写好的正则表达式.但是要求会使用正则表达式并且根据实际情况修改正则表达式.比如用户名：/^[a-zO-9_-]{[3,16}$/

2. 正则表达式在Javascript 中的使用 ​

2.1 创建正则表达式 ​

在JavaScript中，可以通过两种方式创建一个正则表达式

1. 通过调用 RegExp 的对象的构造函数创建

var变量名= new RegExp (/表达式/ );

2.2 测试正则表达式 test ​

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

regexObj.text(str)

  1. regexObj 是写的正则表达式
  2. str 我们要测试的文本
  3. 就是检测 str 文本是否符合我们写的正则表达式规范

3. 正则表达式中的特殊字符 ​

3.1 正则表达式的组成 ​

一个正则表达式可以由简单的字符构成，比如/abc/，也可以是简单和特殊字符的组合，比如/ab*c/。其中特殊字符也被称为元字符，在正则表达式中是具有特殊意义的专用符号，如^、$、＋等。

特殊字符非常多，可以参考︰

3.2 边界符 ​

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

边界符说明
^表示匹配行首的文本（以谁开始）
$表示匹配行尾的文本（以谁结束）

代码示例

js
  // 边界符 ^ $
    var rg = /abc/;   // 正则表达式里面不需要加引号  不管是数字型还是字符串型
    //  /abc/ 只要包含有 abc 这个字符串返回的都是 true
    console.log(rg.test('abc'));   // true
    console.log(rg.test('aabc'));   // true
    console.log(rg.test('abccd'));   // true
    console.log('---------------------');
    var reg = /^abc/
    console.log(reg.test('abc'));   // true
    console.log(reg.test('abcd'));  // true
    console.log(reg.test('aabcd')); // false
    console.log('---------------------');
    var reg1 = /^abc$/   // 精确匹配 要求必须是 abc 字符串才符合规范
    console.log(reg1.test('abc'));  // true
    console.log(reg1.test('abcc')); // false

3.3 字符类 ​

字符类表示有一系列字符可供选择，只要匹配其中一个就可以了。所有可供选择的字符都放在方括号内。

  1. [] 表示有一系列可供选择 只要匹配其中一个就可以了
  2. [-] 方括号内部 范围符-

代码示例

js
    // var rg = /abc/ 只要包含 abc 就行
    // 字符类：[] 表示有一系列可供选择 只要匹配其中一个就可以了
    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
    console.log('-----------------------');
    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
    console.log('-----------------------');
    var reg = /^[a-z]$/   // 26个英文字母 任何一个字母返回 true - 表示 a 到 z 的范围
    console.log(reg.test('a'));        // true
    console.log(reg.test('z'));        // true
    console.log(reg.test('zz'));       // false
    console.log(reg.test(1));          // false
    console.log(reg.test('A'));        // false
    console.log('-----------------------');
    var reg1 = /^[a-zA-Z0-9_-]$/  // 26个英文字母(大写 小写都可以)  任何一个字母返回 true -表示 a 到 z 的范围
    console.log(reg1.test('a'));      // true
    console.log(reg1.test('B'));      // true
    console.log(reg1.test(9));        // true
    console.log(reg1.test('-'));      // true
    console.log(reg1.test('+'));      // false
    // 如果中括号里面有 ^ 表示取反的意思 千万和我们边界符 ^ 别混淆
    var reg1 = /^[^a-zA-Z0-9_-]$/
    console.log(reg1.test('a'));      // false
    console.log(reg1.test('B'));      // false
    console.log(reg1.test(9));        // false
    console.log(reg1.test('-'));      // false
    console.log(reg1.test('+'));      // true

3.4 量词符 ​

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

量词说明
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
重复 n 次
重复 n 次或更多次
重复 n 到 m 次

代码示例 1

js
 // 量词符：用来设定某个模式出现的次数
    // 简单理解：就算让下面a这个字符重复多少次

    // * 相当于 >= 0 可以出现0次或者很多次
    // var reg = /^a*$/
    // console.log(reg.test(''));        // true
    // console.log(reg.test('a'));       // true
    // console.log(reg.test('aaaa'));    // true
    // console.log('---------------------');

    // + 相当于 >=1 可以出现1次或者很多次
    // var reg = /^a+$/
    // console.log(reg.test(''));       // false
    // console.log(reg.test('a'));      // true
    // console.log(reg.test('aaaa'));   // true
    // console.log('---------------------');

    // ? 相当于 1 || 0
    // var reg1 = /^a?$/
    // console.log(reg1.test(''));         // true
    // console.log(reg1.test('a'));        // true
    // console.log(reg1.test('aaa'));      // false
    // console.log('---------------------');

    // {3} 就是重复三次
    // var reg2 = /^a{3}$/
    // console.log(reg2.test(''));         // false
    // console.log(reg2.test('a'));        // false
    // console.log(reg2.test('aaa'));      // true
    // console.log('---------------------');

    // {3, } 大于等于 3
    // var reg3 = /^a{3,}$/
    // console.log(reg3.test(''));         // false
    // console.log(reg3.test('a'));        // false
    // console.log(reg3.test('aaa'));      // true
    // console.log(reg3.test('aaaa'));     // true
    // console.log('---------------------');

    // {3, 16} 大于等于 3 并且 小于等于 6
    var reg4 = /^a{3,6}$/
    console.log(reg4.test(''));                  	// false
    console.log(reg4.test('a'));                 	// false
    console.log(reg4.test('aaa'));               	// true
    console.log(reg4.test('aaaaaaaaaaaaaaa'));      // false
    console.log('---------------------');

代码示例 2

js
    // 量词是设定某个模式出现的次数
    var reg = /^[a-zA-Z0-9_-]{6,16}$/
    // 这个模式用户只能输入英文字母 数字 下划线 短横线 但是有边界符和[] 这就限定了只能多选
    // {6,16}   中间不要有空格
    console.log(reg.test('a'));
    console.log(reg.test('8'));
    console.log(reg.test('18'));
    console.log(reg.test('aa'));
    console.log('----------------------');
    console.log(reg.test('andy-red'));
    console.log(reg.test('tom-jerry'));
    console.log(reg.test('tom007'));

案例：用户名验证

功能需求：

  1. 如果用户名输入合法,则后面提示信息为:用户名合法,并且颜色为绿色
  2. 如果用户名输入不合法,则后面提示信息为:用户名不符合规范,并且颜色为绿色
html
<body>
  <input type="text" class="uname"> <span>请输入用户名</span>
  <script>
    //  量词是设定某个模式出现的次数
    var reg = /^[a-zA-Z0-9_-]{6,16}$/;
    var uname = document.querySelector('.uname')
    var span = document.querySelector('span')
    uname.onblur = function () {
      if (reg.test(this.value)) {
        span.className = 'right'
        span.innerHTML = '用户名格式输入正确'
      } else {
        span.className = 'wrong'
        span.innerHTML = '用户名格式输入有误'
      }
    }

  </script>
</body>

3.5 括号总结 ​

  1. 大括号 量词符. 里面表示重复次数
  2. 中括号 字符集合 匹配方括号中的任意字符
  3. 小括号 表示优先级

可以在线测试: https://c.runoob.com/

代码示例

js
// 中括号 字符集合 匹配方括号中的任意字符
var reg = /^[abc]$/
// a 也可以 b也可以 c 可以 a || b || c

// 大括号 量词符 里面表示重复次数
// var reg1 = /^abc{3}$/     // 它只是让c重复三次
// console.log(reg1.test('abc'));              // false
// console.log(reg1.test('abcabcabc'));        // false
// console.log(reg1.test('abccc'));            // true

// 小括号 表示优先级
var reg2 = /^(abc){3}$/
console.log(reg2.test('abc'));                // false
console.log(reg2.test('abcabcabc'));          // true
console.log(reg2.test('abccc'));              // false

3.6 预定义类 ​

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

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

代码示例

js
// 座机号码验证：   全国座机号码  两种格式：    010-12345678  或者 0530-1234567
// 正则里面的或者 符号 |
// var reg = /^\d{e}-\d{8}| \d{4}-\d{7}$/

正则表达式中的替换 ​

4.1 replace 替换 ​

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

  1. 第一个参数:被替换的字符串或者正则表达式2.第二个参数:替换为的字符串
  2. 返回值是一个替换完毕的新字符串

stringObject.replace(regexp/substr,replacement)

4.2 正则表达式参数 ​

/表达式/[switch]

switch(也称为修饰符) 按照什么样的模式来匹配 有三种值

  • g：全局匹配
  • i：忽略大小写
  • gi：全局匹配 + 忽略大小写
html
<body>
  <textarea name="" id="message"></textarea><button>提交 </button>
  <div></div>
  <script>
    // 替换 replace
    // var str = 'andy和red'
    // var newStr = str.replace('andy','baby')
    // var newStr = str.replace(/andy/,'bady')
    // console.log(newStr);

    var text = document.querySelector('textarea')
    var btn = document.querySelector('button')
    var div = document.querySelector('div')
    btn.onclick = function () {
      div.innerHTML = text.value.replace(/敏感词1|敏感词2/g, '*')
    }
  </script>
</body>

Powered by VitePress & Vue 3

Copyright © 2024 BoluoBook