JavaScript高级之正则表达式的使用

比眉伴天荒 2023-02-14 15:57 77阅读 0赞

### JavaScript高级之正则表达式的使用 ###

*  JavaScript高级之正则表达式的使用
 *   *  1 正则表达式在js中的使用
     *   *  1.1 正则表达式的创建
         *  1.2 测试正则表达式
     *  2 正则表达式中的特殊字符
     *   *  2.1 边界符（位置符）
         *  2.2 字符类
         *   *  2.2.1 \[\] 方括号
             *  2.2.2 量词符
             *  2.2.3 括号总结
         *  2.3 预定义类与后置参数
         *  2.4 正则替换replace
     *  3 表单验证案例详解

# JavaScript高级之正则表达式的使用 #

## 1 正则表达式在js中的使用 ##

正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象。主要是利用JavaScript 正则表达式完成表单验证。

### 1.1 正则表达式的创建 ###

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

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

var regexp = new RegExp(/123/);
    console.log(regexp);

方式二：利用字面量创建 正则表达式

var rg = /123/;

### 1.2 测试正则表达式 ###

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

var rg = /123/;
    console.log(rg.test(123));//匹配字符中是否出现123 出现结果为true
    console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false

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

### 2.1 边界符（位置符） ###

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

<table> 
 <thead> 
  <tr> 
   <th>边界符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>^</td> 
   <td>表示匹配行首的文本（以谁开始）</td> 
  </tr> 
  <tr> 
   <td>$</td> 
   <td>表示匹配行尾的文本（以谁结束）</td> 
  </tr> 
 </tbody> 
</table>

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

### 2.2 字符类 ###

#### 2.2.1 \[\] 方括号 ####

表示有一系列字符可供选择，只要匹配其中一个就可以了。

#### 2.2.2 量词符 ####

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

<table> 
 <thead> 
  <tr> 
   <th>量词</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>*</td> 
   <td>重复0次或更多次</td> 
  </tr> 
  <tr> 
   <td>+</td> 
   <td>重复1次或更多次</td> 
  </tr> 
  <tr> 
   <td>?</td> 
   <td>重复0次或1次</td> 
  </tr> 
  <tr> 
   <td>{n}</td> 
   <td>重复n次</td> 
  </tr> 
  <tr> 
   <td>{n,}</td> 
   <td>重复n次或更多次</td> 
  </tr> 
  <tr> 
   <td>{n,m}</td> 
   <td>重复n到m次</td> 
  </tr> 
 </tbody> 
</table>

#### 2.2.3 括号总结 ####

1.大括号 量词符. 里面表示重复次数

2.中括号 字符集合。匹配方括号中的任意字符.

3.小括号表示优先级

### 2.3 预定义类与后置参数 ###

预定义类指的是某些常见模式的简写方式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]  
后置参数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]

### 2.4 正则替换replace ###

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

## 3 表单验证案例详解 ##

各种类型数据的表单验证如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200604143501379.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200604143548845.JPG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTM3NzIx,size_16,color_FFFFFF,t_70