JavaScript：如何使用JavaScript的内置方式实现replaceAll功能

刺骨的言语ヽ痛彻心扉 2022-10-06 02:52 179阅读 0赞

对于html中内容作处理时，经常需要用到全局替换功能，除了自己编写代码循环查找并一一进行替换外，javascript也提供了一些方式可以直接完成这一功能，下面就来介绍一下：

### 一、使用string.replaceAll ###

这个只在较高版本的浏览器中才支持。浏览器版本信息如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ldHllYXhp_size_16_color_FFFFFF_t_70][]

### 二、使用replace+全局正则表达式 ###

var exp = new RegExp ("^[a-zA-Z]{8}", "g");
    或
    var exp = /^[a-zA-Z]{8}/g;
    
    var src = "djdj99kwkek2000";
    var replacement = "cat";
    var result = src.replace(exp, replacement);
    
    alert(result); //  cat99cat2000

对于需要将匹配到的字符串进行处理后，放回原位置的情况，需要用到命名捕获分组（named capturing group）

###  三、使用replace+命名捕获分组（named capturing group） ###

在定义正则表达式时，使用（）对表达式分组，并使用?<name>给这个分组起一个变量名，这样这个分组的表达式匹配到的字符串，就会赋值到这个变量名上。如果做替换时，可以使用$<name>引用到这个变量的值。

比如，想把所有出现oo地方，替换成\_oo\_，则可以使用如下代码实现：

var src = "Hook have a good food";
    var p = "o{2}";
    
    var exp = new RegExp ("(?<param>" + p + ")", "g");
    var ret = src.replace(exp, "_$<param>_");
    
    alert(ret); // H_oo_k have a g_oo_d f_oo_d

以上代码在chrome71上会报错，但在chrome76上可以正常执行；其它浏览器没有试过，应该太老的版本应该也支持不了。

参考文档

[ES2018: RegExp named capture groups][ES2018_ RegExp named capture groups]  
[https://2ality.com/2017/05/regexp-named-capture-groups.html][ES2018_ RegExp named capture groups]

[Capturing groups][]  
[https://javascript.info/regexp-groups][Capturing groups]

[String.prototype.replaceAll()][String.prototype.replaceAll]  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/String/replaceAll][String.prototype.replaceAll]

[RegExp][]  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global\_Objects/RegExp][RegExp]

[Regular expressions][]  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular\_Expressions][Regular expressions]

[Groups and ranges][]  
[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular\_Expressions/Groups\_and\_Ranges][Groups and ranges]

[JavaScript RegExp 对象][JavaScript RegExp]  
[https://www.runoob.com/jsref/jsref-obj-regexp.html][JavaScript RegExp]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ldHllYXhp_size_16_color_FFFFFF_t_70]: /images/20221005/0127eea4bfd74c9d8ef17bbe23bddcf9.png
[ES2018_ RegExp named capture groups]: https://2ality.com/2017/05/regexp-named-capture-groups.html
[Capturing groups]: https://javascript.info/regexp-groups
[String.prototype.replaceAll]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll
[RegExp]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
[Regular expressions]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
[Groups and ranges]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges
[JavaScript RegExp]: https://www.runoob.com/jsref/jsref-obj-regexp.html