Question

我在JS中运行以下正则表达式，从下面的字符串rgba(r,g,b,a)中提取3个R / G / B项，但它不起作用。我收回了原来的字符串。

var str = 'rgba(14, 48, 71, 0.3)';
/* Goal: rgb(14,48,71) */

console.log (str.replace(/^rgba\((\d+),\s*(\d+),\s*(\d+),(\d+.\d+)\)$/, 'rgb($1,$2,$3)'));

Answer 1

提取数字和重建字符串更容易，而不是尝试删除您不想要的所有部分。

＆＃13;

var str = 'rgba(14, 48, 71, 0.3)';
var [r,g,b] = str.match(/[\d\.]+/g);
var rgb = `rgb(${r}, ${g}, ${b})`;
console.log(rgb)

＆＃13;

Answer 2

您还可以像这样编写正则表达式的更合并版本：

＆＃13;

var str = 'rgba(14, 48, 71, 0.3)';
/* Goal: rgb(14,48,71) */

var rgx = /^rgba\(((,?\s*\d+){3}).+$/

console.log (str.replace(rgx, 'rgb($1)'));

＆＃13;

Answer 3

你的表达中有错误：

你没有在alpha值
您没有逃离.字符

var str = 'rgba(14, 48, 71, 0.3)';
/* Goal: rgb(14,48,71) */
var regex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+\.\d+)\)$/;

console.log (str.replace(regex, 'rgb($1,$2,$3)'));

Answer 4

替代解决方案：

var answer = "rgb(" + str.split(",")[0].match(/\d+/)[0] + "," + str.split(",")[1] + "," + str.split(",")[2] + ")";

Answer 5

如果你想匹配更广泛的颜色和alpha值（例如30%，.0，.5e10，所有这些都是有效的），你需要成为一个你的正则表达式有点松散。考虑：

/\brgba\((.+?),[^,]+?\)/g

这将匹配任何rgba(R, G, B, A)表达式并捕获除最后一个之外的所有参数。 JavaScript replace调用看起来像这样：

str.replace(/\brgba\((.+?),[^,]+?\)/g, 'rgb($1)')

您可以在以下代码段中看到它的实际效果：

const MATCH_CSS_RGBA = /\brgba\((.+?),[^,]+?\)/g;
const MATCH_CSS_RGBA_REPLACEMENT = 'rgb($1)';

function replaceRgbaWithRgb(input) {
  return input.replace(MATCH_CSS_RGBA, MATCH_CSS_RGBA_REPLACEMENT);
}

/*** the below is just for demonstration purposes ***/
const [input, output] = document.querySelectorAll('textarea');
function testReplace() {
  output.value = replaceRgbaWithRgb(input.value);
}
input.addEventListener('input', testReplace);
testReplace(input);

textarea{display:block;font-family:monospace;width:80%;height:80px;white-space:pre}

In (edit me!):
<textarea>i.cat1{background:rgb(249, 115, 0);}  /* RGB with 3 params */
i.cat2{background:rgba(14, 48, 71, 0.99);}  /* RGBA with 4 params */
i.cat3{background:rgba(1e2, .5e1, .5e0, +.25e2%);} /* ~exotic numbers~ */</textarea>

Out:
<textarea disabled></textarea>

...或在Regex101上：https://regex101.com/r/6mZDuC/1

正则表达式从RGBA（r，g，b，a）中提取RGB（r，g，b）

5 个答案: