javascript - 正则表达式替换第一或第二渐变颜色

需要替换第一个或第二个渐变颜色，如下所示：

var x = 1;
var new_color = 'rgb(140,220,0)';
var sty = $('#targ').attr('style');
if(x == 1){
  var first_rgb = '???'; // regex here to get `rgb(255,102,255)`
  var new_sty = sty.replace(first_rgb, new_color);
}
else{
  var second_rgb = '???'; // regex here to get `rgb(255,0,0)`
  var new_sty = sty.replace(second_rgb, new_color);
}
$('#targ').attr('style', new_sty)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="targ" style="background:linear-gradient(to right, rgb(255,102,255), rgb(255,0,0)); color:black; padding:25px 9px 14px 9px;">LOREM</div>

有什么帮助吗？

最佳答案

您可以使用这两个正则表达式来查找要替换的不同rgb：

rgb\([^)]*?\)(?=[^)]*rgb)

查找rgb(，后跟一定数量的非)字符和)，并具有先行断言，即在一定数量的非rgb字符之后，匹配再次由)跟随。

rgb\([^)]*?\)(?=\s*\))

查找rgb(，后跟一定数量的非)字符和)，并预先确定匹配项后跟一定数量的空格和)。

var new_color = 'rgb(140,220,0)';
var sty = $('#targ').attr('style');
var re = [
  /rgb\([^)]*?\)(?=[^)]*rgb)/,
  /rgb\([^)]*?\)(?=\s*\))/
];
for (let x = 0; x < 2; x++) {
  var new_sty = sty.replace(re[x], new_color);
  $('#targ' + x).attr('style', new_sty)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="targ" style="background:linear-gradient(to right, rgb(255,102,255), rgb(255,0,0)); color:black; padding:25px 9px 14px 9px;">LOREM</div>
<div id="targ0" style="background:linear-gradient(to right, rgb(255,102,255), rgb(255,0,0)); color:black; padding:25px 9px 14px 9px;">LOREM</div>
<div id="targ1" style="background:linear-gradient(to right, rgb(255,102,255), rgb(255,0,0)); color:black; padding:25px 9px 14px 9px;">LOREM</div>