Replace css background url

Question

i would like to replace the css background urls like these:

body {
  background: url("../common/images/nyau.jpg") center center;
}
.alma { 
  background: url("./vau/vau.jpg"); 
}
.ata { 
  background: url("./mak.jpg"); 
}

to these:

body {
  background: url("./images/nyau.jpg") center center;
}
.alma { 
  background: url("./images/vau.jpg"); 
}
.ata { 
  background: url("./images/mak.jpg"); 
}

Unfortunately i am not familiar with regex at all.

I know i can select ("../common/images/nyau.jpg") this part with /$(.*?)$/g but i need to capture the part from the last / (nyau.jpg) somehow. So i could do ./images/$1 or something like that.

EDIT: in the api of gulp-replace i am only allowed to use regular expressions without any javascript function.

What is purpose of separate lines for each background property ? Last background set would overwrite previous two — guest271314
– guest271314, Commented Jan 10, 2016 at 17:44
You are right, maybe i shouldn't have come up with such a silly example. But in this case it is not important. — aegyed
– aegyed, Commented Jan 10, 2016 at 17:48

CoderPi · Accepted Answer · 2016-01-10 17:54:14Z

1

This function fixPath(path) will return you the path as you want it to have, you can then apply it whereever you need to fix you backgrounds.

function fixPath(path) {
  return path.replace(/(.*\/)(.*)$/, "./images/$2")
  //  return "./images/" + path.split("/").pop()
}

// Demo Paths
var paths = ["../common/images/nyau.jpg", "./vau/vau.jpg", "./mak.jpg"]

// Do it for all paths
paths = paths.map(fixPath)

// Demo Output
document.write(JSON.stringify(paths))

edited Jan 10, 2016 at 17:54

answered Jan 10, 2016 at 17:47

CoderPi

13.2k4 gold badges38 silver badges64 bronze badges

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

6 Comments

aegyed Over a year ago

unfortunately i can only use regex and no javascript functions

CoderPi Over a year ago

@AttilaEgyed whs is that? But OK, i'll find the regex

aegyed Over a year ago

@CodeSir check regexr.com, i use gulp-replace and in that api i am only allowed to use regular expressions without any javascript function

CoderPi Over a year ago

@AttilaEgyed I added the RegEx

aegyed Over a year ago

@CodeSir nice! But this will also replace all regular urls like this http://regexr.com/foo.html?q=bar for example. The best would be to make some constraint to only look for the contents between url(...)

|

Collectives™ on Stack Overflow

Replace css background url

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related