Regular expression for matching css urls

Question

I have regular expression

/url\\(\\s*(?!data:)([^\\)\\s]+)\\s*\\)?/

It searches in css for lines like this

background-image: url(/path.to/img.png);

And ignores the lines

background-image: url(data:image/svg+xml;base64, PHN2ZyB4bWxucz) no-repeat;

It is used to find image paths and replace them.

But if Data url has quotes

background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz") no-repeat;

Regular expression matches it. I need to match usual image url and ignore Data url with single, double quotes or without them.

Answer 1

url\\(\\s*(?!["']?data:)([^)]+)\\)

In this regex, it will ignore anything like below(accepting optional space after (

url("data...
url(data:...

Which means it will only match the first example that you have given on the question.

Answer 2

Try to use pattern with ("|')?:

/url\\(("|')?\\s*([^(:;,]+)\\s*("|')?\\);?/

("|')? allow you also to match single or double quotes