How to replace image src in a dynamic HTML string with PHP

In this PHP Lesson, you will learn how to replace image src attribute from a dynamic HTML string using PHP methods.

Let's say we get products description from database and we have to decode any HTML tags from that description and display on front-end. See the following PHP code:

$data['description'] = html_entity_decode( $product_info['description'], ENT_QUOTES, 'UTF-8' );

It will return HTML something like this:

<div class="container">
 <div class="textleft">
  <p>
   <span style="font-size:medium">
    <strong>Product Name:</strong>
   </span>
   <br>
   <span style="font-size:14px">Some description here <a href="some-link">Click here to see full details.</a></span>
   </p>
 </div>
 <div class="imageblock">
  <a href="some-link">
   <figure><img src="image/catalog/image1.jpg" style="width: 500px; height: 150px;"></figure>
  </a>
 </div>
 <div style="clear:both">
</div>
<div class="container">
 <div class="textleft">
  <p>
   <span style="font-size:medium">
    <strong>Product Name:</strong>
   </span>
   <br>
   <span style="font-size:14px">Some description here <a href="some-link">Click here to see full details.</a></span>
   </p>
 </div>
 <div class="imageblock">
  <a href="some-link">
   <figure><img src="image/catalog/image2.jpg" style="width: 500px; height: 150px;"></figure>
  </a>
 </div>
 <div style="clear:both">
</div></div></div>

There could be so many images in the product description. I have added just 2 in my example.

Requirement: Replace src of every image with src="image/catalog/blank.gif" for all images and add a new attribute data-src that will be like data-src="http://myproject.com/image/catalog/image1.jpg"  for the image number 1 and data-src="http://myproject.com/image/catalog/image2.jpg" for the image number 2. How to assign the original src value of each image to its dynamically added data-src attribute ? 

Solutions:

The first solution to replace image src from dynamic HTML string using PHP is:

$data['description'] = html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8');

$doc = new DOMDocument();
$doc->loadHTML($data['description']);
$tags = $doc->getElementsByTagName('img');
foreach ($tags as $tag) {
    $old_src = $tag->getAttribute('src');
    $new_src_url = 'image/catalog/blank.gif';
    $tag->setAttribute('src', $new_src_url);
    $tag->setAttribute('data-src', $old_src);
}
$data['description'] = $doc->saveHTML();

Reference: http://php.net/manual/en/domdocument.getelementsbytagname.php

Here is another solution which is more simple and efficient:

For this you have to use a built-in function of PHP which is preg_replace. Capture the text you want using (parentheses), then reference to that group 1 using $1 or \1 in regular expression.

$product_description = html_entity_decode($product_info['description'], ENT_QUOTES, 'UTF-8');
$data['description'] = preg_replace('(src="(.*?)")', 'src="image/catalog/blank.gif" data-echo="$1"', $product_description);

I hope it may help someone. Please also check my other PHP Lessons.

Happy coding!!!

Haroon Ejaz

I am a Web Developer primarily focusing on PHP development with over 3 years experience and a Bachelors degree in Information Technology.