String.prototype.replaceAll 替换字符串新方法

原始方法

使用replace()方法后，我们常见的一个问题就是replace()不能替换所有指定的字符串。因为它仅替换第一次出现的子字符串。

'abbc'.replace('b', '_');
// 输出则是： "a_bc"

'😃😃😃😟😟😃😃'.replace('😃', '🤪')
// 输出：🤪😃😃😟😟😃😃

我们可以看到仅替换了第一个字符串。那么，对于开发人员通常会使用带有global（g）标志的正则表达式进行处理。

'😃😃😃😟😟😃😃'.replace(/😃/g, '🤪')
// 输出："🤪🤪🤪😟😟🤪🤪"

对于前端开发人员而言，这是一种方法，但若复杂一点，很容出错，也比较麻烦。

另外一种方法就是使用stringObject.split(separator,howmany)结合arrayObject.join(separator)方法处理。

// 如：将中间的加号“+”替换为空。
's=a+b+c'.split('+').join(' ');
// 则输出："s=a b c"

'😃😃😃😟😟😃😃'.split('😃').join('🤪')
"🤪🤪🤪😟😟🤪🤪"

看上去也还不错，但总感觉别扭，拆分后又合并连接起来。

接下来，我们了解下新方法。

String.prototype.replaceAll 新方法

新方法replaceAll()可以解决上面所述问题，字面意思我们也可以理解，并提供了一种简单的机制来执行全局子字符串替换。

'😃😃😃😟😟😃😃'.replaceAll('😃', '🤪')
// 输出："🤪🤪🤪😟😟🤪🤪"

's=a+b+c'.replaceAll('+', ' ');
// => "s=a b c"

为了与现有API保持一致，其String.prototype.replaceAll(searchValue, replacement)处理方式与String.prototype.replace(searchValue, replacement)完全相同。

因此，String.prototype.replaceAll通过提供对全局字符串替换，而无需使用正则表达式或其他解决方法。

特殊替换方式

// 第一种
'abcde'.replaceAll('c', '$$')
// 第二种
'abcde'.replaceAll('c', '$&')

结果是：

// 第一种输出结果
"ab$de" 而非 "ab$$de"
// 第二种输出结果
"abcde" 而非 "ab$&de"

若要原样完整输出，则：

'abcde'.replaceAll('c', () => '$$')
'abcde'.replaceAll('c', () => '$&')

浏览器String.prototype.replaceAll支持情况

现代浏览器最新版均可支持，具体查看这里。