How to extract two rgb values/strings from the another string using regex or another method

Question

The following string has been retrieved from an element's style attribute, the attribute is a variable and can contain different colors in a particular vertical gradient background:

string = "background: linear-gradient(0deg, rgb(100, 106, 237) 0%, rgb(101, 222, 108) 100%) repeat scroll 0% 0% transparent; display: list-item; cursor: pointer;"

Using the following code, the linear-gradient contents is extracted from the string:

string = string.substring(string.indexOf('linear-gradient('), 1+string.lastIndexOf(')')); // string = "linear-gradient(0deg, rgb(100, 106, 237) 0%, rgb(101, 222, 108) 100%)"

Now using a regular expression -or any other method- I need to extract both the first rgb -rgb(100, 106, 237)- value as-well as the second -rgb(101, 222, 108). Can anyone please recommend/suggest a simple method to achieve this. Thanks in advance.

jaco · Accepted Answer · 2014-03-01 13:48:04Z

2

You can use this regular expression to extract all rgb codes:

var regex = /rgb\(([^\)]+)\)/g;

answered Mar 1, 2014 at 13:48

jaco

3,5265 gold badges28 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

anubhava · Accepted Answer · 2014-03-01 13:51:28Z

1

You can use this:

string.replace(/^.*?linear-gradient *\((.+)/, function($1, $2) {
                         return $1.match(/rgb *\([^)]+\)/g); } );
//=> rgb(100, 106, 237),rgb(101, 222, 108)

Assuming there is no other rgb segment outside closing bracket of linear-gradient

answered Mar 1, 2014 at 13:51

anubhava

790k67 gold badges603 silver badges671 bronze badges

2 Comments

Francesco Over a year ago

what if there was a mix of rgb & rgba ?

anubhava Over a year ago

Then use rgba? in regex

Sergey Chernykh · Accepted Answer · 2014-03-01 14:23:06Z

1

There is no need for your first extracting. Try the following:

var re = /rgb\(\d{1,3}, ?\d{1,3}, ?\d{1,3}\)/g;

// and then get array of matches

var rgbs = string.match(re);

//It will be equal to null if there is no matches.

edited Mar 1, 2014 at 14:23

answered Mar 1, 2014 at 14:16

Sergey Chernykh

513 bronze badges

Collectives™ on Stack Overflow

How to extract two rgb values/strings from the another string using regex or another method

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related