Question

What is a regex to find the first image in an image tag in an HTML document? My previous tries have not really worked, as they just matched based on .jpg" and didn’t put into account edge cases such as having an image with a cachebuster timestamp at the end (asdf.jpg?581291823)

Edit: I’m using Node.js. I’d like to do HTML parsing, but we have a lot of documents to parse, so I’m not sure if HTML parsing is the best option as it takes considerably more time.

Answer 1

As anubhava correctly points out, regex is not 100% reliable for parsing HTML. However, for one-shot-tasks, (i.e. not production code), a regex solution can do a pretty good job (and is quite fast as well):

Capture the image URL filename (sans query or fragment) from the first IMG element into group $1:

<img\b[^>]+?src\s*=\s*['"]?([^\s'"?#>]+)

Note that there are certainly edge cases where this does not work.

Edit: Added ">" to the negated SRC attribute value character class.