How to get an image name using jQuery?

Question

Let's says I have :

<img src='static/images/banner/blue.jpg' />

Using jQuery, how could I get the blue data ?

If I use $('img').attr('src'), I can get the whole URI. In that case, what is the best way to remove the extension and all the path ?

Answer 1

There are a couple gotcha here- local files may use the other slash ('\') in the pathname, and some filenames can have hash or search tails defined, or not have an extension.

String.prototype.filename=function(extension){
    var s= this.replace(/\\/g, '/');
    s= s.substring(s.lastIndexOf('/')+ 1);
    return extension? s.replace(/[?#].+$/, ''): s.split('.')[0];
}

console.log($('img').attr('src').filename());

Answer 2

var src = $('img').attr('src').split('/');
var file = src[src.length - 1];

Should work