Regex expression on html image string

Question

I'm struggling with completing a regex expression, and it would be greatly appreciated if someone could help.

I'm trying to get the source of the image from this HTML div tag

<div class="preview item"><img alt=""
    sizes="(max-width: 440px) 320px"
    src= "https://m.testlink.com/test/zx320y230c_4130512.jpg"
    srcset= "https://m.testlink.com/test/zx320y230c_4130512.jpg 320w, https://m.testlink.com/test/zx640y460c_4130512.jpg 640w"></div>

Here is what I have so far:

const imgRegX = /<div class="?preview item"?[^>]*>\s*<img alt="?" sizes= "?"/g;

For some reason when I add the sizes it breaks.

I also assume this is how the src regex would look like, but so far I can't figure out the sizes.

src="?([^"\s]+)/

Fenton · Accepted Answer · 2020-10-29 09:04:19Z

3

You can use elements to get this information from the document without using a RegEx. For example, the below extracts the src attribute for all images that are children of the "preview" div.

const previews = document.getElementsByClassName('preview');

for (let item of previews) {
    var images = item.getElementsByTagName('img');
    
    for (let img of images) {
        console.log('Source:', img.src);
    }
}

<div class="preview item"><img alt=""
    sizes="(max-width: 440px) 320px"
    src= "https://m.testlink.com/test/zx320y230c_4130512.jpg"
    srcset= "https://m.testlink.com/test/zx320y230c_4130512.jpg 320w, https://m.testlink.com/test/zx640y460c_4130512.jpg 640w"></div>

RegEx Problem

Your RegEx problem is caused by an unexpected space here: src= " There is a space before the quote, which means it no longer matches your expression. The below screenshot is taken from RegEx101.

You could cater for the whitespace after the = sign in your RegEx:

src=\s"?([^"\s]+)

edited Oct 29, 2020 at 9:04

answered Oct 29, 2020 at 8:10

Fenton

253k74 gold badges404 silver badges414 bronze badges

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

3 Comments

redberry Over a year ago

Hi, thanks for your reply. Unfortunately I cant use document, as its an object of window and the platform Im using is react-native. Sorry for not mentioning it in the question. Also, the space before the src is present in the html as well. @Fenton

Fenton Over a year ago

@redberry I've provided an updated RegEx that works for this specific use-case.

redberry Over a year ago

my problem comes from this line 'sizes= "?"/g;', this is where the regex stops working, I think im not handling the search through sizes properly

Collectives™ on Stack Overflow

Regex expression on html image string

1 Answer 1

RegEx Problem

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

RegEx Problem

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related