正则表达式的相关方法

小鱼儿 2022-11-26 15:55 192阅读 0赞

### 一、正则对象的方法 ###

讨论是否是全局匹配，因为全局匹配，会修改**该正则对象的lastIndex的值**，其他正则实例对象的lastIndex值不被修改，使得下一次用正则方法匹配的时候，从lastIndex的位置开始。

`lastIndex` 是正则表达式的一个**可读可写**的整数型属性，用来指定下一次匹配的起始索引。

<table> 
 <thead> 
  <tr> 
   <th colspan="2"><code>RegExp.lastIndex</code>&nbsp;属性的属性特性：</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>writable</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>enumerable</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>configurable</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

只有正则表达式使用了表示**全局检索的 "`g`" 标志时，该属性才会起作用**。此时应用下面的规则：

*  lastIndex大于等于字符串长度时，`regexp.test` 和 `regexp.exec` 将会匹配失败，然后 `lastIndex` 被设置为 0。除非regexp匹配空字符串。
 *  否则，`lastIndex` 被设置为紧随**最近一次成功匹配的索引值的下一个位置**。下一次匹配会从最新的lastIndex值开始。

**需要注意的是**：某个正则实例对象，对所有传入的字符串生效，尤其注意lastIndex值的变化。

** 1、RegExp.prototype.test()**

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

非全局匹配

var str = "abcabcabc";
    var reg = /b/;
    console.log(reg.test(str), reg.lastIndex) //true 0
    console.log(reg.test(str), reg.lastIndex) //true 0

全局匹配

var str = "abcabcabc";
    var reg = /b/g;
    console.log(reg.test(str), reg.lastIndex)//true 2
    console.log(reg.test(str), reg.lastIndex)//true 5

**2、RegExp.prototype.exec()**

`exec() `方法在一个指定字符串中执行一个搜索匹配。返回一个结果数组或 [`null`][null]。

如果匹配成功，`exec()` 方法返回一个数组（包含额外的属性 **`index` 匹配项的索引值**和 **`input` 输入到正则的字符串，因为该正则对象还可以匹配别的字符串**），并更新正则表达式对象的 [`lastIndex`][lastIndex] 属性。完全匹配成功的文本将作为返回数组的第一项，从第二项起，后续每项都对应正则表达式内捕获括号里匹配成功的文本。

如果匹配失败，`exec()` 方法返回 [`null`][null]，并将 [`lastIndex`][lastIndex] 重置为 0 。

非全局匹配

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

全局匹配

var str = "abcabcabc";
    var reg = /b/g;
    console.log(reg.exec(str), reg.lastIndex) 
    //["b", index: 1, input: "abcabcabc", groups: undefined] 2
    console.log(reg.exec(str), reg.lastIndex) 
    //["b", index: 4, input: "abcabcabc", groups: undefined] 5

**手动修改lastIndex值**

非全局匹配下，修改lastIndex。非全局匹配不受lastIndex值影响，所以不管怎么修改lastIndex值，匹配的还是第一项符合的字段。

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

全局匹配下，受lastIndex值影响，谨慎使用lastIndex值。超出字符串长度，会匹配失败

下面实例，从字符串的index值为3的位置开始匹配

var str = "ab1ab2ab3";
    var reg = /b\d/g;
    reg.lastIndex = 3;
    console.log(reg.exec(str), reg.lastIndex) //["b2", index: 4, input: "ab1ab2ab3", groups: undefined] 6
    console.log(reg.exec(str), reg.lastIndex) //["b3", index: 7, input: "ab1ab2ab3", groups: undefined] 9

### 二、字符串的方法 ###

**1、String.prototype.search()**

字符串去搜索该正则所匹配的片段，返回首次匹配到的索引值，否则返回-1。

如果匹配成功，则 `search()` 返回正则表达式在字符串中首次匹配项的索引;否则，返回 `-1`。

当你想要知道字符串中是否存在某个模式（pattern）时可使用 `search()`，类似于正则表达式的 [`test()`][test] 方法。当要了解更多匹配信息时，可使用 [`match()`][match]（但会更慢一些），该方法类似于正则表达式的 [`exec()`][exec] 方法。

var str = "hey ^$JudE2";
    var re = /[A-Z]/g;
    var re2 = /[\^]/g;
    console.log(str.search(re));  //6
    console.log(str.search(re2)); //4

**2、String.prototype.split()**

拆分字符串为数组，不改变原字符串

（1）不传参数，返回一个长度为1的数组，数组的第一项是该字符串

var str = "abcdef";
    console.log(str.split(), str); //["abcdef"] "abcdef"

（2）接收一个空字符串，会把每个字符拆分出来

var str = "abcdef";
    console.log(str.split(""), str);
    ["a", "b", "c", "d", "e", "f"] "abcdef"

（3）可接受一个字符串或一个正则表达式作为分隔符

字符串2

var str = "ab2cd2ef";
    console.log(str.split("2"), str);//["ab", "cd", "ef"] "ab2cd2ef"

正则表达式

var reg = /\d/;
    var str = "ab2cd2ef";
    console.log(str.split(reg), str); // ["ab", "cd", "ef"] "ab2cd2ef"

（4）可以接受第二个参数，一个整数，限定返回的分割片段数量

var reg = /\d/;
    var str = "abcdef";
    console.log(str.split("",3), str); //["a", "b", "c"] "abcdef"

**3、String.prototype.replace()**

原字符串不会改变。

**特别注意是多次匹配还是匹配一次！**

接收两个参数，模式pattern和替换值replacement，模式可以是字符串片段也可以是正则表达式，替换值可以是字符串或函数，字符串内可以有特殊的$符。

关于替换值是字符串时，字符串内可以是特殊$符：

<table> 
 <tbody> 
  <tr> 
   <td><code>$$</code></td> 
   <td>插入一个 "$"。</td> 
  </tr> 
  <tr> 
   <td><code>$&amp;</code></td> 
   <td>插入匹配的子串。</td> 
  </tr> 
  <tr> 
   <td><code>$`</code></td> 
   <td>插入当前匹配的子串左边的内容。</td> 
  </tr> 
  <tr> 
   <td><code>$'</code></td> 
   <td>插入当前匹配的子串右边的内容。</td> 
  </tr> 
  <tr> 
   <td><code>$<em>n</em></code></td> 
   <td> <p>假如第一个参数是&nbsp;<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/RegExp" rel="nofollow"><code>RegExp</code></a>对象，并且 n 是个小于100的非负整数，那么插入第 n 个括号匹配的字符串。提示：索引是从1开始</p> </td> 
  </tr> 
 </tbody> 
</table>

替换值是**函数，一个用来创建新子字符串的函数，该函数的返回值将作为替换值**。函数参数的意义：

** （函数参数的每项和正则的exec()或非全局匹配的match方法得到的结果类似）**

<table> 
 <tbody> 
  <tr> 
   <td style="width:70px;"><code>match</code></td> 
   <td>匹配的子串。（对应于上述的$&amp;。）</td> 
  </tr> 
  <tr> 
   <td style="width:70px;"><code>p1,p2, ...</code></td> 
   <td> <p>假如replace()方法的第一个参数是一个<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/RegExp" rel="nofollow"><code>RegExp</code></a>&nbsp;对象，则代表第n个括号匹配的字符串。（对应于上述的$1，$2等。）例如，如果是用&nbsp;<code>/(\a+)(\b+)/</code>&nbsp;这个来匹配，<code>p1</code>&nbsp;就是匹配的&nbsp;<code>\a+</code>，<code>p2</code>&nbsp;就是匹配的&nbsp;<code>\b+</code>。</p> </td> 
  </tr> 
  <tr> 
   <td style="width:70px;"><code>index</code></td> 
   <td> <p>匹配到的子字符串在原字符串中的index值。（比如，如果原字符串是&nbsp;<code>'abcd'</code>，匹配到的子字符串是&nbsp;<code>'bc'</code>，那么这个参数将会是 1）</p> </td> 
  </tr> 
  <tr> 
   <td style="width:70px;"><code>string</code></td> 
   <td>被匹配的原字符串。</td> 
  </tr> 
 </tbody> 
</table>

（1）模式是字符串：意味着**字符串仅第一个匹配项会被替换**。只进行一次匹配和替换。

1）模式是字符串，替换值是字符串：

var str = "abacadaebf";
    var replaceStr = str.replace("a","1");
    console.log(replaceStr); //1bacadaebf

2）模式是字符串，替换值是字符串，内有特殊$符：

var str = "abacadaebf";
    var replaceStr = str.replace("a","$'1");
    console.log(replaceStr); //bacadaebf1bacadaebf

3）模式是字符串，替换值是函数：

我们知道接收的第二个参数如果是函数， 进行了多少次匹配替换，函数就会执行对应的次数。

模式是字符串仅会进行一次匹配，所以替换值的函数也只会执行一次。

我们看下打印结果：不是正则表达式，函数没有p1 p2等于子表达式对应的值。

var str = "abacadaebf";
    var replaceStr = str.replace("a",function(){
        console.log(arguments);//["a", 0, "abacadaebf", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    });

（2） 模式是正则表达式，如果是全局匹配，可能会进行多次匹配和替换；如果非全局匹配，也只能匹配到一项

非全局匹配：仅会匹配一项，仅替换第一个匹配项

var str = "abacadaebf";
    var reg = /(a)/;
    var replaceStr = str.replace(reg,"@"); 
    console.log(replaceStr);//@bacadaebf

全局匹配：

var str = "abacadaebf";
    var reg = /(a)/g;
    var replaceStr = str.replace(reg,"@");
    console.log(replaceStr);  // @b@c@d@ebf

如果替换值是函数，匹配到多少次，函数就会执行对应的次数，注意每次执行时的参数。

var str = "abacadaebf";
    var reg = /(a)[bcde]/g;
    var replaceStr = str.replace(reg,function(){
        console.log(arguments);
        return "k";
    });
    console.log(replaceStr);

结果：

Arguments(4) ["ab", "a", 0, "abacadaebf", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    Arguments(4) ["ac", "a", 2, "abacadaebf", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    Arguments(4) ["ad", "a", 4, "abacadaebf", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    Arguments(4) ["ae", "a", 6, "abacadaebf", callee: ƒ, Symbol(Symbol.iterator): ƒ]
    kkkkbf

注意：匹配子串match中，

** 例题：**

（1）字符串的replace方法可以替换第一个匹配项，或所有的匹配项，那么匹配任意匹配项时，该如何实现呢？

var str = "abacadaebf";
    var reg = /(a)[bcde]/g;
    //替换值是函数时，要自己判断有几个子表达式，如果判断不清楚，就打印arguments查看
    var replaceStr = str.replace(reg,function(match, p1, index, str){
        if(index == 4){//index是原字符串中该项的index值，自己判断第几个匹配项对应的index值。
            //比如index为4，是第三个匹配项
        }
        return index;
    });
    console.log(replaceStr); //0246bf

（2）交换字符串中的两个单词

var str = "hello world";
    var reg = /(\w+)\s(\w+)/g
    console.log(str.replace(reg, "$2 $1")); // world hello

如果原字符串较长：

var str = "This is a string hello world";
    var reg = /(hello)\s(world)/g
    console.log(str.replace(reg, "$2 $1"));
    
    This is a string world hello

如果将a全部替换为b，将b全部替换为a：

或 | ，p1 或 p2可能为undefined，什么原因呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

**4、String.prototype.match()**

如果是全局匹配，返回一个包含所有匹配项的数组；如果是非全局匹配，返回的结果和reg.exec()的结果相同；如果没有匹配到，返回null。

全局匹配：

var str = "a1b1c1d1";
    var reg = /[a-z]/g;
    console.log(str.match(reg)); //["a", "b", "c", "d"]

非全局匹配：

var str = "a1b1c1d1";
    var reg = /[a-z]/;
    console.log(str.match(reg)); //["a", index: 0, input: "a1b1c1d1", groups: undefined]

未匹配到：

var str = "a1b1c1d1";
    var reg = /m/;
    console.log(str.match(reg)); //null

[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null
[lastIndex]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/lastIndex
[test]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
[match]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/match
[exec]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20221124/0213b55a53964f36a453c26b4ccc2a70.png