前端javaScript 之【正则表达式】

墨蓝 2023-02-16 06:16 13阅读 0赞

现在很多做前端的同学对于正则已经远远的抛于脑后，这篇文章简单写一下正则，帮助大家回顾，同时也是小白学习的好地方。

## **正则表达式的基本表示：这个表很重要，争取多看几遍，最好背下来。** ##

^          // 说明字符串的开始
    $          // 说明字符串的结束
    \b         // 表示一个单词的开始或结束
    \w         // 表示：数字、字母、下划线
    \s         // 表示任意一个空白字符
    \d         // 可以代表任意一个数字
    .          // 点代表一个非换行的任意字符
    []         // 字符类 ，例如[a-z]，注意：反过来[z-a]会报错
    *          // 表示0～无穷多次
    {n}        // 表示重复n次
    {n,m}      // 表示重复n～m次
    {n,}       // 表示重复n～无穷多次
    +          // 代表重复1～无穷多次
    ?          // 代表重复0或1次 ，可用于懒惰匹配
    |          // 或
    ()         // 分组

## **定义一个正则表达式两种方法**： ##

**1.** 放在/ /之中来书写 **2.** var regExp = new RegExp('正则表达式')

两种方法一样，本次先用第一种方法举例

例如：var num = /^\\d\{3\}$/num值验证的是三位数字，^代表字符串开始$代表字符串结束，\\d代表数字，\{3\}重复3次。

**验证正则test()**：可用**test()**方法来验证是否含有符合要求的字符，返回值为布尔值（true/false），如：num.test(123)

我们来写一个验证手机号输入正确与否的案例：

## **开发思考**： ##

1.  目前手机号都是以1开头，所以1要写成固定。
2.  第二位目前手机号可以是345678都可以。
3.  剩下的九位数，0～9都可以，所以\\d重复9次。

可以写成：/^1\[345678\]\\d\{9\}$/\[\]是字符类，可以验证是否存在\[\]中所拥有的字符。

## **标签部分** ##

<input type="number" id="tel"><span>请输入正确的手机号码</span>

## **js部分** ##

// 取到input输入的值，丢失焦点后，开始验证手机号码，用onblur
    document.querySelector(#tel).onblur = function() {
    
      var val = this.value // 取到input输入的value值
      
      var mobileReg = /^1[345678]\d{9}$/ //验证手机号正则
      
      if(mobileReg.test(val)){
      
        // 此时验证成功，写下想要执行的方法
        
      }else{
      
        // 此时验证失败，写下要执行的方法
        
      }
    }

**以上就是简单的正则表达式，如果你有兴趣可以简单的进阶一下：**

**刚才的例子是判断一个字符串是否符合要求，但正则不仅仅这么简单，还可以进行**分组提取。

正则给我们提供了一个exec()方法，如果匹配成功，返回一个数组Array，匹配失败会返回null

**我们可以利用此方法提取电话号的区号和本地号码，如：**

var tel = '0434-123456';   // 简单写一个电话号
    var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用（）进行分组，区号可以是3位或4位，号码0～n个数值
    var resule = reg.exec(tel)  // 结果赋值

上述的reg所包含的正则带有()，可以为其分组，(\\d\{3\}|\\d\{4\})为一组，(\\d\{0,\})为一组。

成功打印出来，返回数组格式，这样我们就可以轻松拿到想要的号段。

console.log(resule)
    // ["0434-123456", "0434", "123456"]

**正则捕获**

正则表达式中如果有分组,那么分组匹配的内容，就会被保存到RegExp.$1-RegExp.$99中，这种现象叫做正则表达式的捕获。

可能会有些不清楚，解释一下：RegExp代表的就是正则，$1-$99代表的是捕获到的每个字段，存在1-99当中。

那么RegExp.$1代表的就是第一个字段，RegExp.$2代表的是第二个字段。

举个例子，还拿刚才的电话号来说，他有分组，一个是区号，一个是本地号码，打印出来是一个数组，那么我们就可以通过RegExp.$1和RegExp.$2捕获到这两个分组的值。

var tel = '0434-123456';   // 简单写一个电话号
    var reg = /^(\d{3}|\d{4})-(\d{0,})$/  // 用（）进行分组，区号可以是3位或4位，号码0～n个数值
    reg.exec(tel)
    
    console.log(RegExp.$1)   // "0434"
    console.log(RegExp.$2)   // "123456"

**正则修饰符**

常用的修饰符有三个，分别为

i：忽略大小写 m：执行多次 g：全局匹配

**用法：**

如：

var num = /\\d\{3\}/g

var num = new RegExp('\\\\d\{3\}', 'g');

这三个修饰符放在后边就可以。

仔细看会发现new构造出的正则中，\\b，写成了\\\\b，这个不是错误，编辑器会转义成\\

用g举例说明：

var str = '小白，13987654321234567;小林，13898765433;小张，13798765432!!!'；
    var reg = /1\d{10}/g;
    
    var arr = str.match(reg)
    console.log(arr);  // ["13987654321", "13898765433", "13798765432"]

此时会打印出三个数值，如果不加全局修饰符g，会打印出一条。

举例中的match()方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

上述例子全局找到符合正则reg的的字段。

**与此类似的方法还有：**

1.  replace()
2.  split()
3.  search()

## 举一个split()例子： ##

**普通js方法**

'a b   c'.split(' '); // ['a', 'b', '', '', 'c']

**空格也会打印出来，加正则看一下：**

'a b   c'.split(/\s+/); // ['a', 'b', 'c']

**再例如：**

'a,b, c  d'.split(/[\s\,]+/); // ['a', 'b', 'c', 'd']