javascript - Regex to extract RGB(r,g,b) from RGBA(r,g,b,a) - Stack Overflow

admin管理员组

文章数量:1026989

I am running the following regex in JS to extract 3 R/G/B items from the string below which is rgba(r,g,b,a), but it's not working. I am getting the original string back.

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)'));

I am running the following regex in JS to extract 3 R/G/B items from the string below which is rgba(r,g,b,a), but it's not working. I am getting the original string back.

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)'));

• javascript
• css
• regex

Share Improve this question Follow edited Apr 4, 2018 at 16:44 Jordan Running 106k1818 gold badges188188 silver badges187187 bronze badges asked Apr 4, 2018 at 15:51 gene b.gene b. 12.1k3030 gold badges139139 silver badges270270 bronze badges 7

• 3 You're missing the \s* in front of your last capture group. – jmcgriz Commented Apr 4, 2018 at 15:55
• Visualize It and it will stand out why – epascarello Commented Apr 4, 2018 at 15:56
• Is your intent to make this work with any CSS rgba() expression? If so, you're going to have to consider valid expressions like rgba(1e2, .5e1, .5e0, +.25e2%). – Jordan Running Commented Apr 4, 2018 at 16:00
• Your regex should be rgba?\((\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*)(((?:,\s*[0-9.]*\s*)?))\) Was missing the third group – nnamdi Commented Apr 4, 2018 at 16:04
• 1 @jmcgriz My point was that there are a lot of edge cases that OP at least needs to consider. Percent values for the alpha ponent are mon. It's also mon for people to leave off 0 in the ones place (i.e. .3 for 0.3), or to see just 0 or 1. None of those cases are covered by OP's original regexp. Finally, CSS isn't just written by people. There are lots of tools that generate CSS code, and CSS color values in particular, and we can't make assumptions about what number format(s) they'll use. – Jordan Running Commented Apr 4, 2018 at 16:14

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 4

You could also write a more consolidated version of the regex like this:

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)'));

It's much easier to extract the numbers and rebuild the string rather than trying to remove all the parts you don't want.

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)

You had errors in your expression:

1. You weren't considerin spaces before the alpha value
2. You weren't escaping the . character

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)'));

Alternative solution:

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

If you want to match a wider range of color and alpha values (e.g. 30%, .0, .5e10, all of which are valid), you'll need to be a bit looser with your regular expression. Consider:

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

This will match any rgba(R, G, B, A) expression and capture all of the argument except the last. The JavaScript replace call would look like this:

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

You can see it in action in the below snippet:

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>

...or on Regex101: https://regex101./r/6mZDuC/1

I am running the following regex in JS to extract 3 R/G/B items from the string below which is rgba(r,g,b,a), but it's not working. I am getting the original string back.

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)'));

I am running the following regex in JS to extract 3 R/G/B items from the string below which is rgba(r,g,b,a), but it's not working. I am getting the original string back.

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)'));

• javascript
• css
• regex

Share Improve this question Follow edited Apr 4, 2018 at 16:44 Jordan Running 106k1818 gold badges188188 silver badges187187 bronze badges asked Apr 4, 2018 at 15:51 gene b.gene b. 12.1k3030 gold badges139139 silver badges270270 bronze badges 7

• 3 You're missing the \s* in front of your last capture group. – jmcgriz Commented Apr 4, 2018 at 15:55
• Visualize It and it will stand out why – epascarello Commented Apr 4, 2018 at 15:56
• Is your intent to make this work with any CSS rgba() expression? If so, you're going to have to consider valid expressions like rgba(1e2, .5e1, .5e0, +.25e2%). – Jordan Running Commented Apr 4, 2018 at 16:00
• Your regex should be rgba?\((\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*)(((?:,\s*[0-9.]*\s*)?))\) Was missing the third group – nnamdi Commented Apr 4, 2018 at 16:04
• 1 @jmcgriz My point was that there are a lot of edge cases that OP at least needs to consider. Percent values for the alpha ponent are mon. It's also mon for people to leave off 0 in the ones place (i.e. .3 for 0.3), or to see just 0 or 1. None of those cases are covered by OP's original regexp. Finally, CSS isn't just written by people. There are lots of tools that generate CSS code, and CSS color values in particular, and we can't make assumptions about what number format(s) they'll use. – Jordan Running Commented Apr 4, 2018 at 16:14

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 4

You could also write a more consolidated version of the regex like this:

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)'));

It's much easier to extract the numbers and rebuild the string rather than trying to remove all the parts you don't want.

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)

You had errors in your expression:

1. You weren't considerin spaces before the alpha value
2. You weren't escaping the . character

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)'));

Alternative solution:

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

If you want to match a wider range of color and alpha values (e.g. 30%, .0, .5e10, all of which are valid), you'll need to be a bit looser with your regular expression. Consider:

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

This will match any rgba(R, G, B, A) expression and capture all of the argument except the last. The JavaScript replace call would look like this:

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

You can see it in action in the below snippet:

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>

...or on Regex101: https://regex101./r/6mZDuC/1

本文标签：