正则表达式基础到复杂使用以及常用量词分析

叁歲伎倆 2023-07-16 15:54 26阅读 0赞

## 正则表达式 ##

匹配字符串中字符组合的模式

^\\w+(\[-+.\]\\w+)\*@\\w+(\[-+\])

正则测试工具

https://tool.oschina.net/regex

### 1 正则表达式的使用 ###

#### 1.1 定义 ####

// RegExp
    var regexp = new RegExp(/456/);
    console.log(regexp); // /456/
    // 直接量
    var regexp2 = /abc/;

#### 1.2 正则表达式对象方法 test() ####

正则表达式对象方法 test()，检测某字符串是不是符合规则

// 返回值true表示有符合规则的字符组合 
    console.log(regexp2.test('abcfg')); //true
    console.log(regexp2.test('bacfg')); //false
    console.log(regexp.test(456)); //true
    console.log(regexp.test('456')); //true

### 2 正则表达式的特殊字符 ###

#### 2.1 边界符 ####

^ 匹配行首的文本 以谁开头

$ 匹配行尾的文本 以谁结束

var reg = /asd/; // 只要包含asd这个字符串就返回true
    console.log(reg.test('asdgfd'));//true
    var reg2 = /^asd/;  
    console.log(reg2.test('asdgfd'));  //true
    console.log(reg2.test('gasdfd')); //false
    var reg3 = /^asd$/; //精确匹配
    console.log(reg3.test('asdgfd'));  //false
    console.log(reg3.test('gasdfd')); //false
    console.log(reg3.test('asd')); //true
    console.log(reg3.test('asdasd')); //false
    var reg4 = /asd$/; //以asd结尾
    console.log(reg4.test('asdasd')); //true

#### 2.2 字符类 ####

\[\] 表示有一系列字符可以选择，只需要匹配一个就可以 。

var rg = /[xyz]/; // 字符串有xyz三个其中一个字符
    console.log(rg.test('abcd')); // false
    console.log(rg.test('abxcd')); // true
    console.log(rg.test('abycd')); // true
    console.log(rg.test('xabcdz')); // true
    var rg2 = /^[xyz]$/; // 只能是x或者y或者z
    console.log(rg2.test('xx')); // false
    console.log(rg2.test('x')); // true
    console.log(rg2.test('xy')); // false
    console.log(rg2.test('z')); // true
    var rg3 = /^[0-9a-z]$/; // - 范围
    console.log(rg3.test(3)); //true
    console.log(rg3.test('a3')); // false
    // 中括号的^表示取反
    var rg4 = /^[^0-9a-z]$/;
    console.log(rg4.test('5')); // false
    console.log(rg4.test('a')); // false
    console.log(rg4.test('A')); //true

#### 2.3 量词类 ####

*  
    
      +
    
      ？
    
      {n}
    
      {n,}
    
      {n,m}

#### 2.4 其他混合使用 ####

var rg = /^[xyz]$/; // 只能是x或y或z
    var rg2 = /^xyz{3}$/;
    console.log(rg2.test('xyzxyzxyz')); //false
    console.log(rg2.test('xyzzzz')); //true
    var rg3 = /^(xyz){3}$/;
    console.log(rg3.test('xyzxyzxyz')); //true
    console.log(rg3.test('xyzxyzxyzxyz')); //false

##### 实例： #####

检测用户名输入是否合法，合法提示用户名合法字颜色显示绿色；不合法，提示用户名不合法，颜色是红色

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> .right { color: green; } .wrong { color: red; } </style>
    </head>
    <body>
        <input type="text" id="uname" name="" id=""><span id='tip'></span>
        <script> var rg = /^[a-zA-Z0-9_-]{6,16}$/; var uname = document.querySelector('#uname'); var tip = document.querySelector('#tip'); uname.onblur = function() { if (rg.test(this.value)) { tip.className = 'right'; tip.innerHTML = '用户名合法'; } else { tip.className = 'wrong'; tip.innerHTML = '用户名不合法'; } } </script>
    </body>
    </html>

#### 2.5 预定义类 ####

\d === [0-9] 
    
      \D === [^0-9] 
    
      \w === [a-zA-Z0-9_]
    
      \W === [^a-zA-Z0-9_]
    
      \s === [\t\r\n\v\f]   匹配空格
    
      \S === [^\t\r\n\v\f]  匹配非空格字符

### 3 正则表达式替换 ###

replace() stringObj.replace(substr/rg,replacement)

var str = 'hello world';
    //var newStr = str.replace('hello','hi');
    var newStr = str.replace(/hello/, 'hi');
    console.log(str); //hello world 原数组不变，产生新的数组
    console.log(newStr); //hi world

实例：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        <textarea name="" id="msg" cols="30" rows="10"></textarea>
        <button>提交</button>
        <script> var btn = document.querySelector('button'); var tarea = document.querySelector('textarea'); btn.onclick = function() { // g全局匹配 i忽略大小写 gi 默认只会匹配一个 tarea.value = tarea.value.replace(/激情|gay/gi, '**') } </script>
    </body>
    
    </html>