JavaScript正则表达式、传递字符串生成正则表达式

小灰灰 2023-02-18 03:15 1阅读 0赞

# 正则表达式的两种创建方式 #

**（1）字面量**

**（2）RegExp构造函数**

构造函数内传入字符串，

**注意：双\\  代表 \\，****第二个参数是匹配标志**

var reg = new RegExp("[a]\\w(\\d)\\1");
    console.log(reg);

# 字符的用法 #

### 1、反斜杠 \\ ###

**（1）\\w \\d \\s \\b**

**\\w**：单字字符 字母数字下划线  ===  \[a-Z0-9\_\]     **\\W：** 非单字字符 等价于 \[^A-Za-z0-9\_\]

**是否发现：**exec方法的执行结果有点像Generator对象，exec方法下面会具体的探讨

var str = "aB1_@";
    var reg = /\w/g
    console.log(reg.exec(str))//["a", index: 0, input: "aB1_@", groups: undefined]
    console.log(reg.exec(str))//["B", index: 1, input: "aB1_@", groups: undefined]
    console.log(reg.exec(str))//["1", index: 2, input: "aB1_@", groups: undefined]
    console.log(reg.exec(str))//["1", index: 2, input: "aB1_@", groups: undefined]
    console.log(reg.exec(str))//null

** \\d**： 数字 === \[0-9\]    **\\D：** 非数字  === \[^0-9\]

**提醒：**此处的数字，必须提醒一下，数字是指字符串中的数字。

正则表达式的方法可以传入字符串或数字，其实会把数字转为字符串；但是字符串的方法，必须有字符串进行调用。

正则表达式匹配的是字符串中的字符、数字、符号等。

var str = "123" || 123;
    var reg = /\d+/;
    console.log(reg.exec(str));//["123", index: 0, input: "123", groups: undefined]

**\\s：** 空白字符  包括：空格、\\f换页、**\\n换行**、**\\r回车**、\\t水平制表符、\\v垂直制表符   **\\S：** 非空白字符

var str = "1 a";
    var reg = /\d\s\w/;
    console.log(reg.exec(str));//["1 a", index: 0, input: "1 a", groups: undefined]

**注意：**除了空格外，其他几个都是通过\\n\\f\\r\\t\\v这种写法才可以在代码中表现出来。

var str = "1\na";
    var reg = /\d\s\w/;
    console.log(reg.exec(str));//["1↵a", index: 0, input: "1↵a", groups: undefined]

**\\b：** 单词边界  **\\B：** 非单词边界

**注意：**单词编辑\\b，要么修饰前面的词，要么修饰后面的词。

比如下面例子：\\d数字后面是有边界的；\\s的前面是有边界的。

var str = "1 a";
    var reg = /\d\b\b\s\w/;
    console.log(reg.exec(str));//["1 a", index: 0, input: "1 a", groups: undefined]

**（2）转义字符（Escape）**

所有的特殊字符，想要匹配到他们，都需要通过反斜杠进行转义。等等

\ * ^ $ ! ? . + ( ) [ ] {  } |

### ** （3）子表达式** ###

捕获括号，匹配括号内容，并记住匹配项。可以通过子表达式代替匹配到的内容。

var str = "12123";
    var reg = /(\d)(\d)\1\2/
    console.log(reg.exec(str))//["1212", "1", "2", index: 0, input: "12123", groups: undefined]

特别注意：子表达式代表的是匹配到的内容

重点是捕获括号，下面会对捕获括号进行探讨

括号内可以是或语句：也是子表达式

var str = "12112";
    var reg = /(\d|\w)(\d)(\d)\1\2/
    console.log(reg.exec(str))//["12112", "1", "2", "1", index: 0, input: "12112", groups: undefined]

子表达式配到到的不止一个字符，可以是多个字符，作为一个子表达式

var str = "12112";
    var reg = /(\d\d|\w\w)(\d)\1/
    console.log(reg.exec(str))//["12112", "12", "1", index: 0, input: "12112", groups: undefined]

如此看来，只有特定的括号才是非捕获，而一般的都是捕获，可以使用子表达式

### 2、中括号 \[  \] ###

中括号\[ \]内可以设置匹配哪些字符中的一个。

[abc]    匹配abc其中的一个字符
    [a-z]    匹配a-z其中的一个字符
    [^a-z]   匹配非a-z的其中一个字符

** \[点\] 匹配点**

var str = "3.1415926";
    var reg = /[.]/;
    console.log(reg.exec(str)); //[".", index: 1, input: "3.1415926", groups: undefined]

** \[$\] 匹配$**

var str = "100,000$";
    var reg = /[$]/;
    console.log(reg.exec(str)); //["$", index: 7, input: "100,000$", groups: undefined]

**\[ \] 中的特殊字符，需要进行转义**

比如：匹配A到z 和 空格以及符号-^

let reg = /[A-z \-\^]/g

###  3、大括号\{ \}、量词、非贪婪匹配 ###

\*  0个或多个

\+  1个或多个

?  0个或1个

\{0，\}  0个或多个

\{2,3\} 2个或三个

\{2\}  2个

量词后面跟？采用非贪婪匹配模式

下面实例实现拆分字符串成为数组：

var str = "1234";
    var reg = /\d{1,4}?/g
    console.log(str.match(reg));
    
    ["1", "2", "3", "4"]

var str = "1234";
    var reg = /\d+?/g
    console.log(str.match(reg)); //["1", "2", "3", "4"]

### 4、其他特殊字符 ###

**（1）.**    匹配除了\\n换行以外的所有字符；如果匹配模式是**s**，那么 **.** 匹配所有的字符

var str = "1a\!@#\$%";
    var reg = /.+/g
    console.log(reg.exec(str))//["1a!@#$%", index: 0, input: "1a!@#$%", groups: undefined]

匹配所有字符，包括换行\\n

var str = "1a\!@\n#\$%";
    var reg = /.+/gs
    console.log(reg.exec(str))//["1a!@↵#$%", index: 0, input: "1a!@↵#$%", groups: undefined]

**（2）\* **  匹配前一个表达式 0 次或多次。等价于 `{0,}`。

**（3）^**  匹配以什么开头的，如果在\[^ \]中，标示**非。正则匹配好像只有此处可以标示“非”和非捕获括号中x(?!y)、(?<!y)x标示非。**

以下实例：全局匹配，寻找以数字开始的\\d

var str = "1a2";
    var reg = /^\d/gs
    console.log(reg.exec(str))//["1", index: 0, input: "1a2", groups: undefined]

以下匹配：全局匹配，寻找一个非数字的字符

var str = "1a2";
    var reg = /[^\d]/g
    console.log(reg.exec(str))//["a", index: 1, input: "1a2", groups: undefined]

**（4）$**  匹配以什么结尾；在正则表达式的替换replace方法中，而在换环节，则要使用像 `$1`、`$2`、...、`$n` 这样的语法，`$&` 表示整个用于匹配的原字符串。

用法1：以什么结尾，以下实例：全局匹配，寻找以数字的结尾的\\d

var str = "1a2";
    var reg = /\d$/g
    console.log(reg.exec(str))//["2", index: 2, input: "1a2", groups: undefined]

用法2： replace方法中，以下的含义：

<table> 
 <tbody> 
  <tr> 
   <td>$1、$2、...、$99</td> 
   <td>与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。</td> 
  </tr> 
  <tr> 
   <td>$&amp;</td> 
   <td>与 regexp 相匹配的子串。</td> 
  </tr> 
  <tr> 
   <td>$`</td> 
   <td>位于匹配子串左侧的文本。</td> 
  </tr> 
  <tr> 
   <td>$'</td> 
   <td>位于匹配子串右侧的文本。</td> 
  </tr> 
  <tr> 
   <td>$$</td> 
   <td>直接量符号。</td> 
  </tr> 
 </tbody> 
</table>

**（5）|   或**

或在正则表达式中的优先级最低！下面会讨论优先级

**会将 或 | 左右两侧分隔开，因为或|的优先级最低，所以或|左侧的先结合，然后或|右侧的再结合**

比如：下面代码，匹配的是f或者mood

var reg = /f|mood/

在jquery源码中，**表示空字符的三种方式，以多个空字符开头或者以多个空字符结尾！**

var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

### 非捕获括号 ###

(?:x)  匹配 'x' 但是不记住匹配项

**切记子表达式\\1代表匹配到的内容，而不是\\d**

var str = "1a2335";
    var reg = /(?:\d)(\d)\1/g
    var result = str.match(reg)
    console.log(result);   //["233"]

(?=y)  后面是y

var str = "1a2335";
    var reg = /\d(?=33)/g
    var result = str.match(reg)
    console.log(result);      //["2"]

(?<=y)  前面是y

var str = "1a2335";
    var reg = /(?<=1a)\d/g
    var result = str.match(reg)
    console.log(result);  //["2"]

(?!y)   后面不是y

var str = "1a2335";
    var reg = /\d(?!a)/g
    var result = str.match(reg)
    console.log(result);  //["2", "3", "3", "5"]

(?<!y) 前面不是y

var str = "1a2335";
    var reg = /(?<!a)\d/g
    var result = str.match(reg)
    console.log(result);   //["1", "3", "3", "5"]

**总结**：都是**用?开头**， **是=**，**不是！**，**区分前面：？后面跟<**

### 优先级 ###

**正则表达式从左到右进行计算，并遵循优先级顺序，这与算术表达式非常类似。**

**相同优先级的从左到右进行运算，不同优先级的运算先高后低。**

下表从最高到最低说明了各种正则表达式运算符的优先级顺序：

<table> 
 <tbody> 
  <tr> 
   <th>运算符</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>\</td> 
   <td>转义符</td> 
  </tr> 
  <tr> 
   <td>(), (?:), (?=), []</td> 
   <td>圆括号和方括号</td> 
  </tr> 
  <tr> 
   <td>*, +, ?, {n}, {n,}, {n,m}</td> 
   <td>限定符</td> 
  </tr> 
  <tr> 
   <td>^, $, 任何字符</td> 
   <td>定位点和序列（即：位置和顺序）</td> 
  </tr> 
  <tr> 
   <td>|</td> 
   <td>替换，"或"操作<br> 字符具有高于替换运算符的优先级，使得"m|food"匹配"m"或"food"。若要匹配"mood"或"food"，请使用括号创建子表达式，从而产生"(m|f)ood"。</td> 
  </tr> 
 </tbody> 
</table>

** 对优先级的理解：**

（1）\\的优先级最高

（2）() (?:) (?=) \[\] 的优先级

(?:)代表非捕获，不管后面跟上面内容

var reg = /(?:a|b)/

### 相关方法 ###

![20200811192404636.png][]

**正则表达式两个方法：**

**（1）test方法**

`test()` 方法执行一个检索，**用来查看正则表达式与指定的字符串是否匹配**。返回 `true` 或 `false`。

**（2）exec方法**

在设置了 [`global`][global] 或 [`sticky`][sticky] 标志位的情况下（如 `/foo/g` or `/foo/y`），JavaScript [`RegExp`][RegExp] 对象是**有状态**的。他们会将上次成功匹配后的位置记录在 [`lastIndex`][lastIndex] 属性中。使用此特性，`exec()` 可用来对单个字符串中的多次匹配结果进行逐条的遍历（包括捕获到的匹配），而相比之下， [`String.prototype.match()`][String.prototype.match] 只会返回匹配到的结果。

如果你只是为了判断是否匹配（true或 false），可以使用 [`RegExp.test()`][RegExp.test] 方法，或者 [`String.search()`][String.search] 方法。

**非全局匹配**，reg.lastIndex一直是0，所以匹配的结果一直都是第一项的结果

var str = "12345";
    var reg = /\d/;
    console.log(reg.exec(str), reg.lastIndex)
    console.log(reg.exec(str), reg.lastIndex)
    
    ["1", index: 0, input: "12345", groups: undefined] 0

** 全局匹配，**每次匹配后，会记录lastIndex的值，从而每次执行的结果，是下一个符合条件的匹配结果

### 根据该特性，实现一个简单的generator函数 ###

### 重要：传入字符串生成正则表达式 ###

> 很多时候想传入一个字符串，来生成对应的正则表达式，那么要怎么做呢？
> 
> 使用正则表达式构造函数RegExg来创建

比如：匹配数字

let str = '^\d+$'
    let reg1 = new RegExp(str)
    let reg2 = new RegExp(str, 'g')
    console.log(reg1) // /^d+$/
    console.log(reg2) // /^d+$/g

需要注意的是，当有转义字符的情况下，需要添加 \\ 避免转义，详情可参考字符串的转义字符

比如：想要匹配\\和t，即\\t

let str = '\\t'
    let reg1 = new RegExp(str)
    console.log(reg1) // /\t/

[20200811192404636.png]: https://img-blog.csdnimg.cn/20200811192404636.png
[global]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/global
[sticky]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/sticky
[RegExp]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/RegExp
[lastIndex]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
[String.prototype.match]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match
[RegExp.test]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
[String.search]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/search