jquery中的正则表达式获取图像文件名

Question

我想使用 jquery 从图像的 src 中单独提取文件名及其路径及其扩展名。

例如：

<img src="images/cat/kitty.gif" id="myimg" />

我需要从上面的代码中获取“images/cat/kitty”和“.gif”。

我该怎么办？

Answer 1

您可以简单地使用 attr 方法：

$('#image_id').attr('src');

如果您想要单独的名称和扩展名，你可以这样做：

var arr = $('#image_id').attr('src').split('.');
alert(arr[0]);    // name
alert(arr[1]);    // extension

Answer 2

仅提取文件名：

    var name = $('#myimg').attr("src");
    var parts = name.split('/');
    name = parts[parts.length-1];

Answer 3

不需要正则表达式。使用.split()：

var ret = $('#myimg').attr('src').split(/\./);

console.log(ret[0]);  // === 'images/cat/kitty'
console.log(ret[1]);  // === 'gif'

Answer 4

如果您有一个使用多个“.”的复杂图像路径例如 -

http: //website.com/app/folder/imagemanager.php../../../user_images/2982034/images/image.png

虽然你可以事先清理路径，如果没有，使用 jQuery 你可以尝试-

// Get the source
var image_src = $(el).attr('src');

// Get the extension. As mentioned above, using split() and pop() 
var extension = image_src.split('.').pop();

// Get just the path. Replace the extension with ''
var path = image_src.replace('.'+extension,'');