Javascript 同一选择器上的多个.replace（）似乎有冲突

我计划更改文本中关键字的颜色，并使用multiple.replace（） 调用同一元素

var $hotPinkList = [
"html",
"head",
"title",
"body",];

for (i = 0; i < $hotPinkList.length; i++) {
    $("code").html(function (_, html) {
        var rep = $hotPinkList[i];
        var regex = new RegExp(rep, 'g');
        return html.replace(regex, '<span style="color:#f92772;">' + $hotPinkList[i] + '</span>');
    });
}

var$hotPinkList=[
“html”，
“头”，
“头衔”，
“正文”]；
对于（i=0；i<$hotPinkList.length；i++）{
$（“代码”）.html（函数（\ux，html）{
var rep=$hotPinkList[i]；
var regex=新的RegExp（代表“g”）；
返回html.replace（regex，“+$hotPinkList[i]+”）；
});
}

及

$（'code'）.html（$（'code'）.html（）.replace（/3noClr/g'，）.replace（/“*？”/g，$&'）；

似乎以一种奇怪的方式相互冲突。style=“color:#f92772；”被添加到字符串中，当它们组合在一起时，不会被视为html命令

这项工作：

这项工作：

但是

---

这不起作用：

正则表达式

/“*？”/

与

循环中创建的

中的引号匹配，因此替换将其转换为

。这不是有效的HTML

---

您可能需要将替换限制为文本节点，而不是HTML标记。

谢谢，正是这样，我刚刚改变了函数的顺序，效果很好，谢谢您的洞察力！

$('code').html($('code').html().replace(/3noClr/g, '').replace(/".*?"/g, '<span style="color:red;">$&</span>'));