@@ -329,3 +329,88 @@ s.trimEnd() // " abc"
329329
330330` matchAll() ` 方法返回一个正则表达式在当前字符串的所有匹配,详见《正则的扩展》的一章。
331331
332+ ## 实例方法:replaceAll()
333+
334+ 历史上,字符串的实例方法` replace() ` 只能替换第一个匹配。
335+
336+ ``` javascript
337+ ' aabbcc' .replace (' b' , ' _' )
338+ // 'aa_bcc'
339+ ```
340+
341+ 上面例子中,` replace() ` 只将第一个` b ` 替换成了下划线。
342+
343+ 如果要替换所有的匹配,不得不使用正则表达式的` g ` 修饰符。
344+
345+ ``` javascript
346+ ' aabbcc' .replace (/ b/ g , ' _' )
347+ // 'aa__cc'
348+ ```
349+
350+ 正则表达式毕竟不是那么方便和直观,[ ES2021] ( https://github.com/tc39/proposal-string-replaceall ) 引入了` replaceAll() ` 方法,可以一次性替换所有匹配。
351+
352+ ``` javascript
353+ ' aabbcc' .replaceAll (' b' , ' _' )
354+ // 'aa__cc'
355+ ```
356+
357+ 它的用法与` replace() ` 相同,返回一个新字符串,不会改变原字符串。
358+
359+ ``` javascript
360+ String .prototype .replaceAll (searchValue, replacement)
361+ ```
362+
363+ 上面代码中,` searchValue ` 是搜索模式,可以是一个字符串,也可以是一个全局的正则表达式(带有` g ` 修饰符)。
364+
365+ 如果` searchValue ` 是一个不带有` g ` 修饰符的正则表达式,` replaceAll() ` 会报错。这一点跟` replace() ` 不同。
366+
367+ ``` javascript
368+ // 不报错
369+ ' aabbcc' .replace (/ b/ , ' _' )
370+
371+ // 报错
372+ ' aabbcc' .replaceAll (/ b/ , ' _' )
373+ ```
374+
375+ 上面例子中,` /b/ ` 不带有` g ` 修饰符,会导致` replaceAll() ` 报错。
376+
377+ ` replaceAll() ` 的第二个参数` replacement ` 是一个字符串,表示替换的文本,其中可以使用一些特殊字符串。
378+
379+ - ` $& ` :匹配的子字符串。
380+ - `` `$` `` :匹配结果前面的文本。
381+ - ` $' ` :匹配结果后面的文本。
382+ - ` $n ` :匹配成功的第` n ` 组内容,` n ` 是从1开始的自然数。
383+ - ` $$ ` :指代美元符号` $ ` 。
384+
385+ ``` javascript
386+ ' abc' .replaceAll (' b' , ' $$' )
387+ // 'a$c'
388+ ```
389+
390+ 上面例子中,` $$ ` 表示替换的文本是单个美元符号` $ ` 。
391+
392+ ` replaceAll() ` 的第二个参数` replacement ` 除了为字符串,也可以是一个函数,该函数的返回值将替换掉第一个参数` searchValue ` 匹配的文本。
393+
394+ ``` javascript
395+ ' aabbcc' .replaceAll (' b' , () => ' _' )
396+ // 'aa__cc'
397+ ```
398+
399+ 上面例子中,` replaceAll() ` 的第二个参数是一个函数,该函数的返回值会替换掉所有` b ` 的匹配。
400+
401+ 这个替换函数可以接受多个参数。第一个参数是捕捉到的匹配内容,第二个参数捕捉到是组匹配(有多少个组匹配,就有多少个对应的参数)。此外,最后还可以添加两个参数,倒数第二个参数是捕捉到的内容在整个字符串中的位置,最后一个参数是原字符串。
402+
403+ ``` javascript
404+ const str = ' 123abc456' ;
405+ const regex = / (\d + )([a-z ] + )(\d + )/ g ;
406+
407+ function replacer (match , p1 , p2 , p3 , offset , string ) {
408+ return [p1, p2, p3].join (' - ' );
409+ }
410+
411+ str .replaceAll (regex, replacer)
412+ // 123 - abc - 456
413+ ```
414+
415+ 上面例子中,正则表达式有三个组匹配,所以` replacer() ` 函数的第一个参数` match ` 是捕捉到的匹配内容(即字符串` 123abc456 ` ),后面三个参数` p1 ` 、` p2 ` 、` p3 ` 则依次为三个组匹配。
416+
0 commit comments