javascript 正则表达式看这一个就够了

待我称王封你为后i 2021-07-26 22:46 301阅读 0赞

# 一.创建正则表达式（2个） #

1.使用字面量创建：var reg = /a/;  
2.使用RegExp构造函数创建：var reg = new RegExp(“a”,“修饰符”）;

var reg=new RegExp("a","g");
        console.log(reg); //打印出 /a/g

**注意**：正则表达式分为两个部分一个是正则匹配内容，一个是修饰符部分;

# 二.正则表达式对象的方法(2个） #

1.exec(); //查找字符串中满足正则匹配内容的结果,并且返回一个数组,  
这个数组只有一个元素,包括几个属性,分别是群组,索引,字符串自身

var reg=/a/g;
     console.log(reg.exec("abca"));//打印结果如下图

![在这里插入图片描述][20200108200914558.png]

2.test();//判断字符串是否满足正则匹配内容

var reg=/a/g;
     console.log(reg.test("abca"));// true

# 三.常用字符串匹配正则方法(4个） #

1.search();//按照正则表达式查找字符串中的内容,返回优先查找到第一个元素下标

var str="abcdeafgh";
      console.log(str.search(/a/)); //打印 0

2.split();//按照正则表达式匹配内容切割字符串

var str="abcdeafgh";
      console.log(str.split("b"));//["a","cdeafgh"]
      console.log(str.split(/[cf]/));//["ab","dea","gh"]

3.replace();//按照正则表达式匹配内容进行替换,可以替换成相同的也可以替换成不同的

var str="abcdea";
    str=str.replace(/a/g,"z");
    console.log(str); //zbcdez

//把任何满足正则内容的进行替换
      var str="abcdea"; 
      str=str.replace(/[bdfh]/g,"0");
      console.log(str); //a0c0ea

replace还可以这样写  
str.replace(正则表达式,回调函数(item,index)\{  
return //返回要替换的内容  
\});

var str="abcdea"; 
    str=str.replace(/a/g,function(item,index){ 
          return index===0 ? "x" : "y";
     })
     console.log(str);//xbcdey

// 查找所有匹配正则元素的下标
        var str="abcdea"; 
        var arr=[];
        str.replace(/a/g,function(item,index){ 
            arr.push(index);
        })
        console.log(arr);//[0, 5]

var str="abcabcadf";
        str=str.replace(/[abc]/g,function(item){ 
              switch(item){ 
                  case "a":return "1";
                  case "b":return "2";
                  case "c":return "3";
              }
         });
          console.log(str);//1231231df

4.match();//接收一个参数，正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null

var str="abcadef";
     console.log(str.match(/a/g));//["a", "a"]
    //如果不加全局,可以达到exec的目的
    // 如果加有全局匹配,就会只返回找到的所有元素数组
    // 如果加有群组,但是不加全局,则除返回找到的元素外,还返回群组的元素

# 四.修饰符(3个） #

1.i ：执行对大小不敏感的匹配；  
2.g ：执行全局匹配（查找所有匹配而非在找到第一个后停止）;  
3.m ：执行多行匹配;

# 五.元字符 #

##### 常用元字符表 #####

<table> 
 <thead> 
  <tr> 
   <th>元字符</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>\</td> 
   <td>将下一个字符标记符、或一个向后引用、或一个八进制转义符。例如，“\n”匹配\n。“\n”匹配换行符。序列“\”匹配“\”而“(”则匹配“(”。即相当于多种编程语言中都有的“转义字符”的概念。</td> 
  </tr> 
  <tr> 
   <td>^</td> 
   <td>匹配输入字行首。如果设置了RegExp对象的Multiline属性，^也匹配“\n”或“\r”之后的位置。</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>匹配输入行尾。如果设置了RegExp对象的Multiline属性，$也匹配“\n”或“\r”之前的位置。</td> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>匹配前面的子表达式任意次。例如，zo*能匹配“z”，也能匹配“zo”以及“zoo”。*等价于o{0,}</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>匹配前面的子表达式一次或多次(大于等于1次）。例如，“zo+”能匹配“zo”以及“zoo”，但不能匹配“z”。+等价于{1,}。</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>匹配前面的子表达式零次或一次。例如，“do(es)?”可以匹配“do”或“does”中的“do”。?等价于{0,1}。</td> 
  </tr> 
  <tr> 
   <td>{n}</td> 
   <td>n是一个非负整数。匹配确定的n次。例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>当该字符紧跟在任何一个其他限制符（*,+,?，{n}，{n,}，{n,m}）后面时，匹配模式是非贪婪的。非贪婪模式尽可能少的匹配所搜索的字符串，而默认的贪婪模式则尽可能多的匹配所搜索的字符串。例如，对于字符串“oooo”，“o+”将尽可能多的匹配“o”，得到结果[“oooo”]，而“o+?”将尽可能少的匹配“o”，得到结果 [‘o’, ‘o’, ‘o’, ‘o’]</td> 
  </tr> 
  <tr> 
   <td>.点</td> 
   <td>匹配除“\n”之外的任何单个字符。要匹配包括“\n”在内的任何字符，请使用像“[\s\S]”的模式。</td> 
  </tr> 
  <tr> 
   <td>x/y</td> 
   <td>匹配x或y。例如，“z/food”能匹配“z”或“food”(此处请谨慎)。“[zf]ood”则匹配“zood”或“food”。</td> 
  </tr> 
  <tr> 
   <td>[xyz]</td> 
   <td>字符集合。匹配所包含的任意一个字符。例如，“[abc]”可以匹配“plain”中的“a”。</td> 
  </tr> 
  <tr> 
   <td>[^xyz]</td> 
   <td>负值字符集合。匹配未包含的任意字符。例如，“[^abc]”可以匹配“plain”中的“plin”。</td> 
  </tr> 
  <tr> 
   <td>[a-z]</td> 
   <td>字符范围。匹配指定范围内的任意字符。例如，“[a-z]”可以匹配“a”到“z”范围内的任意小写字母字符。注意:只有连字符在字符组内部时,并且出现在两个字符之间时,才能表示字符的范围; 如果出字符组的开头,则只能表示连字符本身.</td> 
  </tr> 
  <tr> 
   <td>[^a-z]</td> 
   <td>负值字符范围。匹配任何不在指定范围内的任意字符。例如，“[^a-z]”可以匹配任何不在“a”到“z”范围内的任意字符</td> 
  </tr> 
  <tr> 
   <td>\d</td> 
   <td>匹配一个数字字符。等价于[0-9]。grep 要加上-P，perl正则支持</td> 
  </tr> 
  <tr> 
   <td>\D</td> 
   <td>匹配一个非数字字符。等价于[^0-9]。grep要加上-P，perl正则支持</td> 
  </tr> 
  <tr> 
   <td>\s</td> 
   <td>匹配任何不可见字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。</td> 
  </tr> 
  <tr> 
   <td>\S</td> 
   <td>匹配任何可见字符。等价于[^ \f\n\r\t\v]。</td> 
  </tr> 
  <tr> 
   <td>\w</td> 
   <td>匹配包括下划线的任何单词字符。类似但不等价于“[A-Za-z0-9_]”，这里的"单词"字符使用Unicode字符集。</td> 
  </tr> 
  <tr> 
   <td>\W</td> 
   <td>匹配任何非单词字符。等价于“[^A-Za-z0-9_]”。</td> 
  </tr> 
  <tr> 
   <td>( )</td> 
   <td>将( 和 ) 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用 \1 到\9 的符号来引用。</td> 
  </tr> 
  <tr> 
   <td>/</td> 
   <td>将两个匹配条件进行逻辑“或”（Or）运算。例如正则表达式(him</td> 
  </tr> 
  <tr> 
   <td>(?=pattern)</td> 
   <td>正向肯定预查（look ahead positive assert），在任何匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。</td> 
  </tr> 
  <tr> 
   <td>(?!pattern)</td> 
   <td>正向否定预查(negative assert)，在任何不匹配pattern的字符串开始处匹配查找字符串。这是一个非获取匹配，也就是说，该匹配不需要获取供以后使用。</td> 
  </tr> 
  <tr> 
   <td>(?&lt;=pattern)</td> 
   <td>反向(look behind)肯定预查，与正向肯定预查类似，只是方向相反。例如，"(?&lt;=95</td> 
  </tr> 
  <tr> 
   <td>(?&lt;!pattern)</td> 
   <td>反向否定预查，与正向否定预查类似，只是方向相反。例如"(?&lt;!95</td> 
  </tr> 
 </tbody> 
</table>

###### 详解 ######

1.  .//可以匹配任意一个字符

console.log("dogcat".match(/cat/g));//["cat"]
    console.log("cetcotcat".match(/c.t/g));//["cet","cot","cat"]
    console.log("cetc.tcat".match(/c\.t/g));//\.转义为字符串. 打印 ["c.t"]
    console.log("caaaaatcbbbbt".match(/c....t/g));//["cbbbbt"]

1.  /\[1-31\]/ 1,2,3 (一个\[\]里数字只能匹配1到9），  
    /\[0-9\]/ 0,1,2,3,4,5,6,7,8,9  
    /\[a-z\]/ a,b,c,d,e,…z  
    /\[A-Z\]/ A,B,C,D…Z

console.log(/[a-Z]/.test("abc"));//错误的
    console.log(/[A-z]/.test("abc"));//错误的
    console.log(/[a-zA-Z]/)
    console.log(/a[b.c]b/);//[]中的.是字符.
    console.log(/a[\[\]]b/)//a[b a]b 写在[]里面[]字符必须转义
    console.log(/[aaaa]/);//[]中重复是无意义的

// 反义字符类 在[]中第一位使用^,表示除了^后面的字符外都满足
     console.log("abcafcadcaec".match(/a[^f]c/g))//中间不要f
     console.log("abcafcadcaec".match(/a[f^a]c/g))//^如果在[]不是第一位,就表示字符^

**注意：**

*  如果元字符\*\*·\*\*不放在\[\]中表示可以匹配任意字符，放在\[\]中只表示字符 **·**，  
    因为\[\]是表示可以在里面任意匹配一个 ***字符***；
 *  ^如果放在\[\]里第一位，表示除了 ^后面的字符外都满足，如果放的不是第一位，只表示 ^字符；

#  #

3.转义特殊字符  
\[a-zA-Z0-9\_\] \\w  
\[^a-zA-Z0-9\_\] \\W  
\[0-9\] \\d  
\[^0-9\] \\D  
\\s 空白字符  
\\S 非空白字符

var str=" ac bg ed";
    str=str.replace(/\s/g,"");//acbged
    str=str.replace(/\S/g,"z");// zz zz zz
    console.log(str);

**注意：** 空白字符就用空格隔开的 空字符就是"" ,"ab"两个字符之间夹得就是空字符  
4.\{\}  
例如：/\\d\\d\\d\\d-\\d\\d-\\d\\d/ 可简化成——>/\\d\{4\}-\\d\{2\}-\\d\{2\}  
/abc\{2\}/ //c重复两次  
/(abc)\{2\}/ //abc重复两次  
/a\{0\}/ //没有字符a，意味着匹配一个空字符；

5.贪婪匹配：先匹配最大的  
例如：

console.log("aaaaaaaa".match(/a{2,5}/g));//["aaaaa", "aaa"]
    console.log("aaaaaabbb".match(/a{0,4}/g));//["aaaa", "aa", "", "", "", ""]
    console.log("aaaaaa".match(/a{3,6}/g));//["aaaaaa"]

6.? + \* .*?  
? \{0,1\}  
// + \{1,\}  
// \* \{0,\}  
/.*?/ //非贪婪模式 所有贪婪匹配后加？为贪婪

console.log("aaaaaaaa".match(/a{2}/g));//["aa", "aa", "aa", "aa"]
    console.log("caaaaatcbbbbt".match(/c.*?t/g));// ["caaaaat", "cbbbbt"]

7.或者|字符

console.log("catdogcetdag".match(/[catdog]/))
    //["c", index: 0, input: "catdogcetdag"]
    console.log("catdogcetdag".match(/cat|dog/));//或者,可以用来匹配多个字符或者
    //另外得字符 打印["cat", index: 0, input: "catdogcetdag"]
    console.log("abcd".match(/c|b/g));//["b", "c"]
    console.log("abcd".match(/[cb]/));//["b", index: 1, input: "abcd"]
    console.log("abcdef".match(/|a|b/g));//如果|得一端没有内容,则认为匹配空字符
    //["", "", "", "", "", "", ""]
    console.log("abcdef".match(/a||b/g));//如果|得一端没有内容,则认为匹配空字符
    //["a", "", "", "", "", "", ""]
    console.log("abcdef".match(/a|d|/g));//如果|得一端没有内容,则认为匹配空字符
    // ["a", "", "", "d", "", "", ""]

8.^起始 $结束  
案例

<input type="text"><span></span>//html
    
    	  var input,span;
            init(); //调用init函数
            function init(){ 
                input=document.querySelector("input"); 
                span=document.querySelector("span");
                input.addEventListener("input",inputHandler);//监听input的input事件，input事件触发调用inputHandler函数
            }
    
            function inputHandler(e){ 
                if(this.ids) return;    //this指向input 如果this.ids为true return出去
                this.ids=setTimeout(function(input){  //设置定时器并把值赋给this.ids
                    clearTimeout(input.ids);
                    input.ids=false;
                    testInputValue(input.value);
                },500,this);
            }
    
            function testInputValue(txt){ 
                console.log(txt.match(/^[1-9]$|^[12][0-9]$|^3[01]$/))
                if(/^[1-9]$|^[12][0-9]$|^3[01]$/.test(txt)){ //判断值是否为1-31是为true进入
                    span.textContent="输入正确";
                    span.style.color="green";
                }else{ 
                    span.textContent="输入错误";
                    span.style.color="red";
                }
            }

9.群组

console.log("18617891076".match(/(\d{3})(\d{4})(\d{4})/))//群组元素要打印本身["18617891076", "186", "1789", "1076", index: 0, input: "18617891076"] 
    var str="18617891076".match(/(\d{3})(\d{4})(\d{4})/).slice(1).reduce(function(value,item,index){ 
    	return index===1 ? value+"****" : value+item;
    })	
    console.log(str); //186****1076
    //$1就是第一个群组,$2就是第二个群组,$3就是第三个群组
    var str="18617891076".replace(/(\d{3})(\d{4})(\d{4})/,"$1****$3");
    console.log(str);//186****1076

10.断言 ?= ?! ?<= ?<!

console.log("abcdadef".match(/a(?=d)/g))//["a"]
    console.log("a0bcd adef a&cd".replace(/a(?=d)/g,"0"));//a0bcd 0def a&cd
    console.log("a0bcd adef a&cd".replace(/a(?=[a-z])|a(?=[0-9])/g,"1"));
    //10bcd 1def a&cd
    console.log("a0bc adef a&bc".replace(/a(?![a-z])/g,"1"));
    //?!相当于不等于 10bc adef 1&bc
    console.log("a0bc adef a&bc".replace(/(?<=[0-9])b/g,"1"));//前置条件 
    console.log("a0bc adef a&bc".replace(/(?<![0-9])b/g,"1"));//前置条件不等于

[20200108200914558.png]: /images/20210726/1b745ee2a0e04fc5a44fc2552eb63f6b.png