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

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

一、使用string.replaceAll

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

二、使用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
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