PHP replace image src and add a new attribute in image tag from a string containing different html tags

Question

I have a site where i get products description from database and decode html like this in PHP and display it on webpage frontend:

$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">
   <img src="http://myproject.com/image/catalog/image1.jpg" style="width: 500px; height: 150px;" />
  </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">
   <img src="http://myproject.com/image/catalog/image2.jpg" style="width: 500px; height: 150px;" />
  </a>
 </div>
 <div style="clear:both">
</div>

There could be many images in the product description. I have added just 2 in my example. What I need to do is replace src of every image with src="image/catalog/blank.gif" for all images and add a new attribute

data-src="http://myproject.com/image/catalog/image1.jpg"

for image 1 and

data-src="http://myproject.com/image/catalog/image2.jpg"

for image 2. data-src attribute should get the original src value of each image. How can I achieve that? I have tried preg_replace like following

$data['description'] = preg_replace('((\n)?src="\b.*?")', 'src="image/catalog/blank.gif', $data['description']);

It replaces src attribute of every image, but how can i add data-src with original image path. I need this before page load, so is there any way to do it with PHP?

https://secure.php.net/manual/en/class.domdocument.php – Sammitch Mar 22 '19 at 17:56 — Sammitch, Mar 22 '19 at 17:56

score 3 · Accepted Answer · answered Mar 22 '19 at 18:20

Simply adjust your regular expression. Capture the text you want using (parentheses), then reference to that group 1 using $1 or \1.

preg_replace('(src="(.*?)")', 'src="image/catalog/blank.gif" data-src="$1"', $data['description']);

Demo: https://repl.it/repls/SpottedZanyDiscussion

Jamie Burton · Answer 2 · 2019-03-22T18:22:53.713

2

I think this might be what you are looking for:

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

$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();

I havn't tested this though, so don't just copy and paste.

edited Mar 22 '19 at 18:22

answered Mar 22 '19 at 18:02

Jamie Burton

481
2
7

i was trying this from few minutes, $data['description'] = $doc->saveHTML(); this is what i was missing. Thanks it worked out! – Haroon Mar 22 '19 at 18:31

PHP replace image src and add a new attribute in image tag from a string containing different html tags

2 Answers2