regex for match all tag and extract the "src" attribute

Question

i want, with a regex, find all img tag into html document and extract the content of the src attribute.

This is my regex (see online https://regex101.com/r/EE08dw/1):

<img(?<prepend>[^>]+?)src=('|")?(?<src>[^\2>]+)[\2]?(?<append>[^>]*)>

On a test string:

<img src="aaa.jpg">

the output is:

Full match    `<img src="aaa.jpg">`
Group prepend ` `
Group 2.      "
Group srs     `aaa.jpg"`
Group append  ``

but the expected output is:

Full match    `<img src="aaa.jpg">`
Group prepend ` `
Group 2.      "
Group srs     `aaa.jpg`
Group append  ``

the problem is into group src that also match the " char:

Output:   Group srs `aaa.jpg"`
Expected: Group srs `aaa.jpg`

how fix it?

side note: regex is safe in my context

[H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) - use a parser — ctwheels, Jan 25 '18 at 19:41
Lots of diacritical marks and stuff on the bottom of the text. all accents i think. — , Jan 25 '18 at 19:52

ctwheels · Accepted Answer · 2018-01-25T20:00:51.830

Since you specified in the comments below your question that using regex in your case is safe...

You can't put backreferences in a set. It'll interpret the characters literally (so in your case \2 matches the character with index 2₈ literally). Use a tempered greedy token instead.

See regex in use here

<img(?<prepend>[^>]+?)src=(['"])?(?<src>(?:(?!\2)[^>])+)\2?(?<append>[^>]*)>
                          ^^^^^^        ^^^^^^^^^^^^^^  ^^
                          1             2               3
1: Uses set - you can do an or | as well, but using a set improves performance
2: Tempered greedy token
3: Take backreference out of set

score 2 · Answer 2 · answered Jan 25 '18 at 19:50

2

function getAllSrc(){
var arr=document.getElementsByTagName("IMG")
var srcs=[]
for(var i = 0; i<arr.length;i++){
srcs=srcs.concat(arr[i])
}
return srcs
}

answered Jan 25 '18 at 19:50

score 0 · Answer 3 · answered Jun 11 '18 at 03:37

if you use php , try this code :

$thehtml = '<p>lol&nbsp;</p><p><img src="data:image/png;base64,1" data-filename="LOGO80x80.png" style="width: 25%;"></p><p>hhhhh</p><p><img src="https://avatars2.githubusercontent1.com/u/12745270?s=52&amp;v=4" alt="lol" style="width: 25%;"><br></p>';


function getImgFromPost($html){
    preg_match_all('/<img[^>]+>/i',$html, $result); 
    $img = array();
    $i = 0;
    foreach( $result[0] as $img_tag)
    {
        preg_match_all('/(src)="([^"]+)"/i',$img_tag, $img[$i]);
        $i++;
    }

    $arr0 = array();
    for ($x0 = 0; $x0 < count($img); $x0++) {
        for($x1 = 0;$x1 < count($img[$x0][1]); $x1++){
            $arr0[$x0][$img[0][1][$x1]] = $img[$x0][2][$x1];
        }
    }
    return $arr0;
}

the output will be like this :

Array
(
    [0] => Array
        (
            [src] => data:image/png;base64,1
        )

    [1] => Array
        (
            [src] => https://avatars2.githubusercontent1.com/u/12745270?s=52&amp;v=4
        )

)

regex for match all tag and extract the "src" attribute

3 Answers3