JavaScript从入门到放弃 -（六）正则表达式

雨点打透心脏的1/2处 2023-03-02 10:24 20阅读 0赞

### 正则表达式 ###

*  1. 正则表达式概述
 *   *  1.1 什么是正则表达式
     *  1.2 正则表达式的特点
 *  2. 正则表达式在JavaScript中的使用
 *   *  2.1 创建正则表达式
     *   *  2.1.1 通过调用 RegExp 对象的构造函数创建
         *  2.1.2 通过字面量创建
     *  2.2 test测试正则表达式
 *  3. 正则表达式中的特殊字符
 *   *  3.1 正则表达式的组成
     *  3.2 边界符
     *  3.3 字符类
     *   *  3.3.1 \[ \] 方括号
         *  3.3.2 \[ - \] 方括号（内部） 范围符-
         *  3.3.3 字符组合
         *  3.3.4 \[ ^ \] 方括号（内部） 取反符^
     *  3.4 量词符
     *  案例：用户名验证
     *  3.5 括号总结及正则验证工具
     *   *  3.5.1 中括号
         *  3.5.2 大括号
         *  3.5.3 小括号
         *  3.5.4 正则表达式在线验证-菜鸟工具
     *  3.6 预定义类及座机号码、表单验证案例
     *   *  3.6.1 预定义类（也称元字符）
         *  3.6.2 座机号码验证案例
         *  3.6.3 表单验证案例
 *  4. 正则表达式中的替换及敏感词过滤案例
 *   *  4.1 replace 替换
     *  4.2 正则表达式参数
 *  5. 常用正则表达式
 *   *  5.1 数字校验
     *  5.2 字符校验
     *  5.3 特殊需求处理

--------------------

**学习目标**

*  了解正则表达式的作用；
 *  能够写出简单的正则表达式；
 *  能够使用正则表达式对表单进行验证；
 *  能够使用正则表达式替换内容。

**学习内容：**

1.  正则表达式概述；
2.  正则表达式在JavaScript中的使用；
3.  正则表达式中的特殊字符；
4.  正则表达式中的替换。

--------------------

# 1. 正则表达式概述 #

## 1.1 什么是正则表达式 ##

**正则表达式**（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象(是作为对象的形式存在的)。

**正则表达式**通常被用来检索、替换那些符合某个模式（规则）的文本。  
例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)。此外，正则表达式还常用于*过滤* 掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。  
其他语言也会使用正则表达式，本节内容主要学习如何利用 JavaScript 正则表达式完成表单验证。

## 1.2 正则表达式的特点 ##

1.  灵活性、逻辑性和功能性非常的强；
2.  可以迅速地用极简单的方式达到字符串的复杂控制；
3.  对于刚接触的人来说，比较晦涩难懂。比如验证邮箱： `^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$`
4.  实际开发，一般都是直接复制写好的正则表达式，但是要求会使用正则表达式并且根据实际情况修改正则表达式。 比如验证用户名：`/^[a-z0-9_-]{3,16}$/`

# 2. 正则表达式在JavaScript中的使用 #

## 2.1 创建正则表达式 ##

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

### 2.1.1 通过调用 RegExp 对象的构造函数创建 ###

**1). 语法格式：**

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

**2). 应用示例：**

var regexp = new RegExp(/123/);  // 要求必须输入 “123”

如果正则表达式将会改变，或者它将会从用户输入等来源中动态地产生，就需要使用构造函数来创建正则表达式。

### 2.1.2 通过字面量创建 ###

**1) 语法格式：**

var 变量名 = /表达式/;

**2) 应用示例:**

Var rg = /123/

如果该正则表达式是始终保持不变的，使用字面量创建正则可获得更好的性能。

> 通常采用字面量创建，这样代码更简洁。

## 2.2 test测试正则表达式 ##

`test()` 正则对象方法（正则表达式的专门方法），用于检测字符串是否符合该规则，该对象会返回 `true` 或 `false`，其参数是测试字符串。

**1）语法规范：**

regexObj.test(str)

1.  `regexObj` 是写的正则表达式
2.  `str` 要测试的文本

**2）应用示例：**

var rg = /123/;
    console.log(rg.test(123));  // 返回true

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

## 3.1 正则表达式的组成 ##

一个正则表达式可以由简单的字符构成，比如 `/abc/`，也可以是“简单”+“特殊字符”的组合，比如 `/ab*c/` 。其中特殊字符也被称为**元字符**，是在正则表达式中具有**特殊**意义的专用**符号**，如 `^` 、`$`、`+` 等。

更多**特殊字符**请参考：

*  **MDN：**[https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular\_Expressions][https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Guide_Regular_Expressions]
 *  **jQuery API手册：** [正则表达式][Link 1]；
 *  **正则测试工具：** [https://tool.oschina.net/regex][https_tool.oschina.net_regex]

下面把**元字符**划分为几类进行学习

## 3.2 边界符 ##

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

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

**应用示例：**

示例一

// 边界符 ^ $
    var rg = /abc/;  // 正则表达式里不需要加引号，不论其是何种数据类型
    console.log(rg.test('abc'));  // 返回 true
    console.log(rg.test('aabc')); // 返回 true
    console.log(rg.test('abcc')); // 返回 true

解释：`/abc/` 只要包含有`abc`这个字符串，返回的都是`true`。  
注：它仅能匹配 “`abc`” 字符按照顺序同时出现的情况。

示例二

var reg = /^abc/;   // 表示以 abc 开头的
    console.log(rg.test('abc'));  // 返回 true
    console.log(rg.test('aabc')); // 返回 false，没有以abc开头
    console.log(rg.test('abcc')); // 返回 true

示例三

var reg = /^abc$/;   // 精确匹配，必须是abc才符合规范（全字匹配）
    console.log(rg.test('abc'));    // 返回 true
    console.log(rg.test('abcabc')); // 返回 false
    console.log(rg.test('aabc'));   // 返回 false
    console.log(rg.test('abcc'));   // 返回 false

## 3.3 字符类 ##

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

### 3.3.1 \[ \] 方括号 ###

示例一

var rg = /[abc]/; 
    console.log(rg.test('black'))   // 返回 true
    console.log(rg.test('color'))   // 返回 true
    console.log(rg.test('red'))     // 返回 false

**解释：** 字符串中，只要包含 `abc` 中任意一个字符，都返回 `true` 。

示例二

var rg = /^[abc]$/;  // 三选一：只有是 a 或 b 或 c 才返回 true
    console.log(rg.test('aa'))  // 返回 false
    console.log(rg.test('a'))   // 返回 true

### 3.3.2 \[ - \] 方括号（内部） 范围符- ###

方括号内部加上 `-` （短横线）， 连接的意思，表示范围。

**应用示例：**  
a 到 z 26个英文字母（小写）都可以输入

var rg = /^[a - z]$/;   // 限定为26个英文小写字母，任意一个小写字母都返回 true
    console.log(rg.test('c'));   // 返回 true

### 3.3.3 字符组合 ###

**应用示例：**

**示例一：**  
26个英文字母（不区分大、小写）都可以输入

var rg = /^[a - zA-Z]$/;   // 限定为26个英文字母（不区分大、小写）
    console.log(rg.test('c'));   // 返回 true

**示例二：**  
数字和字母（不区分大、小写）都可以输入

var rg = /^[a - zA-Z0-9]$/;   // 数字+字母均返回 true
    console.log(rg.test(5));      // 返回 true

### 3.3.4 \[ ^ \] 方括号（内部） 取反符^ ###

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

> 注意和**边界符** `^` 的区别，边界符是写到方括号外面。

**示例：**

var reg1 = /^[^a-zA-Z0-9_-]$/;  // 中括号内的 ^ 表示取反
    console.log(rg.test(5));      // 返回 false
    console.log(rg.test('!'));    // 返回 true

## 3.4 量词符 ##

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

上表中的**量词符**可划分为**符号**和**花括号**两大组。**花括号**这组要**重点掌握**。

**示例一：**

var reg = /^a$/;

a 后面添加 `*` （相当于 >= 0 ）：

var reg = /^a*$/;
    console.log(reg.test(''));     // 返回 true
    console.log(reg.test('a'));    // 返回 true
    console.log(reg.test('aaa'));  // 返回 true

**解释：** `*` 的意思，就是前一项出现零次或者多次。

**示例二：**  
a 后面添加 `+` （相当于 >= 1 ）：

var reg = /^a+$/;
    console.log(reg.test(''));     // 返回 false
    console.log(reg.test('a'));    // 返回 true
    console.log(reg.test('aaa'));  // 返回 true

`+` ：匹配前面一个表达式 1 次或者多次。等价于 \{1,\}

**示例三：**

a 后面添加 `?` （相当于 0 || 1）：

var reg = /^a?$/;
    console.log(reg.test(''));     // 返回 true，出现了 0 次
    console.log(reg.test('a'));    // 返回 true，出现了 1 次
    console.log(reg.test('aaa'));  // 返回 false，出现了多次

匹配前面一个表达式 0 次或者 1 次。等价于 \{0,1\}。

**示例四：**

\{ 3 \} 重复 3 次

var reg = /^a{3}$/;   // 让花括号前面的 a 只能出现 3 次
    console.log(reg.test(''));       // 返回 false，出现了 0 次
    console.log(reg.test('a'));      // 返回 false，出现了 1 次
    console.log(reg.test('aaa'));    // 返回 true，重复了 3 次
    console.log(reg.test('aaaa'));   // 返回 false，重复了4 次

**示例五：**  
\{ 3, \} 大于等于 3

var reg = /^a{3,}$/;   // 让花括号前面的 a 只能出现 3 次
    console.log(reg.test(''));       // 返回 false，出现了 0 次
    console.log(reg.test('a'));      // 返回 false，出现了 1 次
    console.log(reg.test('aaa'));    // 返回 true，出现了 3 次
    console.log(reg.test('aaaa'));   // 返回 true，大于了 3 次

**示例六：**  
\{ 3, 6\} 大于等于 3，并且 小于等于6

var reg = /^a{3,6}$/;   // 让花括号前面的 a 只能出现 3 ~ 6次
    console.log(reg.test(''));          // 返回 false，出现了 0 次
    console.log(reg.test('a'));         // 返回 false，出现了 1 次
    console.log(reg.test('aaa'));       // 返回 true，出现了 3 次
    console.log(reg.test('aaaa'));      // 返回 true，大于 3 小于 6
    console.log(reg.test('aaaaaaa'));   // 返回 false，大于了 6 次

\{n,m\} ：n 和 m 都是整数。匹配前面的字符至少n次，最多m次。如果 n 或者 m 的值是0， 这个值被忽略。

**注意：**`{3,6}` 花括号内，量词之间 **不能有空格**，否则没有效果。

--------------------

## 案例：用户名验证 ##

**功能需求：**

*  如果用户名输入合法, 则后面提示信息为 : 用户名合法,并且颜色为绿色;
 *  如果用户名输入不合法, 则后面提示信息为: 用户名不符合规范, 并且颜色为绿色。
 *  用户名只能为英文字母,数字,下划线或者短横线组成, 并且用户名长度为 6~16位.；

**分析：**

1.  首先准备好正则表达式模式 / ^ \[a-zA-Z0-9-\_\]\{6,16\}$/
2.  当表单失去焦点就开始验证.；
3.  如果符合正则规范, 则让后面的span标签添加 right 类；
4.  如果不符合正则规范, 则让后面的span标签添加 wrong 类。

**HTML结构**

<input type="text" class="uname"><span>请输入用户名</span>

**CSS样式**

**JavaScript代码**

【onblur 事件】：请参阅 [w3cschool 文档][w3cschool]

## 3.5 括号总结及正则验证工具 ##

1.  中括号 字符集合。多选一，匹配方括号中的任意字符都可以；
2.  大括号 量词符。里面表示重复次数，如果不加小括号，只对它前面的1个字符起作用；
3.  小括号 表示优先级。

### 3.5.1 中括号 ###

// 多选 1 ，表示 a || b || c
    var reg=/^[abc]$/

**多选 1** ，表示 `a || b || c`

### 3.5.2 大括号 ###

// 表示只让 c 重复 3 次 abccc 结果为 true
    var reg = /^abc{3}$/;
    console.log(reg.test('aabbccc'));  // false
    console.log(reg.test('abccc'));    // true

**解释：** **大括号**的量词限定只对靠近它的**左边第一个字符**起作用。

### 3.5.3 小括号 ###

// 表示让 abc 重复 3 次
    var reg = /^(abc){3}$/;
    console.log(reg.test('aabbccc'));     // false
    console.log(reg.test('abccc'));       // false
    console.log(reg.test('abcabcabc'));   // true

**解释：** 小括号，表示优先级，把括号中的当做一个整体参与运算。

### 3.5.4 正则表达式在线验证-菜鸟工具 ###

由于本地测试，需要通过不同的log来打印比较麻烦，其实可以借助于**在线工具**来完成

**正则表达式在线测试：** [https://c.runoob.com/front-end/854][https_c.runoob.com_front-end_854]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]  
**注意**，此工具的表达式输入框中，表达式两边不要输入斜杠 “ / ”

## 3.6 预定义类及座机号码、表单验证案例 ##

### 3.6.1 预定义类（也称元字符） ###

指某些常见模式的简写方式。

<table> 
 <thead> 
  <tr> 
   <th align="left">预定义类</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>\d</code></td> 
   <td align="left">数字。匹配0-9之间的任意数字，相当于[ 0-9 ]</td> 
  </tr> 
  <tr> 
   <td align="left"><code>\D</code></td> 
   <td align="left">非数字。匹配0-9以外的字符，相当于[ ^0-9 ]</td> 
  </tr> 
  <tr> 
   <td align="left"><code>\w</code></td> 
   <td align="left">匹配任意的字母、数字和下划线，相当于[a-zA-Z0-9_]</td> 
  </tr> 
  <tr> 
   <td align="left"><code>\W</code></td> 
   <td align="left">除所有字母、数字和下划线以外的字符，相当于[ ^a-zA-Z0-9_]</td> 
  </tr> 
  <tr> 
   <td align="left"><code>\s</code></td> 
   <td align="left">验证是否为空：匹配空格（包括换行符、制表符、空格符等），相当于[\t\r\n\v\f]</td> 
  </tr> 
  <tr> 
   <td align="left"><code>\S</code></td> 
   <td align="left">匹配非空格的字符，相当于[ ^\t\r\n\v\f]</td> 
  </tr> 
 </tbody> 
</table>

### 3.6.2 座机号码验证案例 ###

全国座机号码，三种格式：010-12345678、0760-1234567、0755-12345678

var reg = /^\d{3}-\d{8}|\d{4}-\d{7,8}$/;  //或
    var reg = /^\d{3,4}-\d{7,8}$/;

上面两种正则的效果相同。第一种用了或 “`|`” 的表示方法。

> 注意，在正则里，“或” 用单竖线 “`|`” 表示。

### 3.6.3 表单验证案例 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]  
**分析：**

*  手机号码正则： `/^1[3|4|5|7|8]\d{9}$/`
 *  QQ: `[1-9][0-9]{4,}` (腾讯QQ号从10000开始)
 *  昵称是中文： `^[\u4e00-\u9fa5]{2,8}$`

`{4,}`：至少出现4次

# 4. 正则表达式中的替换及敏感词过滤案例 #

## 4.1 replace 替换 ##

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

**语法结构：**

stringObject.replace(regexp/substr,replacement)

**参数说明：**  
`regexp/substr`：被替换的字符串，或者正则表达式；  
`replacement`：替换为的字符串；  
`返回值`：是一个替换完毕的新字符串。

**应用示例：**

**示例一： 普通替换**

var str='andy和red';
    var newStr = str.replace('andy','baby')
    console.log(newStr)  // 打印输出 baby和red

**示例二：正则式替换（敏感词过滤）**

**HTML结构：**

**CSS样式：**

**JavaScript 代码：**

![在这里插入图片描述][20200729230939462.png]  
注意：一般情况下，`replace`只能替换第一个满足条件的字符串。这时，就要利用到正则表达式的参数

## 4.2 正则表达式参数 ##

**语法规范：**

/表达式/[switch]

参数`switch`(也称为**修饰符**) 用来限定按照什么样的模式来匹配。它有三种值：

*  `g`：全局匹配（global 的缩写）；
 *  `i`：忽略大小写（ignore 的缩写）；
 *  `gi`：全局匹配 + 忽略大小写。  
    因此，对上面敏感词替换的代码添加 `g` ，最终完善如下：

这样，对于文本中多次出现的敏感词均能替换，弥补了`replace`本身的不足。  
![在这里插入图片描述][20200729230658270.png]

# 5. 常用正则表达式 #

## 5.1 数字校验 ##

1.  **数字：**
    
        ^[0-9]*$
    
      
    
2.  **`n`位的数字：**
    
        ^\d{ n}$
    
      
    
3.  **至少`n`位的数字**：
    
        ^\d{ n,}$
    
      
    
4.  **`m-n` 位的数字**：
    
        ^\d{ m,n}$
    
      
    
5.  **零和非零开头的数字**：
    
        ^(0|[1-9][0-9]*)$
    
      
    
6.  **非零开头的最多带两位小数的数字**：
    
        ^([1-9][0-9]*)+(.[0-9]{ 1,2})?$
    
      
    
7.  **带`1-2`位小数的正数或负数**：
    
        ^(\-)?\d+(\.\d{ 1,2})?$
    
      
    
8.  **正数、负数、和小数**：
    
        ^(\-|\+)?\d+(\.\d+)?$
    
      
    
9.  **有`2`位小数的正实数**：
    
        ^[0-9]+(.[0-9]{ 2})?$
    
      
    
10. **有`1~3`位小数的正实数**：
    
        ^[0-9]+(.[0-9]{ 1,3})?$
    
      
    
11. **非零的正整数**：
    
        ^[1-9]\d*$ 或 ^([1-9][0-9]*){ 1,3}$ 或 ^\+?[1-9][0-9]*$
    
      
    
12. **非零的负整数**：
    
        ^\-[1-9][]0-9″*$ 或 ^-[1-9]\d*$
    
      
    
13. **非负整数**：
    
        ^\d+$ 或 ^[1-9]\d*|0$
    
      
    
14. **非正整数**：
    
        ^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
    
      
    
15. **非负浮点数**：
    
        ^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
    
      
    
16. **非正浮点数**：
    
        ^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

1.  **正浮点数**：
    
        ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
    
      
    
2.  **负浮点数**：
    
        ^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
    
      
    
3.  **浮点数**：
    
        ^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

## 5.2 字符校验 ##

1.  **汉字**：
    
        ^[\u4e00-\u9fa5]{ 0,}$
    
      
    
2.  **英文和数字**：
    
        ^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{ 4,40}$
    
      
    
3.  **长度为`3-20`的所有字符**：
    
        ^.{ 3,20}$
    
      
    
4.  **由26个英文字母组成的字符串**：
    
        ^[A-Za-z]+$
    
      
    
5.  **由26个大写英文字母组成的字符串**：
    
        ^[A-Z]+$
    
      
    
6.  **由26个小写英文字母组成的字符串**：
    
        ^[a-z]+$
    
      
    
7.  **由数字和26个英文字母组成的字符串**：
    
        ^[A-Za-z0-9]+$
    
      
    
8.  **由数字、26个英文字母或者下划线组成的字符串**：
    
        ^\w+$ 或 ^\w{ 3,20}$
    
      
    
9.  **中文、英文、数字包括下划线**：
    
        ^[\u4E00-\u9FA5A-Za-z0-9_]+$
    
      
    
10. **中文、英文、数字但不包括下划线等符号**：
    
        ^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{ 2,20}$
    
      
    
11. **可以输入含有`^%&’,;=?$\”`等字符：**
    
        [^%&',;=?$\x22]+

1.  **禁止输入含有`~`的字符**：
    
        [^~\x22]+

## 5.3 特殊需求处理 ##

1.  **`Email` 地址**：
    
        ^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
    
      
    
2.  **域名**：
    
        [a-zA-Z0-9][-a-zA-Z0-9]{ 0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
    
      
    
3.  **`InternetURL`**：
    
        [a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
    
      
    
4.  **手机号码**：
    
        ^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{ 8}$
    
      
    
5.  **电话号码**（“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-XXXXXXXX”、”XXXXXXX”和”XXXXXXXX）：
    
        ^($$\d{ 3,4}-)|\d{ 3.4}-)?\d{ 7,8}$
    
      
    
6.  **国内电话号码**（0511-4405222、021-87888822）：
    
        \d{ 3}-\d{ 8}|\d{ 4}-\d{ 7}
    
      
    
7.  **身份证号**（`15`位、`18`位数字）：
    
        ^\d{ 15}|\d{ 18}$
    
      
    
8.  **短身份证号码**（数字、字母`x`结尾）：
    
        ^([0-9]){ 7,18}(x|X)?$ 或 ^\d{ 8,18}|[0-9x]{ 8,18}|[0-9X]{ 8,18}?$

1.  **帐号是否合法**（字母开头，允许5-16字节，允许字母数字下划线）：
    
        ^[a-zA-Z][a-zA-Z0-9_]{ 4,15}$
    
      
    
2.  **密码**（以字母开头，长度在6~18之间，只能包含字母、数字和下划线）：
    
        ^[a-zA-Z]\w{ 5,17}$
    
      
    
3.  **强密码**（必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间）：
    
        ^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{ 8,10}$
    
      
    
4.  **日期格式**：
    
        ^\d{ 4}-\d{ 1,2}-\d{ 1,2}
    
      
    
5.  **一年的`12`个月**（`01～09`和`1～12`）：
    
        ^(0?[1-9]|1[0-2])$

1.  **一个月的`31`天**（`01～09`和`1～31`）：
    
        ^((0?[1-9])|((1|2)[0-9])|30|31)$

1.  **钱的输入格式**：
    
    有四种钱的表示形式我们可以接受:”`10000.00`″ 和 “`10,000.00`″, 和没有 “`分`” 的 “`10000`″ 和 “`10,000`″：
    
        ^[1-9][0-9]*$
    
    这表示任意一个不以`0`开头的数字。但是，这也意味着一个字符”`0`″不通过，所以我们采用下面的形式：
    
        ^(0|[1-9][0-9]*)$
    
      
    
    
    一个`0`或者一个不以`0`开头的数字，我们还可以允许开头有一个负号：
    
        ^(0|-?[1-9][0-9]*)$
    
    这表示一个`0`或者一个可能为负的、开头不为`0`的数字，让用户以`0`开头好了，把负号的也去掉，因为钱总不能是负的吧。下面我们要加的是说明可能的小数部分：
    
        ^[0-9]+(.[0-9]+)?$
    
    必须说明的是，小数点后面至少应该有`1`位数，所以”`10.`”是不通过的，但是 “`10`″ 和 “`10.2`″ 是通过的：
    
        ^[0-9]+(.[0-9]{ 2})?$
    
      
    
    
    这样我们规定小数点后面必须有两位，如果你认为太苛刻了，可以这样：
    
        ^[0-9]+(.[0-9]{ 1,2})?$
    
      
    
    
    这样就允许用户只写一位小数。下面我们该考虑数字中的逗号了，我们可以这样：
    
        ^[0-9]{ 1,3}(,[0-9]{ 3})*(.[0-9]{ 1,2})?$
    
      
    
    
    `1`到`3`个数字，后面跟着任意个逗号(`,`) +`3`个数字，逗号(`,`)成为可选，而不是必须：
    
        ^([0-9]+|[0-9]{ 1,3}(,[0-9]{ 3})*)(.[0-9]{ 1,2})?$
    
    备注：这就是最终结果了，别忘了”`+`”可以用”`*`”替代。如果你觉得空字符串也可以接受的话(奇怪，为什么?)。最后，别忘了在用函数时去掉去掉那个反斜杠(`\`)，一般的错误都在这里  
      
    
2.  **`xml`文件**：
    
        ^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

1.  **中文字符的正则表达式**：
    
        [\u4e00-\u9fa5]

1.  **双字节字符**（包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计`2`，ASCII字符计1)）：
    
        [^\x00-\xff]

1.  **空白行的正则表达式**（可以用来删除空白行）：
    
        \n\s*\r

1.  **`HTML`标记的正则表达式**（网上流传的版本太糟糕，下面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力）：
    
        <(\S*?)[^>]*>.*?|<.*? />
    
      
    
2.  **首、尾空白字符的正则表达式**（可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式）：
    
        ^\s*|\s*$或(^\s*)|(\s*$)
    
      
    
3.  **腾讯QQ号**（从10000开始）：
    
        [1-9][0-9]{ 4,}
    
      
    
4.  **中国邮政编码**（中国邮政编码为`6`位数字）：
    
        [1-9]\d{ 5}(?!\d)
    
      
    
5.  **IP地址**（提取`IP`地址时有用）：
    
        \d+\.\d+\.\d+\.\d+
    
      
    
6.  **IP地址**：
    
        ((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){ 3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
    
      
    
7.  **文件名检验**（不能用于文件名的非法字符，包括水平制表符换行符回车符等）：
    
        "[\|\/\<\>"":\*\\\?\t\v\n\r\f]"
    
      
    
    
    **VBA 函数示例**：
    
        Function FileNameNorm(ByVal mStr As String)
            Set regex = CreateObject("vbscript.regexp")
            regex.Global = True
            regex.IgnoreCase = False
            regex.Pattern = "[\|\/\<\>"":\*\\\?\t\v\n\r\f]"
            FileNameNorm = regex.Replace(mStr, "")
            Set regex = Nothing
        End Function

![在这里插入图片描述][5bafaf4ecbdb4015a8e5d6176bf80c70.gif_pic_center]

上一篇：[JavaScript从入门到放弃 -（五）函数进阶（高级用法）  
][JavaScript_ -_]  
下一篇：[JavaScript从入门到放弃 -（七）ES6][JavaScript_ -_ES6]

[https_developer.mozilla.org_zh-CN_docs_Web_JavaScript_Guide_Regular_Expressions]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
[Link 1]: https://jquery.cuishifeng.cn/
[https_tool.oschina.net_regex]: https://tool.oschina.net/regex
[w3cschool]: https://www.w3cschool.cn/jsref/jsref-event-onblur.html
[https_c.runoob.com_front-end_854]: https://c.runoob.com/front-end/854
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70]: /images/20230208/dbfdc11e193b4d8f83a6f20c7488136c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pnbGliaw_size_16_color_FFFFFF_t_70 1]: /images/20230208/17b08d437bf84d4d8ead8db107b580e7.png
[20200729230939462.png]: /images/20230208/21e9187a8de24c67b115bee4fe52bb79.png
[20200729230658270.png]: /images/20230208/c15bc4546e1742f3b0c8ce16ebbd9e48.png
[5bafaf4ecbdb4015a8e5d6176bf80c70.gif_pic_center]: /images/20230208/2f381025ff6c466f8694fb7cae8379c7.png
[JavaScript_ -_]: https://blog.csdn.net/zglibk/article/details/107569403
[JavaScript_ -_ES6]: https://oldriver.blog.csdn.net/article/details/107699764