Skip to content

Commit a8b23e2

Browse files
committed
docs(string): add replaceAll()
1 parent 6d19921 commit a8b23e2

File tree

1 file changed

+85
-0
lines changed

1 file changed

+85
-0
lines changed

docs/string-methods.md

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)