Javascript regex extract image name from css

Question

with javascript regex I´m trying to get the image name and extension as capture group of css properties.

Requirements

starting with url
followed by brackets
inside brackets optional quotes
location can have path information
ending with jpeg or jpg or gif or png

Example:

behavior: url(#default#VML);                   -> ignored wrong ending
background-image: url(dog.ttf);                -> ignored wrong ending
background-image: url('cat.png');              -> cat.png
background-image: url(bird.gif);               -> bird.gif
background-image: url('../monkey.png');        -> monkey.png
background-image: url('../../rab$bit.png');    -> rab$bit.png
background-image: url('../animal/cow.jpg');    -> cow.jpg

This is what I have so far:

url(?:\(\"|\(\'|\(\/?.*\/|\()(\.+)?(\/.*\/)?(\w*)+(.png|.jpg|.gif|.jpeg)

https://regex101.com/r/3mMdTI/6

Unfortunately due to the '\w' group this breaks when a filename has digits or characters like $. Can one suggest a better solution?

instead of the /w you can just use [^\'\"] (negated set of single- and doublequotes to match all but the end — inetphantom
– inetphantom, Commented May 30, 2017 at 12:23

Abhishek Gurjar · Accepted Answer · 2017-05-30 12:46:08Z

2

I am assuming you are asking for image name with format only not path and other thing.

var string = `behavior: url(#default#VML);                   
background-image: url(dog.ttf);                
background-image: url('cat.png');              
background-image: url(bird.gif);               
background-image: url('../monkey.png');        
background-image: url('../../rab$bit.png');    
background-image: url('../animal/cow.jpg');`

var result = string.match(/[\w\.\$]+(?=png|jpg|gif)\w+/g)

console.log(result)

edited May 30, 2017 at 12:46

answered May 30, 2017 at 12:19

Abhishek Gurjar

7,47610 gold badges41 silver badges47 bronze badges

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

3 Comments

Anatol Over a year ago

ah unfortunately rab$it.png fails ;(

Abhishek Gurjar Over a year ago

@tBook try now it include rab$it.png fully.

Anatol Over a year ago

Nice thanks a lot Abhishek Gurjar, this does it! Just for learning if it´s not to hard. Do you see a way to capture the file path before the filename as group as well, f.e. $0 ->../animal/ $1 -> cow.jpg ?

Slim · Accepted Answer · 2017-05-30 12:17:18Z

1

Hope you like this one:

var rx = /([^\/('"\\]+)\.(jpg|png|jpeg|gif)/i

In the square brackets I put all chars that are not supposed to be in the name of the image /, \, ', ", ( You may add or remove according to your needs.

answered May 30, 2017 at 12:17

Slim

1,9641 gold badge12 silver badges20 bronze badges

Comments

Yash Kochar · Accepted Answer · 2017-05-30 12:19:21Z

0

try this:

(.*\/)?(.*?.(png|jpg|jpeg|gif)$)

2nd group will be image name

answered May 30, 2017 at 12:19

Yash Kochar

4716 silver badges15 bronze badges

Comments

Yeongjun Kim · Accepted Answer · 2017-05-30 12:37:19Z

try this:

var string = `behavior: url(#default#VML);
background-image: url(home_bbbbbb_14.ttf);
background-image: url('home.ttf');
background-image: url('home.png');
background-image: url(images/home_bbbbbb_14.png);
background-image: url('images/home_bbbbbb_14.jpeg');
background-image: url("images/home_bbbbbb_14.png");
background-image: url(home_bbbbbb_14.png);
background-image: url('home_bbbbbb$_14.png');
background-image: url("home_bbbbbb_14.png");
background-image: url("../img/home_bbbbbb_14.png");
background-image: url("./img/home_bbbbbb_14.png");
background-image: url("../../img/home_bbbbbb_14.jpg");
url("images/animated-overlay.gif");
url("images/ui-bg_flat_75_ffffff_40x100.png");
url('select2.png');
url(select2x2.png);
url('../images/back_enabled.png');
url('../pic/back_enabled.png');`

var result = string.match(/(?!url)([^\/('"\\]+)\.(?=png|jpg|gif|jpeg)('|"|)\w+/g)

console.log(result)

Collectives™ on Stack Overflow

Javascript regex extract image name from css

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related