ECMAScript 6（7）正则的扩展

落日映苍穹つ 2021-09-19 13:24 163阅读 0赞

**目录**

正则的扩展

1.  变更修饰符

1.1  修饰符

1.2  查看修饰符

1.3  变更修饰符

2.  新修饰符

2.1、修饰符u

2.2  点字符

2.3  修饰符y

3.  正则表达式属性

3.1  sticky属性

3.2  flags属性

4.  正则表达式方法 (ES5)

字符串方法 search()、replace()、match()、split()

search()

replace()

match()

split()

RegExp对象方法 exec()、test()

exec()

test()

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

# 正则的扩展 #

> 1、构造函数可以通过第二个参数添加正则表达式的修饰符了；  
> 2、添加了关于utf16字符、粘性匹配的正则表达式修饰符；  
> 3、粘性匹配指：用一个正则表达式连续对一个字符串进行匹配，每次匹配的起始位置是上一次的结束位置；  
> 4、可以通过属性查看正则的内容（sticky）和修饰符（flags）了；

**基础戳 => [正则表达式基础][Link 1]**

## 1.  变更修饰符 ##

## 1.1  修饰符 ##

<table> 
 <thead> 
  <tr> 
   <th style="width:135px;">修饰符</th> 
   <th style="width:163px;">效果</th> 
   <th style="width:501px;">备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:135px;">g</td> 
   <td style="width:163px;">全局搜索</td> 
   <td style="width:501px;">全局匹配</td> 
  </tr> 
  <tr> 
   <td style="width:135px;">i</td> 
   <td style="width:163px;">不区分大小写搜索</td> 
   <td style="width:501px;">不区分大小写</td> 
  </tr> 
  <tr> 
   <td style="width:135px;">m</td> 
   <td style="width:163px;">多行搜索</td> 
   <td style="width:501px;">多行匹配模式，^匹配一行的开头和字符串的开头，$匹配行的结束和字符串的结束</td> 
  </tr> 
 </tbody> 
</table>

### 1.2  查看修饰符 ###

ES6中可以查看修饰符

语法 :

正则表达式.flags

示例代码 :

/\d/g.flags;   //g

### 1.3  变更修饰符 ###

var reg = /\w/g;
    var newReg = new RegExp(reg, "i");
    newReg;      //  /\w/i

## 2.  新修饰符 ##

### 2.1、修饰符u ###

> 1.  修饰符u用来正确处理大于`\uFFFF`的 Unicode 字符。也就是说，会正确处理四个字节的 UTF-16 编码。

对于码点大于\\uFFFF的字符，普通的正则表达式是无法匹配到的，例如’\\uD83D\\uDC2A’会被认为是2个字符，而不是一个字符（这个字符是一个小马）；

而加了修饰符u后，就可以正确的匹配到他了；

/^\uD83D/u.test('\uD83D\uDC2A') // false
    /^\uD83D/.test('\uD83D\uDC2A') // true

ES6 新增了使用大括号表示 Unicode 字符，**这种表示法在正则表达式中必须加上`u`修饰符，才能识别当中的大括号**，否则会被解读为量词。

/\u{61}/.test('a') // false
    /\u{61}/u.test('a') // true
    /\u{20BB7}/u.test('?') // true

上面代码表示，如果不加`u`修饰符，正则表达式无法识别`\u{61}`这种表示法，只会认为这匹配 61 个连续的`u`。

**使用`u`修饰符后，所有量词都会正确识别码点大于`0xFFFF`的 Unicode 字符。**

不过换句话说，大部分码点大于0xFFFF字符的，都不是中文的常见字符。所以我认为最重要的是通过修饰符u来查看字符串的实际长度。

function codePointLength(text) {  //获取字符串的长度，参数是目标字符串
      var result = text.match(/[\s\S]/gu);
      return result ? result.length : 0;
    }
    
    codePointLength('\uD83D\uDC2A');    //1

###  2.2  **点字符** ###

> 1.  点（`.`）字符在正则表达式中，含义是除了换行符以外的任意单个字符。
> 
> 2.  对于码点大于`0xFFFF`的 Unicode 字符，点字符不能识别，必须加上`u`修饰符。

var s = '?';
    
    /^.$/.test(s) // false
    /^.$/u.test(s) // true

上面代码表示，如果不添加`u`修饰符，正则表达式就会认为字符串为两个字符，从而匹配失败。

###  2.3  修饰符y ###

> 1.  `y`修饰符，叫做“粘连”（sticky）修饰符。
> 
> 2.  若字符串对同一个表达式的多次匹配，会从上一次匹配成功的位置开始.

var str = 'abcdef';
    var reg = /\w/y;
    console.log(str.match(reg));    //["a"]
    console.log(reg.lastIndex);     //1
    console.log(str.match(reg));    //["b"]
    console.log(reg.lastIndex);     //2

## 3.  正则表达式属性  ##

### 3.1  sticky属性 ###

简单来说, 就是检查是否设置了y修饰符

/d/y.sticky // true
    /d/.sticky  // false

### 3.2  flags属性 ###

获取正则表达式的修饰符.

/abc/g.flags;    //"g"
    /abc/gy.flags;    //"qy"

## 4.  正则表达式方法 (ES5) ##

### 字符串方法 search()、replace()、match()、split() ###

### search() ###

> 用于检索指定字符串的子字符串，并返回子字符串的起始位置。

语法：

str.search(regexp);

示例1 :   参数是正则

'hello'.search(/l/i)  //2

示例2 :  参数是字符串

'hello'.search('l')  //2

### replace() ###

> 用在字符串中的一些字符替换另一些字符，或替换与正则表达式匹配的字符串。

语法 :

str.replace(regexp)

示例 :

'hello ES6'.replace(/ES6/i, 'world');  //hello world
    'hello ES6'.replace('ES6', 'world');   //hello world

###  match() ###

> 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配，并以**数组形式返回匹配结果**。

语法 :

str.match(regexp);

示例 :

var str = 'Is this all there is?';
    str.match(/is/gi);   //["Is", "is", "is"]

### split() ###

> 把一个字符串分割成字符串数组

语法 :

str.split(separator,limit),separator为字符串或正则表达式，limit指定返回数组的最大长度。

示例 :

var str = 'How are you doing today?'
    
    console.log(str.split());      //["How are you doing today?"]
    
    console.log(str.split(''));    //["H", "o", "w", " ", "a", "r", "e", " ", "y", "o", "u", " ", "d", "o", "i", "n", "g", " ", "t", "o", "d", "a", "y", "?"]
    
    console.log(str.split(' ',3)); //["How", "are", "you"]
    
    console.log(str.split('o'));   //["H", "w are y", "u d", "ing t", "day?"]

## RegExp对象方法 exec()、test() ##

### exec() ###

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

语法 :

regexObj.exec(str)

示例 :

var re = /l/ig;
    var result = re.exec('hello world');  //[l]

### test()  ###

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

语法 :

regexObj.test(str)

示例 :

/h/i.test('hello');   // true
    /w/i.test('hello');   // false

[Link 1]: https://blog.csdn.net/jiandan1127/article/details/78380278
[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null