js怎么避免替换标签内容

Question

问题遇到的现象和发生背景

let str1 = ["c","v","r"];
let str2 = "cvr";
for (let i = 0; i < str1.length; i++) {
       let reg = new RegExp(`${str1[i]}`,'g');
       str2 =  str2.replace(reg, match => `<span style = 'background-color:#f3c061;'>${match}</span>`);
}
console.log(str2);

这种方法怎么避免标签内容也被替换？

运行结果及报错内容

<span style = 'background-color:#f3c061;'>c<span style = 'background-color:#f3c061;'>vr

这是替换的最后结果，把标签内容也替换了。

我想要达到的结果

循环替换的时候可以不替换标签里面的内容

Answer 1

let str1 = ["c","v","r"];
let str2 = "cvr";
const reg = new RegExp(`(${str1.join('|')})`, 'g')
const res = str2.replace(reg, match => `<span style = 'background-color:#f3c061;'>${match}</span>`)
console.log(res)