使用所有属性重新打印<img>标记

Question

I'm reworking a WordPress plugin that I've made which specifies image dimensions that are missing width and/or height attributes.

As you can see in my current version on GitHub, I manually list all of the attributes for the <img> tag (L38). However, if a user were to add custom attribute, it would get omitted since it's not listed in my $attributes variable:

# Before
<img src="http://example.com/img.png" class="img" data-sample="test">
# After
<img src="http://example.com/img.png" class="img" width="100" height="30">

Creating a simple test file, I was able to update the regex to store all attributes that are found in the <img> tags. Yes, I'm aware of the recommendation to use DOMDocument, but it has caused more issues with WordPress in the past.

preg_match_all( '/(?:<img|(?<!^)\G)\h*([-\w]+)="([^"]+)"(?=.*?\/>)/', $content, $images );

In order to not fill up this post with too much code, I have the current working test file on my GitHub Gist here.

Using var_dump( $images );, this gives me the following output from my sample images (I added ... at the end of each array to save space):

    0 => 
      array (size=19)
        0 => string '<img src="https://placehold.it/250x100/99cc00/000.jpg?text=JPG"' (length=63)
        1 => string ' alt="JPG"' (length=10)
        2 => string '<img src="https://placehold.it/250x100.gif?text=GIF"' (length=52)
        ...
    1 => 
      array (size=19)
        0 => string 'src' (length=3)
        1 => string 'alt' (length=3)
        2 => string 'src' (length=3)
        ...
    2 => 
      array (size=19)
        0 => string 'https://placehold.it/250x100/99cc00/000.jpg?text=JPG' (length=52)
        1 => string 'JPG' (length=3)
        2 => string 'https://placehold.it/250x100.gif?text=GIF' (length=41)
        ...

My goal is to recreate the image tags with all of their attributes and values after the dimensions are calculated. From my tests, I've tried the following, but it hasn't given me the results I'm expecting:

foreach ( $images[1] as $attributes[1] => $value ) {
    echo( '< img ' . $value . '="' . 'value' . '" ><br>' );
}

Answer 1

Your Code:

$content = <<<EOT
<p>List of sample images.</p>
<img src="https://placehold.it/250x100/99cc00/000.jpg?text=JPG" alt="JPG" /><br>
<img src="https://placehold.it/250x100.gif?text=GIF" alt="GIF" /><br>
<img src="https://placehold.it/250x100/ff6600/000.png?text=PNG" alt="PNG" /><br>
<img class="no-ext" src="https://placehold.it/350x150?text=No Extension" alt="No Ext" /><br>
<img src="https://placehold.it/250x100.png" custom-attr="custom1" another-attr="custom2" /><br>
<img class="svg" src="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" alt="SVG" /><br>
<img class="webp" src="https://gstatic.com/webp/gallery/1.webp" width="100" alt="webP" /><br>
EOT;
# Find all content with <img> tags
preg_match_all( '/(?:<img|(?<!^)\G)\h*([-\w]+)="([^"]+)"(?=.*?\/>)/', $content, $images );
foreach ( $images[1] as $attributes[1] => $value ) {
    echo( '< img ' . $value . '="' . 'value' . '" ><br>' );
}

Solution:

//echo "<pre>"; print_r($images);
$temp = array();
foreach($images[0] as $key=>$img){    
    $pos = strpos($img,'<img');
    if($pos === false){
        $temp[$key_2][] = $img;
    }else{
        $temp[$key][] = $img;
        $key_2 = $key;
    }
}
foreach($temp as $k=>$v){
    $str[] = implode(' ', $v) . ' />';
}

$finalStr = implode('<br />', $str);

echo $finalStr;

Click here to check output