Измените значения альфа-канала для нескольких объектов из строки цветового шаблона CSS в JavaScript

Question

Предположим, у нас есть эта константа, представляющая цветовой образец CSS:

const COLOR = 'rgba(100,100,200, 0) rgb(100, 100, 200) rgba(100,200,250) rgba(100,200,250,0.8) rgba(40, 50, 60, 1)';

Какой будет самый быстрый метод (сопоставление / регулярное выражение ...?) В JavaScript, чтобы добавить 0,1 к альфа канал каждого rgba (...), и если это rgb (...), изменить его на rgba (...) с альфа-каналом (ie: 0.1)? Если у rgba (...) уже есть альфа-канал 1, он должен оставаться на 1, даже если более высокое значение ничего не нарушит вычисляемый стиль.

Таким образом, результирующая строка будет:

rgba(100,100,200, 0.1) rgba(100, 100, 200, 0.1) rgba(100,200,250,0.1) rgba(100,200,250,0.9) rgba(40, 50, 60, 1)

Answer 1

Ваш первый шаг - заменить rgb на rgba, затем добавить 0,1 к последнему числу, если оно меньше 1, и, наконец, заменить экземпляры, в которых у вас есть только три значения, на четыре (это регулярное выражение выглядит странно, потому что некоторые из ваших чисел в скобках имеют пробелы и другие нет)

COLOR.replace(/rgb\(/g, 'rgba(').replace(/(\d\.\d|[^\d]0)\)/g, (match, p1) => {return String(Number(p1)+0.1) + ')';}).replace(/(\( *\d+ *, *\d+ *, *\d+ *)(\))/g, '$1,0.1$2')

Важно отметить, что это будет работать, только если ваше третье значение ВСЕГДА больше 1.