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

Recently, I had a situation where I need to get products description from database and decode any HTML in it like following in PHP and display it on webpage front-end:

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

It returns HTML like the following:

<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 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:

Here is the first solution that I did find for this.

$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

And, here is the second solution which is more efficient and simpler:

Use PHP 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 faced this problem and it took me some time to find this solution, so I hope it may help someone and save their time.

Happy coding!!!

3520cookie-checkHow to replace image src in a dynamic HTML string with PHP
Please share this post:

Haroon Ejaz

A Web Developer primarily focusing on PHP development with over 3 years experience and a Bachelors degree in Information Technology. With knowledge in both front-end and back-end, I am able to influence both sides of the Web building process. I have a love for complex coding functions and beautiful designs.

Leave a Reply

Your email address will not be published.

Please share, if you liked this blog :-)