从零开始学正则（二）

绝地灬酷狼 2022-12-30 01:25 190阅读 0赞

故心故心故心故心小故冲啊

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

### 文章目录 ###

*  从零开始学正则（二），正则表达式位置匹配攻略
 *  1 .正则表达式位置匹配攻略
 *   *  1.1. 什么是位置呢？
     *  1.2. 如何匹配位置呢？
     *   *  1.2.1. ^ 和 $
         *  1.2.2. \\b 和 \\B
         *  1.2.3. (?=p) 和 (?!p)
     *  1.3. 位置的特性
     *  1.4. 相关案例
     *   *  1.4.1. 不匹配任何东西的正则
         *  1.4.2 数字的千位分隔符表示法
         *  1.4.3. 匹配其余案例
         *  1.4.4支持其他形式
         *  1.4.5验证密码问题

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

# 从零开始学正则（二），正则表达式位置匹配攻略 #

# 1 .正则表达式位置匹配攻略 #

正则表达式是匹配模式，要么匹配字符，要么匹配位置。请记住这句话。  
然而大部分人学习正则时，对于匹配位置的重视程度没有那么高。  
本章讲讲正则匹配位置的相关知识点。  
内容包括：  
什么是位置？  
如何匹配位置？  
位置的特性  
几个应用实例分析

## 1.1. 什么是位置呢？ ##

位置（锚）是相邻字符之间的位置。比如，下图中箭头所指的地方：  
![在这里插入图片描述][20201223173433490.png]

## 1.2. 如何匹配位置呢？ ##

在 ES5 中，共有 6 个锚： ^、$、\\b、\\B、(?=p)、(?!p)

### 1.2.1. ^ 和 $ ###

^（脱字符）匹配开头，在多行匹配中匹配行开头。  
$（美元符号）匹配结尾，在多行匹配中匹配行结尾。  
比如我们把字符串的开头和结尾用 “\#” 替换（位置可以替换成字符的！）：

var result = "guxin".replace(/^|$/g, '#');
    console.log(result);
    // => "#guxin#

**多行匹配模式（即有修饰符 m**）时，二者是行的概念，这一点需要我们注意：

var result = "guxin\nguxinxin\nguxinya".replace(/^|$/gm, '#');
    console.log(result);
    /* #guxin# #guxinxin# #guxinya# */

### 1.2.2. \\b 和 \\B ###

\\b 是单词边界，具体就是 \\w 与 \\W 之间的位置，也包括 \\w 与 ^ 之间的位置，和 \\w 与 $ 之间的位置。

var result = "[I] am guxin xi_xixi".replace(/\b/g, '#');
    console.log(result);
    // => "[#I#] #am# #guxin# #xi_xixi#"

\\B 就是 \\b 的反面的意思，非单词边界。例如在字符串中所有位置中，扣掉 \\b，剩下的都是 \\B 的。  
具体说来就是 \\w 与 \\w、 \\W 与 \\W、^ 与 \\W，\\W 与 $ 之间的位置。

var result = "[I] am guxin xi_xixi".replace(/\B/g, '#');
    console.log(result);
    // => "#[I]# a#m g#u#x#i#n x#i#_#x#i#x#i"

### 1.2.3. (?=p) 和 (?!p) ###

(?=p)，其中 p 是一个子模式，即 p 前面的位置，或者说，该位置后面的字符要匹配 p。  
比如 (?=l)，表示 “l” 字符前面的位置，例如

var result = "helloguxin".replace(/(?=guxin)/g, '#');
    console.log(result);
    // => "hello#guxin

而 (?!p) 就是 (?=p) 的反面意思，比如：

//不在guxin前面加,其他之间加
    var result = "helloguxin".replace(/(?!guxin)/g, '#');
    console.log(result);
    // => "#h#e#l#l#og#u#x#i#n#"

## 1.3. 位置的特性 ##

对于位置的理解，我们可以理解成空字符 “”。  
比如 “hello” 字符串等价于如下的形式：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "" + "o" + "";

也等价于：

"hello" == "" + "" + "hello"

因此，把 /^hello $ / 写成 /^^hello$$$/，是没有任何问题的：

var result = /^^hello$$$/.test("hello");
    console.log(result);
    // => true

var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
    console.log(result);
    // => true

也就是说字符之间的位置，可以写成多个。

## 1.4. 相关案例 ##

### 1.4.1. 不匹配任何东西的正则 ###

让你写个正则不匹配任何东西

easy，/.^/

因为此正则要求只有一个字符，但该字符后面是开头，而这样的字符串是不存在的

### 1.4.2 数字的千位分隔符表示法 ###

比如把 “12345678”，变成 “12,345,678”。  
可见是需要把相应的位置替换成 “,”。  
思路是什么呢?

首先弄出最后一个逗号  
使用 (?=\\d\{3\}$) 就可以做到：

var result = "12345678".replace(/(?=\d{3}$)/g, ',')
    console.log(result);
    // => "12345,678

其中，(?=\\d\{3\}$) 匹配 \\d\{3\} $ 前面的位置。而 \\d\{3\}$ 匹配的是目标字符串最后那 3 位数字。

然后弄出所有的逗号  
因为逗号出现的位置，要求后面 3 个数字一组，也就是 \\d\{3\} 至少出现一次。  
此时可以使用量词 +：

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',')
    console.log(result);
    // => "12,345,678"

### 1.4.3. 匹配其余案例 ###

写完正则后，要多验证几个案例，此时我们会发现问题：

var result = "123456789".replace(/(?=(\d{3})+$)/g, ',')
    console.log(result);
    // => ",123,456,789"

因为上面的正则，仅仅表示把从结尾向前数，一但是 3 的倍数，就把其前面的位置替换成逗号。因此才会出  
现这个问题。  
怎么解决呢？我们要求匹配的到这个位置不能是开头。 我们知道匹配开头可以使用 ^，但要求这个位置不是开头怎么办？  
easy，(?!^)，你想到了吗？测试如下：

var regex = /(?!^)(?=(\d{3})+$)/g;
    var result = "12345678".replace(regex, ',')
    console.log(result);
    // => "12,345,678"
    result = "123456789".replace(regex, ',');
    console.log(result);
    // => "123,456,789"

### 1.4.4支持其他形式 ###

如果要把 “12345678 123456789” 替换成 “12,345,678 123,456,789”。  
此时我们需要修改正则，把里面的开头 ^ 和结尾 $，修改成 \\b：

//不匹配单词边界的
    var string = "12345678 123456789",
    regex = /(?!\b)(?=(\d{3})+\b)/g;
    var result = string.replace(regex, ',')
    console.log(result);
    // => "12,345,678 123,456,789

其中 (?!\\b) 怎么理解呢？  
要求当前是一个位置，但不是 \\b 前面的位置，其实 (?!\\b) 说的就是 \\B。 因此最终正则变成了：/\\B(?=(\\d\{3\})+\\b)/g。

### 1.4.5验证密码问题 ###

密码长度 6-12 位，由数字、小写字符和大写字母组成，但必须至少包括 2 种字符。  
此题，如果写成多个正则来判断，比较容易。但要写成一个正则就比较困难。 那么，我们就来挑战一下。看看我们对位置的理解是否深刻。

如果不考虑“但必须至少包括 2 种字符”这一条件。我们可以容易写出：

var regex = /^[0-9A-Za-z]{6,12}$/;

判断是否包含有某一种字符  
假设，要求的必须包含数字，怎么办？此时我们可以使用 (?=.\*\[0-9\]) 来做。 因此正则变成：

var regex = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

同时包含具体两种字符  
比如同时包含数字和小写字母，可以用 (?=.*\[0-9\])(?=.*\[a-z\]) 来做。 因此正则变成：

var regex = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;

**解惑**

上面的正则看起来比较复杂，只要理解了第二步，其余就全部理解了。
    /(?=.*[0-9])^[0-9A-Za-z]{ 6,12}$/
    对于这个正则，我们只需要弄明白 (?=.*[0-9])^ 即可。
    
    分开来看就是 (?=.*[0-9]) 和 ^。 表示开头前面还有个位置（当然也是开头，即同一个位置，想想之前的空字符类比）。
    (?=.*[0-9]) 表示该位置后面的字符匹配 .*[0-9]，即，有任何多个任意字符，后面再跟个数字。
    翻译成大白话，就是接下来的字符，必须包含个数字。

[20201223173433490.png]: /images/20221120/eac66f2da3634e43a6ff5d610cc8cd77.png