Sed regular expression pattern to replace in CSS - adding OR check within

Question

I have the following CSS background-image rules wherein I want the URL replaced with a new domain (you know, for the sake of loading images via a cookie-less domain):

background-image : url(/image/test.png);
background-image : url("/image/test.png");
background-image : url('/image/test.png');

I can catch the quotes before /image and then replace the URL correctly with the following sed expression:

local someVar=123
local replace='url\("\/\/img.mydomain.com\/'"$someVar"'\1\")'
sed -E 's,url\(.(.+).\),'"$replace"',g' file.css

The snippet

url\(.

takes care of the quote (single or double) in the URL string. But if the quotes are not there (first example above), the regex will obviously fail. What would be the correct regex to check for this?

I tried the following but it doesn't work:

local someVar=123
local replace='url\("\/\/img.mydomain.com\/'"$someVar"'\1\")'
sed -E 's,url\((\'|\")(.+)(\'|\")\),'"$replace"',g' file.css

and it just throws error: syntax error near unexpected token `)'

anubhava · Accepted Answer · 2013-09-02 16:33:57Z

3

You can use this sed:

local someVar=123
local replace='\1\2//img.mydomain.com/'"$someVar"'\3\4'

On Linux Use this sed command:

sed -r "s~(url\()(['\"]?)(.*)$2(\);)~$replace~" file.css

On OSX Use this sed command:

sed -E "s~(url\()(['\"]?)(.*)$2(\);)~$replace~" file.css

OUTPUT:

background-image : url(//img.mydomain.com/123/image/test.png);
background-image : url("//img.mydomain.com/123/image/test.png");
background-image : url('//img.mydomain.com/123/image/test.png');

edited Sep 2, 2013 at 16:33

answered Sep 2, 2013 at 9:56

anubhava

790k67 gold badges603 silver badges671 bronze badges

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

6 Comments

Parag Over a year ago

If I use the "-r" option, I get an "illegal option" error. Without the "-r", I get: "s~(url()(['"]?)(.*?)(\ ...": \2 not defined in the RE

anubhava Over a year ago

Is it OSX that you are using?

anubhava Over a year ago

So sorry, I should have asked earlier. Just updated the answer with OSX sed command as well.

Parag Over a year ago

Thanks Anubhava. This time it's a different error: "s~(url()(['"]?)(.*?)(\ ...": RE error: repetition-operator operand invalid

anubhava Over a year ago

No I had removed .*? command is this: sed -E "s~(url$)(['\"]?)(.*)$2($;)~$replace~" file.css

|

Community · Accepted Answer · 2017-05-23 12:11:07Z

2

According to this answer (How to match a single quote in sed), you should use another pair of single quote:

local someVar=123
local replace='url\("\/\/img.mydomain.com\/'"$someVar"'\1\")'
sed -E 's,url\(('\''|\")(.+)('\''|\")\),'"$replace"',g' file.css

For better readability, you can use square brackets instead of the parentheses, and you can just put the double quote without escaping it.

sed -E 's,url\(['\''"]?([^'\'']+)['\''"]?\),'"$replace"',g' file.css

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Sep 2, 2013 at 7:43

justhalf

9,1344 gold badges51 silver badges79 bronze badges

3 Comments

Parag Over a year ago

How do I correctly match "background-image : url(/image/test.png);" where the quotes are missing?

Parag Over a year ago

Cool! That worked fine. But when I use the above in the following case: url('/images/test.png'), it gives me an output that reads as: url("//img.mydomain.com/123/images/test.png' "); There's a trailing ' after "png"

justhalf Over a year ago

Hmm, we must change the (.+) to not match the trailing quote. See my edits

user1502952 · Accepted Answer · 2013-09-02 16:00:32Z

1

someVar=123
replace='\/\/img.mydomain.com\/'"$someVar"''
sed  -E 's,(\/.*\/[a-z.]+),'"$replace"'\1,g' file.css

Output:

background-image : url(//img.mydomain.com/image/test.png);
background-image : url("//img.mydomain.com/image/test.png");
background-image : url('//img.mydomain.com/image/test.png');

edited Sep 2, 2013 at 16:00

answered Sep 2, 2013 at 8:16

user1502952

1,4304 gold badges14 silver badges27 bronze badges

Collectives™ on Stack Overflow

Sed regular expression pattern to replace in CSS - adding OR check within

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related