регулярное выражение для замены первого или второго цвета градиента

Question

необходимо заменить первый или второй цвет градиента, например:

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>

Любая помощь?

Answer 1

Вы можете использовать эти два регулярных выражения, чтобы найти различные rgb s, подлежащие замене:

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>

Answer 2

Я бы попытался задать регулярное выражение c для сопоставления градиентов, чтобы предотвратить замену любых других значений 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>

Answer 3

Здесь мы go, работает только для браузера, поддерживает 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));