正则表达式替换第一个或第二个渐变颜色答案

【问题标题】：regex to replace first or second gradient color正则表达式替换第一个或第二个渐变颜色
【发布时间】：2020-03-13 01:18:24
【问题描述】：

需要替换第一个或第二个渐变色，像这样：

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>

有什么帮助吗？

【问题讨论】：

为什么不直接使用sty.replace('rgb(255,102,255)', new_color);
@Nick - rgb... 是一个变量

标签： javascript jquery regex

【解决方案1】：

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

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>

【讨论】：

【解决方案2】：

我会尝试使正则表达式特定于匹配渐变，以防止替换任何其他 rgb 值并使用函数替换正确的值：

let x = 1;
let new_color = 'rgb(140,220,0)';
let sty = $('#targ').attr('style');
let new_sty = sty.replace(
  /-gradient\(.+(rgb\(\d{1,3},\d{1,3},\d{1,3}\))\s*,\s*(rgb\(\d{1,3},\d{1,3},\d{1,3}\))/,
  (match, first, second) => match.replace(
    first, x==1?new_color:first).replace(second, x==1?second: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>

【讨论】：

【解决方案3】：

开始吧，仅适用于支持 ECMAScript 2018 的浏览器。

var first_rgb = /rgb\(.*?\)/;

var second_rgb = /(?<=rgb.*?)rgb\(.*?\)/;

var sty = "background:linear-gradient(to right, rgb(255,102,255), rgb(255,0,0)); color:black; padding:25px 9px 14px 9px;";

var new_color = 'rgb(140,220,0)';

console.log('[sty]: ' + sty);

console.log("[first rgb replaced]: " + sty.replace(first_rgb, new_color));

console.log("[second rgb replaced]: " + sty.replace(second_rgb, new_color));

【讨论】：