how to replace url in css using regexp (javascript)

Question

var text = '#anything {behavior:url("csshover.htc");}'; //iam using " with url
text += "#anything {background:transparent url('img.png') no-repeat;}"; //iam using ' with url
text += "#anything {background-image:url('ok.jpg');}";

result

#anything {
    behavior:url("#");
}

#anything {
    background:transparent url('#') no-repeat;
}

#anything {
    background-image:url('#');
}

How can i do that ?

Mehta G · Accepted Answer · 2019-10-06 14:40:10Z

4

Replace # below with $2 if you want to get the URL with single quotes.

var text = '#anything {behavior:url("csshover.htc");}'; //iam using " with url
text += ".regleft {background:transparent url('img.png') no-repeat;}"; //iam using ' with url
text += "#anything {background-image:url('ok.jpg');}";
text = text.replace(/url\((['"])(.+?)\1\)/g, "url('#')");

edited Oct 6, 2019 at 14:40

Mehta G

478 bronze badges

answered Aug 29, 2010 at 19:55

Lekensteyn

67k25 gold badges169 silver badges205 bronze badges

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

3 Comments

faressoft Over a year ago

text = text.replace(/url$(['"])(.+?)\1$/g, "url('#')"); Thanks,This code helped me in my project.

user113716 Over a year ago

Your regex wipes out the url() part so you're just left with '#'.

Largo Over a year ago

I'd suggest adding ? after ['"] so you also get urls without quotes. 'url(http://blabla.com)'.replace(/url$(['"]?)(.+?)\1$/g, "$2");

SharkAlley · Accepted Answer · 2014-01-19 11:02:11Z

1

For others who come here looking for a general solution that preserves both whitespace and quotes:

//Test data
var css = 'one url(two) url(\'three\') url("four")  url  (  five  )';

css = css.replace(

    // Regex
    /(url\W*\(\W*['"]?\W*)(.*?)(\W*['"]?\W*\))/g,

    // Replacement string
    '$1*$2*$3'

);

console.log(css);

outputs

one url(*two*) url('*three*') url("*four*")  url  (  *five*  )

answered Jan 19, 2014 at 11:02

SharkAlley

11.7k6 gold badges54 silver badges43 bronze badges

Comments

user113716 · Accepted Answer · 2010-08-29 20:12:32Z

0

Example: http://jsfiddle.net/GcsLQ/2/

var text = '#anything {behavior:url("csshover.htc");}'; //iam using " with url
text += "#anything {background:transparent url('img.png') no-repeat;}"; //iam using ' with url
text += "#anything {background-image:url('ok.jpg');}";


text = text.replace(/url\([^)]+\)/g, 'url("#")');

If you want the space formatting as well, do this:

Example: http://jsfiddle.net/GcsLQ/3/

var text = '#anything {behavior:url("csshover.htc");}'; //iam using " with url
text += "#anything {background:transparent url('img.png') no-repeat;}"; //iam using ' with url
text += "#anything {background-image:url('ok.jpg');}";


text = text.replace(/url\([^)]+\)/g, 'url("#")')
    .replace(/{/g,'{\n\t')
    .replace(/}/g,'\n}\n');

EDIT: Added quotes to the replaced URL.

edited Aug 29, 2010 at 20:12

answered Aug 29, 2010 at 19:54

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

how to replace url in css using regexp (javascript)

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