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

Question

我计划更改文本中关键字的颜色，并在同一元素上使用多个.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>');
    });
}

和

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

似乎在以一种奇怪的方式发生冲突。 style =“ color：＃f92772;” 被添加到字符串中，并且在组合时不作为html命令使用

这有效： http : //jsfiddle.net/D2vQ6/

这有效： http : //jsfiddle.net/vQdg7/

但这不起作用： http : //jsfiddle.net/uE8qa/

Answer 1

正则表达式/".*?"/与<span style="color:#f92772;">中在for循环中创建的引号匹配，因此替换<span style="color:#f92772;">其变成<span style=<span style="color:red;">"color:#f92772;"</span>> 。 这不是有效的HTML。

您大概需要将替换内容限制为文本节点，而不是HTML标记。