JavaScript中的RegExp（正则）对象

偏执的太偏执、 2022-02-05 11:27 291阅读 0赞

RegExp是正则表达式（regular expression）的简写，正则表达式是表达文本结构的一种方法。  
正则表达式对前端来说很重要，常见的应用场景为`验证`、`替换`、`提取`。最典型的应用场景是在页面中对用户的输入进行验证，涉及到系统安全和用户体验，这些非常重要。

# 静态属性 #

JavaScript中，RegExp是与宿主无关的由ECMAScript提供的内置对象。按惯例先来说RegExp对象的自有属性，现在浏览器中查看一下RegExp对象的静态属性。  
![在这里插入图片描述][20190506131505318.jpg]

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>简写</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$1…$9</td> 
   <td></td> 
   <td>返回最近一次正则表达式搜索中某个子表达式匹配的文本。</td> 
  </tr> 
  <tr> 
   <td>input</td> 
   <td>$_</td> 
   <td>全局属性返回最近一次正则表达式搜索中用于执行搜索的整个字符串。</td> 
  </tr> 
  <tr> 
   <td>lastMatch</td> 
   <td>$&amp;</td> 
   <td>全局属性返回最近一次正则表达式搜索中最后一个匹配的文本。</td> 
  </tr> 
  <tr> 
   <td>lastParen</td> 
   <td>$+</td> 
   <td>全局属性返回最近一次正则表达式搜索中最后一个子表达式匹配的文本。</td> 
  </tr> 
  <tr> 
   <td>leftContext</td> 
   <td>$`</td> 
   <td>全局属性返回最近一次正则表达式搜索中被搜索字符串中最后一个匹配之前的字符串。</td> 
  </tr> 
  <tr> 
   <td>rightContext</td> 
   <td>$’</td> 
   <td>全局属性返回最近一次正则表达式搜索中被搜索字符串中最后一个匹配之后的字符串。</td> 
  </tr> 
 </tbody> 
</table>

###### input属性 ######

简写为$\_,返回当前所作用的字符串，初始值为空字符串""。

###### lastIndex属性 ######

是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数，常被作为继续搜索时的起始位置，初始值为1，表示从起始位置开始搜索，每次成功匹配时，lastIndex属性值都会随之改变。

###### lastMatch属性 ######

是当前表达式模式的最后一个匹配字符串，可以简写为$&。其初始值为空字符串""。在每次成功匹配时，lastMatch属性值都会随之改变。

###### lastParen属性 ######

如果表达式模式中有括起来的子匹配，是当前表达式模式中最后的子匹配所匹配到的子字符串，可以简写为$+。其初始值为空字符串""。每次成功匹配时，lastParen属性值都会随之改变。

###### leftContext属性 ######

是当前表达式模式最后一个匹配字符串左边的所有内容，可以简写为$\`（其中“’”为键盘上“Esc”下边的反单引号）。初始值为空字符串""。每次成功匹配时，其属性值都会随之改变。

###### rightContext属性 ######

是当前表达式模式最后一个匹配字符串右边的所有内容，可以简写为$’。初始值为空字符串""。每次成功匹配时，其属性值都会随之改变。

###### $1…$9属性 ######

这些属性是只读的。如果表达式模式中有括起来的子匹配，$1…$9属性值分别是第1个到第9个子匹配所捕获到的内容。如果有超过9个以上的子匹配，$1…$9属性分别对应最后的9个子匹配。在一个表达式模式中，可以指定任意多个带括号的子匹配，但RegExp对象只能存储最后的9个子匹配的结果。在RegExp实例对象的一些方法所返回的结果数组中，可以获得所有圆括号内的子匹配结果。

# RegExp对象实例 #

### 实例属性 ###

![在这里插入图片描述][20210407101007979.png]

RegExp的实例有几个只读的属性，包括：

*  global属性：是否为全局匹配,对应表达式的g标志，默认为false
 *  ignoreCase属性：是否忽略大小写，对应表达式的i标志，默认值为false。
 *  multiLine属性：是否为多行匹配（遇到换行后不停止匹配）,对应表达式的m标志，默认值为false。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
 *  source属性：正则表达式式的源文本

### 实例方法 ###

RegExp 对象的方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>RegExp()</td> 
   <td>构造一个新的正则表达式对象。</td> 
  </tr> 
  <tr> 
   <td>compile()</td> 
   <td>更改正则表达式模式，并将其编译为内部格式，从而执行得更快。</td> 
  </tr> 
  <tr> 
   <td>exec()</td> 
   <td>使用正则表达式模式在指定字符串中进行匹配查找，返回一个<code>类数组对象</code>。</td> 
  </tr> 
  <tr> 
   <td>test()</td> 
   <td>测试正则表达式模式在被搜索的字符串中是否存在对应的匹配。</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>返回正则表达式模式的字符串值(包含标志)。</td> 
  </tr> 
 </tbody> 
</table>

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

1.  创建 RegExp 对象的语法：
    
        new RegExp(pattern, attributes);
2.  字面量语法
    
        /pattern/attributes

*  参数:  
    pattern 是一个字符串或正则表达式，语法见[JavaScript 正则表达式语法][JavaScript]

attributes 是一个可选的字符串，包含属性 “g”、“i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。

*  返回值:  
    一个RegExp 对象实例，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
    
    如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

#### test() ####

用来验证某个字符串是否与正则表达式匹配

*  参数：一个字符串
 *  返回值： 匹配就返回true，否则返回false  
    ![在这里插入图片描述][20210407103015582.png]

#### exec() ####

用于检索字符串中的正则表达式的匹配

*  参数：一个字符串
 *  返回值： 匹配成功，返回一个包含匹配结果的数组；否则，返回 null

实际上exec()方法匹配成功返回的是一个类数组对象，属性包括：

*  0-n个元素: 第 0个元素是与正则表达式相匹配的文本，第 n个元素是正则表达式的第 n 个子表达式相匹配的文本
 *  length: 匹配结果的数组长度
 *  index: 匹配文本的第一个字符的下标位置。
 *  input: 存放被检索的原型字符串，即参数自身
 *  groups: 可以为正则表达式的分组进行命名，groups存放每个命名分组的名称以及它们匹配到的值  
    命名方法见下图：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]  
    注意：如果正则表达式是全局匹配，exec方法比较复杂，执行exec方法，正则对象的lastIndex属性会被设置成字符串被下次检索的起点索引，如下图中执行第一次exec方法后，前上个字符已经被匹配过了，所以lastIndex被设置为3  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]  
    另外,如果正则对象用exec方法对一个字符串进行检索，但没有令lastIndex为0的情况下，无法去检索另一个字符串  
    ![在这里插入图片描述][20210408130708533.png]  
    这个时候，在执行检索一个新字符串时可以手动设置reg.lastIndex=0

### RegExp对象的扩展知识 ###

RegExp对象是用来处理文本的，相对的，String对象中有一些方法与RegExp对象相关，以下方法都可以字符串或正则表达式作为参数。

### match() ###

match(regexp) 检查一个字符串是否匹配一个正则表达式，String对象的match方法和RegExp对象的exec方法功能上相似

*  参数：一个正则表达式,如果是字符串，match方法内部会隐式的调用 new RegExp() 将其转换成一个正则对象实例
 *  返回值：匹配成功则返回一个数组，失败返回null  
    非全局匹配: 返回一个数组(类数组对象), 属性与exec方法一样  
    全局匹配: 返回一个数组，捕获的若干结果在数组中依次排列。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]

### search(regexp) ###

执行一个正则表达式匹配查找,找出首次匹配项的索引,作用和String 对象indexOf()相似

*  参数：一个正则表达式,与match一样，如果传入一个非正则表达式，它会隐式调用 new RegExp() 将其转换成一个正则实例。
 *  返回值：只能返回首次匹配的位置，`全局匹配对它无效`; 如果匹配失败，返回 -1 。  
    ![在这里插入图片描述][20210408131426370.png]

### replace() ###

stringObject.replace(regexp/substr,replacement)

![在这里插入图片描述][20210409130646141.png]  
查找并替换,将给定字符串替换匹配结果，返回替换后的文本。

*  参数：  
    1、第一个参数是要匹配的字符串或者正则表达式。  
    2、replacement是要替换的字符串或者函数  
    replacement是字符串，其中的 $ 字符具有特定的含义  
    ![在这里插入图片描述][20210409130005871.png]
    
    <table> 
     <thead> 
      <tr> 
       <th>字符</th> 
       <th>替换文本</th> 
      </tr> 
     </thead> 
     <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>
    
    replacement是个函数另外replacement也可以是个函数。第一个参数是匹配的字符串,接下来的参数是与子表达式匹配的字符串,对应$1,$2…,接下来的参数是一个整数(在字符串中出现的位置)，最后一个参数是 stringObject 本身。

const reg = /\b([a-z]+)_([a-z])([a-z]+)\b/g
    const str = 'front user_id user_name end'
    
    const str2 = str.replace(reg, function (...match) { 
      console.log(match)
      return match[1]+match[2].toUpperCase()+match[3]
    })

![在这里插入图片描述][20210409132125349.png]

*  返回值：替换后的文本

### split() ###

split(separator,howmany) 根据传入的分隔符切割源文本。返回一个由被切割单元组成的数组。

*  参数  
    1、字符串或者正则表达式，作为分隔符  
    2、限制返回数组的最大长度，可选，如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
 *  返回值  
    一个由被切割单元组成的数组（不包含分隔符本身）  
    ![在这里插入图片描述][20210409132639905.png]

[20190506131505318.jpg]: /images/20220205/ca76d9b919ef4995b8744c0c6933cc4d.png
[20210407101007979.png]: /images/20220205/543166ac0ab0444cb4335ad9bed97efe.png
[JavaScript]: https://blog.csdn.net/dreamingbaobei3/article/details/89883446
[20210407103015582.png]: /images/20220205/6e0dc625ede14c64987e3b88c8b309bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20220205/b3f19906e7b943edbcbeb63ade8a9160.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 1]: /images/20220205/9c819e9d7e9b4fcdb15bfae267286b1a.png
[20210408130708533.png]: /images/20220205/b6dcf418031f430fb7e8a09deb7ac2ee.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70 2]: /images/20220205/dd6e81658d194a859eac1109473867fe.png
[20210408131426370.png]: /images/20220205/17f650f97a964f60bdb20657b2195d3b.png
[20210409130646141.png]: /images/20220205/20fce9ce8ce54fd7bae3feabade4685f.png
[20210409130005871.png]: /images/20220205/33651c48bf804109aa9ee1d1da791497.png
[20210409132125349.png]: /images/20220205/a4d7b16bb93b435b8a74ea727079832e.png
[20210409132639905.png]: /images/20220205/45ecfc4689f04866ab1b3c50f3122fed.png