正则表达式提取 src 属性

Question

I am trying to match every src attribute that ends with jpg or png or gif and extract src string inside. I am not sure if the following regex that I came up with is correct, but it does give me src attributes with addresses. My question has to do with the possible problem of the following regex and how I can extract only the src string.

/src\s*=\s*(["'][^"']+(jpg|png|gif)\b)/g;

Answer 1

First of all, your regex is trying to do too much. Start by doing something like:

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];

    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }

    return imgSrcs;
}

Now, your regex has a lot less to deal with. (No whitespace, single vs double quotes, and so on.)

Please read this , and don't (except for very simple situations) try to use regex for parsing raw HTML :)

So, given an array of image sources, you just need to select the jpg / png / gif ones:

/(jpg|png|gif)$)/i;

And then grab their file names, without the extension: (There are many ways of doing this; here's just one thing I've thrown together...)

/(.*)\.[^.]+)/;