同一個選擇器上的多個.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

正則表達式/".*?"/與在for循環中創建的<span style="color:#f92772;">中的引號匹配，以便替換將其轉換爲<span style=<span style="color:red;">"color:#f92772;"</span>>。這不是有效的HTML。

你大概需要限制你的替換文本節點，而不是HTML標籤。