Get img tag details using preg_replace [PHP]

Question

This is my content:

<p><img src="http://localhost/contents/uploads/2017/11/1.jpg" width="215" height="1515"></p>

This is my PHP code:

function convert_the_content($content){
    $content = preg_replace('/<p><img.+src=[\'"]([^\'"]+)[\'"].*>/i', "<p class=\"uploaded-img\"><img class=\"lazy-load\" data-src=\"$1\" /></p>", $content);
    return $content;
}

I using my code to add a class for <p> tag and <img> tag and to convert src="" to data-src="".

The problem that my code has removed the width and the height attr from <img> tag, So my question is how can i change my code to work and getting this details with it too?

NOTE: My content may have many of <img> and <p> tags.

Gordon · Accepted Answer · 2017-11-30T08:00:15.303

If you only have this very exact HTML snippet, you can do it simpler by just doing

$html = <<< HTML
<p><img src="http://localhost/contents/uploads/2017/11/1.jpg" width="215" height="1515"></p>
HTML;

$html = str_replace('<p>', '<p class="foo">', $html);
$html = str_replace(' src=', ' data-src=', $html);
echo $html;

This will output

<p class="foo"><img data-src="http://localhost/contents/uploads/2017/11/1.jpg" width="215" height="1515"></p>

If you are trying to convert arbitrary HTML, consider using a DOM Parser instead:

<?php
$html = <<< HTML
<html>
  <body>
    <p><img src="http://localhost/contents/uploads/2017/11/1.jpg" width="215" height="1515"></p>
    <p><img width="215" height="1515" src="http://localhost/contents/uploads/2017/11/1.png"></p>
      <p   ><img
        class="blah"
            height="1515" 
            width="215"
       src="http://localhost/contents/uploads/2017/11/1.png"

       >
    </p>
  </body>
</html>
HTML;

$dom = new DOMDocument;
libxml_use_internal_errors(true);
$dom->loadHTML($html);
libxml_use_internal_errors(false);

$xpath = new DOMXPath($dom);
foreach ($xpath->evaluate('//p[img]') as $paragraphWithImage) {
    $paragraphWithImage->setAttribute('class', 'foo');
    foreach ($paragraphWithImage->getElementsByTagName('img') as $image) {
        $image->setAttribute('class', trim('bar ' . $image->getAttribute('class')));
        $image->setAttribute('data-src', $image->getAttribute('src'));
        $image->removeAttribute('src');
    }
};

echo $dom->saveHTML($dom->documentElement);

Output:

<html><body>
    <p class="foo"><img width="215" height="1515" class="bar" data-src="http://localhost/contents/uploads/2017/11/1.jpg"></p>
    <p class="foo"><img width="215" height="1515" class="bar" data-src="http://localhost/contents/uploads/2017/11/1.png"></p>
      <p class="foo"><img class="bar blah" height="1515" width="215" data-src="http://localhost/contents/uploads/2017/11/1.png"></p>
  </body></html>

No, it's not an exact HTML because that I want to use preg_replace, It's not possible to do what I need using preg_replace? — sadada dadasdad, Nov 30 '17 at 07:22
it is possible but very difficult to write reliable patterns for arbitrary html. dom parsers are simpler — Gordon, Nov 30 '17 at 07:25
@Gordon Unfortunately, I tried to argue OP to use DomDocument some questions back but without result :( — splash58, Nov 30 '17 at 07:43
@Gordon Thank you, But i think something wrong the code is working and add a class for
tag, yes but it's not changing anything for images it does not add a class for tag and not change src= to data-src= — sadada dadasdad, Nov 30 '17 at 07:46

Get img tag details using preg_replace [PHP]

1 Answers1