• 【第六部分 | JavaScript高级】3：正则表达式

    目录

    【第三章】正则表达式（重点）

    | 概述

    | 创建正则表达式

    | 测试某个字符串是否符合正则

    | 正则符号

    什么是正则符号？

    1.1.边界符 ^ $

    1.2.连字符 -

    2.1.字符类—方括号符 []

    2.2.字符类—方括号符内 范围符 - （易错）

    2.3.字符类—方括号符内 取反符^ （易错）

    2.4.字符类—方括号符内 字符组合

    3.1.量词符

    3.2.量词符作用：规定某个模式的次数范围

    4.1.预定义类

    5.1.正则表达式中的括号总结 // [] {} () 及 |

    6.1.正则替换 replace()

    案例：验证用户输入的用户名是否符合规范

    【第三章】正则表达式（重点）

    | 概述

     

    简介

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

    • 正则表达式通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单

    • 应用举例：用户名表单只能输入英文字 母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于过滤掉页面内容中的一 些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

    特点


    | 创建正则表达式

    方法一：通过调用 RegExp 对象的构造函数创建

    • 正则表达式不需要加引号

    • 必须使用/ /括起来

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

     方法二：通过字面量创建

    var 变量名 = /表达式/;

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         //创建正则表达式 第一种方法
    10.         var regexp = new RegExp(/123/);
    11.         console.log(regexp); //   /123/
    12.  
    13.         //创建正则表达式 第二种方法
    14.         var regexp2 = /456/;
    15.         console.log(regexp2);//   /456/
    16.  
    17.         
    18.     script>
    19. head>
    20. <body>
    21.     
    22. body>
    23. html>

    | 测试某个字符串是否符合正则

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

    regexObj.test(str)

     代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var regexp = /123/;
    10.         console.log(regexp.test(123)); //true
    11.         console.log(regexp.test(234)); //false
    12.     script>
    13. head>
    14. <body>
    15.     
    16. body>
    17. html>

    | 正则符号

    什么是正则符号？

    1.1.边界符 ^ $

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

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

    代码示例

     

    代码示例2

    1.         //边界符 ^ $
    2.         var regexp1 = /^a/;
    3.         console.log(regexp1.test('ab'));//true
    4.         console.log(regexp1.test('ba'));//false

     

    1.2.连字符 -

    • 若在 / / 内， [ ]外添加的 短横线，则代表这个地方必须写上一个横线。否则为false

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var r1 = /^A-B$/;
    10.         console.log(r1.test('A-B'));//true
    11.         console.log(r1.test('A'));//false
    12.     script>
    13. head>
    14. <body>
    15.     
    16. body>
    17. html>

    2.1.字符类—方括号符 []

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

    • 需要注意的是：如果供选择的字符是数字，写成 /^[1|2|3]$/ 或者 /^[123]$/ 均可以

    代码示例

    代码示例2

    1.         //方括号符 []
    2.         var regexp2 = /[a-b]/;
    3.         console.log(regexp2.test('bc'));//true 包含a
    4.         console.log(regexp2.test('cd'));//false 不包含a、b的任何一个

     

    2.2.字符类—方括号符内 范围符 - （易错）

    • 方括号内部加上 - 表示范围，如 /^[a-z]$/ 表示 a 到 z 26个英文字母任意一个都可以。

    • 若 - 是在[ ]外部添加的，则代表的是：匹配的字符串中必须在那个位置有 - 短横线

    代码示例

     

     

    2.3.字符类—方括号符内 取反符^ （易错）

    • 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

    • 注意和边界符区分！！ 取反符是写在 [ ] 内部的！ 而边界符是写在 / / 的最左侧的

    语法

    /[^abc]/.test('andy') // 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。

    代码示例

    1.         //方括号符-取反符  [^]
    2.         var regexp3 = /[^a-b]/
    3.         console.log(regexp3.test('a'));//false
    4.         var regexp4 = /^[^a-b]/ //必须包含（不含a-b的字符，即：只要不包含a、b即为true）
    5.         console.log(regexp4.test('a'));//false
    6.         console.log(regexp4.test('c'));//true

    2.4.字符类—方括号符内 字符组合

    • 方括号内部可以使用字符组合，相当于多个范围

    代码示例

    /[a-z1-9]/.test('andy')  //示包含 a 到 z 的26个英文字母或 1 到 9 的数字都
    /a-zA-Z1-9/  //代表只要是a-z A-Z 1-9中的任何一个字符即可

    3.1.量词符

    代码示例

    1.         //量词符
    2.         var regexp5 = /^a*$/ //含义：符号*前面的a可以重复0次/多次 才true
    3.         console.log(regexp5.test(''));//true
    4.         console.log(regexp5.test('aaaa'));//true
    5.  
    6.         var regexp6 = /^a+$/ //+前面的a必须出现大于等于1次才true
    7.         console.log(regexp6.test(''));//false 
    8.         console.log(regexp6.test('a'));//true
    9.  
    10.         var regexp7 = /^a?$/ //?前面的a 要么出现1次，要么不出现。若大于一次，则false
    11.         console.log(regexp7.test(''));//true
    12.         console.log(regexp7.test('a'));//true
    13.         console.log(regexp7.test('aa'));//false
    14.  
    15.         var regexp8 = /^a{3}$/ //{3}前面的a需要重复三次才true
    16.         console.log(regexp8.test('aa'));//false
    17.         console.log(regexp8.test('aaa'));//true
    18.         console.log(regexp8.test('aaaa'));//false
    19.  
    20.         var regexp9 = /^a{3,}$/ //{3,}前面的a需要重复三次或者更多次才true
    21.         console.log(regexp9.test('aa'));//false
    22.         console.log(regexp9.test('aaa'));//true
    23.         console.log(regexp9.test('aaaa'));//true
    24.  
    25.         var regexp10 = /^a{3,4}$/ //{3,}前面的a需要重复三次或者4次才true
    26.         console.log(regexp10.test('aa'));//false
    27.         console.log(regexp10.test('aaa'));//true
    28.         console.log(regexp10.test('aaaa'));//true
    29.         console.log(regexp10.test('aaaaa'));//false

     

    3.2.量词符作用：规定某个模式的次数范围

    • 如用户名：每个字符只能输入 A-Z a-z 0-9 _ - 且位数为6-18位。

    • 上述要求，可以通过正则符号中的 【字符类】+【量词符】做到。前者规定每个字符（只能输入一个）输入的规范，后者规定字符的个数范围

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var regexp = /^[A-Za-z0-9_-]{6,18}$/ //每个字符规定为A-Z a-z 0-9 下划线 短横线。  字符的长度规定为[6，18]
    10.  
    11.         var userName1 = 'AAAzzz998';
    12.         console.log(regexp.test(userName1));//true：每个字符都符合规定，且字符串长度也符合规定
    13.  
    14.         var userName2 = 'abcde';
    15.         console.log(regexp.test(userName2));//false：虽然每个字符都符合规定，但是字符串长度不符合规定
    16.  
    17.         var userName3 = '*AAAAAAA'; 
    18.         console.log(regexp.test(userName3));//false：第一个字符 * 不符合规定
    19.         
    20.     script>
    21. head>
    22. <body>
    23.     
    24. body>
    25. html>

    4.1.预定义类

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

    代码示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var regexp = /^\W$/ //除所有 字母、数字、下划线以外的字母
    10.         console.log(regexp.test('a'));//false
    11.         console.log(regexp.test('-'));//true
    12.     script>
    13. head>
    14. <body>
    15.     
    16. body>
    17. html>

     案例：座机号验证

    5.1.正则表达式中的括号总结 // [] {} () 及 |

    / / 正则表达式的总括号

    [ ] 匹配方括号内规则的字符

    { } 量词符，表示重复的次数 注意： /^abc{3,5}$/ 代表的是 c应出现3-5次而不是abc

    ( ) 小括号表示优先级  上述若想abc出现3次，则应该写成 /^(abc){3,5}$/

    | 表示“或”

    辨析：

    /^abc{3,5}$/ ab + 3-5个c

    /^【abc】{3,5}$/ 3-5个字符，字符规则：a、b、c任意一个

    /^(abc){3,5}$/ 3-5个abc

    6.1.正则替换 replace()

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

    方法一（只能匹配第一个符合的）

    语法（第一个参数: 被替换的字符串 或者 正则表达；第二个参数: 替换为的字符串；返回值是一个替换完毕的新字符串）

    stringObject.replace(regexp/substr,replacement)

     若有多个敏感词，可以在正则表达式中用 | 分割

    str.replace(/敏感词A|敏感词B|……|敏感词n/,替换为)

    示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var oldstr = '我cnm！cnm！';
    10.  
    11.         //单个匹配
    12.         console.log(oldstr.replace(/cnm/,'***')); //我***！cnm!
    13.     script>
    14. head>
    15. <body>
    16.     
    17. body>
    18. html>

    方法二（可以全局匹配）

    语法（就是在正则表达式后面加个 标识符 g 或 i 或 gi）

    /表达式/[switch]

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

    • 有三种值： g：全局匹配 i：忽略大小写 gi：全局匹配 + 忽略大小

    示例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         var oldstr = '我cnm！cnm！';
    10.         //全局匹配
    11.         console.log(oldstr.replace(/cnm/gi,'***')); //我***！***！
    12.         
    13.     script>
    14. head>
    15. <body>
    16.     
    17. body>
    18. html>

    案例：验证用户输入的用户名是否符合规范

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         /* 表单父盒子 */
    10.         .input1 {
    11.             width: 800px;
    12.             height: 40px;
    13.             margin: 200px auto;      
    14.         }
    15.  
    16.         /* 输入框 */
    17.         .input1 input {
    18.             width: 300px;
    19.             height: 30px;
    20.             margin-left: 10px;
    21.             background-color: rgb(209, 227, 248);
    22.         }
    23.  
    24.         /* 获得焦点的时候 取消输入框的边框 */
    25.         .input1 input:focus {
    26.             outline: none;
    27.         }
    28.  
    29.         /* 提示输入 */
    30.         .input1 .tip {
    31.             font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    32.             font-weight: 500;
    33.             color: rgb(115, 168, 228);
    34.         }
    35.  
    36.         /* 错误信息 */
    37.         .input1 .error {
    38.             font-family: 'Microsoft YaHei';
    39.             font-weight: 300;
    40.             font-size: 13px;
    41.             margin-left: 10px;
    42.             color: red;
    43.             visibility: hidden;
    44.         }
    45.  
    46.         
    47.     style>
    48.  
    49.     <script>
    50.         window.addEventListener('load',function(){
    51.             var inputObj = document.querySelector('.input1 input');
    52.             var errortipObj = document.querySelector('.input1 .error');
    53.  
    54.             inputObj.addEventListener('blur',function(){
    55.                 var content = inputObj.value;
    56.                 console.log(content);
    57.                 //正则表达式
    58.                 var regexp = /^[a-zA-Z0-9_-]{6,18}$/;
    59.                 if(!regexp.test(content)){
    60.                     //若不符合规则，则span变红，让 .input1 .error的visibility为visible（注意：这个是style里的样式属性，需要obj.style.xxx）
    61.                     errortipObj.style.visibility = 'visible';
    62.                 }else{
    63.                     errortipObj.style.visibility = 'hidden';
    64.                 }
    65.             })
    66.         })
    67.     script>
    68. head>
    69. <body>
    70.     <div class="input1">
    71.         <span class="tip">设置用户名span> <input type="text" placeholder="英文字母、数字、下划线，6-18位">  
    72.         <span class="error"> X Error （请检查英文字母、数字、下划线、6-18位）span>
    73.     div>
    74. body>
    75. html>

  • 相关阅读:
    C2基础设施威胁情报对抗策略
    Halcon 第一章『Halcon语言』◆第5节：读取图像
    2022年 安全智能分析技术白皮书 模型开发
    sudo apt update 出现Release is not valid yet
    2023-10-16 itoa函数的局限以及实现
    NoSql的优势在哪里，NoSql是什么
    Python绘图系统25：新增8种绘图函数
    智慧电网解决方案-最新全套文件
    python操作docker
    rank()、row_number()、dense_rank()用法详解
  • 原文地址：https://blog.csdn.net/m0_57265007/article/details/128006419