将字符串中 0.9 alpha 处的 RGB 转换为 RGBA

Question

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

结果应如下所示：

线性渐变(90deg, 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>

Answer 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>

Answer 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(, 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(, 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(, 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%)

将字符串中 0.9 alpha 处的 RGB 转换为 RGBA

Convert RGB to RGBA at 0.9 alpha in string

string

gradient

alpha

str-replace

rgba