How to avoid using twice replace (using only one regex) in the following script?

Question

I need to edit a string from:

rgb(250, 0, 0) 10px 10px 50px 0px

to:

rgba(250, 0, 0, 1) 10px 10px 50px 0px

Assuming the input value is always correct, I need to add alpha channel of 1.

The follow script I created works, but I was wondering about the double replace.

I would like to know if you perform a better way, maybe using only one regex and avoiding using replace twice or a better alternative.

        var _convertBoxShadowToTgba = function (boxShadow) {
            return boxShadow.replace(/rgb/i, 'rgba').replace(/\)/i, ', 1)');
        };
        var original = "rgb(250, 0, 0) 10px 10px 50px 0px";
        var final = _convertBoxShadowToTgba(original);
        console.log('original', original);
        console.log('final', final);

revo · Accepted Answer · 2016-11-30 06:51:32Z

2

Regex:

rgb(.*?\d)\)

Explanation:

rgb          # Match literal `rgb`
    (        # Start of capturing group (1)
        .*?  # Match every thing lazily
        \d   # Up to a digit
    )        # End of capturing group (1)
\)           # That is followed by a closing bracket

Replacement string:

rgba$1, 1)

$1 is a back-reference to first capturing group

JS code:

original.replace(/rgb(.*?\d)\)/i, 'rgba$1, 1)')

Live demo

edited Nov 30, 2016 at 6:51

answered Nov 30, 2016 at 6:46

revo

49k15 gold badges84 silver badges123 bronze badges

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

3 Comments

xShirase Over a year ago

The battle for rep on simple regexp questions is endless :)

revo Over a year ago

When two answers are posted accidentally in a moment, improving one to promote a better understating of solution is better than removing it. @xShirase

xShirase Over a year ago

@revo I totally agree, that is what makes SO great, the diversity of explanations and approaches. I often find valuable information within more than one answer. Congrats on a great post

xShirase · Accepted Answer · 2016-11-30 06:52:16Z

0

Use groups, like this :

/rgb(.*)\)/

this will group everything between rgb and the last parenthesis. You can then reuse the group within your replace expression :

.replace(/rgb(.*)\)/, 'rgba$1, 1')

Test :

a = 'rgb(250, 0, 0) 10px 10px 50px 0px'

a.replace(/rgb(.*)\)/i, 'rgba$1, 1)')
>"rgba(250, 0, 0, 1) 10px 10px 50px 0px"

The way it works is as follows :

the expression between parenthesis is called a group, you can reuse it using $ variables in your replace expression.

For example :

a = 'Hello, foo!'
a.replace(/(Hello)(.*)(foo)/, '$3$2$1')
> foo, Hello!

In this example, groups are :

$1 : (Hello)
$2 : (.*)
$3 : (foo)

You can switch them around, replace them, etc, as you wish.

Comments

vishnuvp · Accepted Answer · 2016-11-30 08:29:17Z

0

You can also pass a function to the replace method. Like this:

var _convertBoxShadowToTgba = function (boxShadow) {
        return boxShadow.replace(/rgb|\)/g, function($0) {
                 if ($0 == 'rgb') { return 'rgba';}
                 if($0 == ')') {return ', 1)';}
            });
 };
 var original = "rgb(250, 0, 0) 10px 10px 50px 0px";
 var final = _convertBoxShadowToTgba(original);
 console.log('original', original);
 console.log('final', final);

answered Nov 30, 2016 at 8:29

vishnuvp

2836 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to avoid using twice replace (using only one regex) in the following script?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related