在字符串中以 0.9 alpha 将 RGB 转换为 RGBA答案

【问题标题】：Convert RGB to RGBA at 0.9 alpha in string在字符串中以 0.9 alpha 将 RGB 转换为 RGBA
【发布时间】：2022-02-08 19:28:24
【问题描述】：

我需要采用颜色渐变并将 rgb 动态更改为 rgba 并添加 0.9 alpha 或其他数字。当然 div id="gradient" 可以有超过三种 rgb 和 rgba 颜色。我尝试替换（（'）'，'，0.9）'）。替换 ('rgb', 'rgba');但它不起作用。我该怎么做？

结果应该是这样的：

线性梯度(90度, rgba(205, 55, 55, 0.7) 11%, rgba(80, 55, 205, 0.9) 45%, rgba (55, 205, 73, 0.5) 79%)

function myFunction() {
  var gradient = document.getElementById("gradient").style.background;
  document.getElementById("demo").innerHTML = gradient.replace(')', ', 0.9)').replace('rgb', 'rgba');
}

<div id="gradient" style="background: linear-gradient(
90deg
, rgba(215, 45, 45, 0.7) 11%, rgb(73, 45, 215) 45%, rgba(45, 215, 65, 0.5) 79%);"></div>

<button onclick="myFunction()">Click me</button>

<p id="demo"></p>

【问题讨论】：

标签： string gradient str-replace alpha rgba

【解决方案1】：

要直接在样式中替换，您可以使用下面的代码。但是，如果可能，您应该在 css 文件中使用不同的样式，然后只需单击即可切换整个元素样式（例如 gradient-idle 到 gradient-clicked 或任何您需要的）。

function myFunction() {
    var gradient = document.getElementById("gradient")
        .style
        .background
        .replace(/rgb\([0-9]{1,3},\s[0-9]{1,3},\s[0-9]{1,3}/, "$&, 0.75") // put another alpha here instead of 0.75
        .replace("rgb(", "rgba("); // then replace rgb( with rgba(

    document.getElementById("demo").innerHTML = gradient;
    document.getElementById("demo").style.background = gradient;
}

<div id="gradient" style="
    background: linear-gradient(90deg,
    rgba(205, 55, 55, 0.7) 11%,
    rgb(80, 55, 205) 45%,
    rgba(55, 205, 73, 0.5) 79%);"></div>

<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

【讨论】：

【解决方案2】：

也可以是：

// a regular expression with named capturing group "rgb" that captures the RGB values: "rgb(1, 20, 140)" -> "1, 20, 140"
const r = /rgb\((?<rgb>\d+\s*,\s*\d+\s*,\s*\d+)\)/;

let style = 'linear-gradient(90deg, rgb(205, 55, 55) 11%, rgb(80, 55, 205) 45%, rgb(55, 205, 73) 79%)';

// now we can change the values 1 by 1

style = style.replace(r, "rgba($1, 0.7)");
// linear-gradient(90deg, rgba(205, 55, 55, 0.7) 11%, rgb(80, 55, 205) 45%, rgb(55, 205, 73) 79%)

style = style.replace(r, "rgba($1, 0.9)");
// linear-gradient(90deg, rgba(205, 55, 55, 0.7) 11%, rgba(80, 55, 205, 0.9) 45%, rgb(55, 205, 73) 79%)

style = style.replace(r, "rgba($1, 0.5)");
// linear-gradient(90deg, rgba(205, 55, 55, 0.7) 11%, rgba(80, 55, 205, 0.9) 45%, rgba(55, 205, 73, 0.5) 79%)

console.log(style);

// linear-gradient(90deg, rgba(205, 55, 55, 0.7) 11%, rgba(80, 55, 205, 0.9) 45%, rgba(55, 205, 73, 0.5) 79%)

【讨论】：