Search code examples
phphtmldomdocument

Replace "Image" tag with "a" tag PHP DOMDocument

I have some HTML content like this 

<p><b style="margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Lato, Arial, Helvetica,
 sans-serif; vertical-align: baseline; color: rgb(89, 89, 89);">'60 Degrees South Bar and Grill'</b><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">&nbsp;
is an imaginative and quirky space that allows diners to enjoy the sea breeze and spectacular views of the Indian Ocean from three terraces. The bar and Grill is ideally situated in&nbsp;</span>
<b style="margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Lato, Arial, Helvetica,
 sans-serif; vertical-align: baseline; color: rgb(89, 89, 89);">Stone Town</b><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">&nbsp;on
 the Shangani strip, perfect for a 'sundowner' while watching a breathtaking sunset. Choose from a glass of wine from their international selection or a&nbsp;</span>
<p><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">
<img alt="" src="https://green.com/files/images/Restaurants/60%20Degrees%20South-2.jpg" style="width: 550px; height: 491px;"></span></p>
<p><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">
<img alt="" src="https://green.com/files/images/Restaurants/60%20Degrees%20South-2.jpg" style="width: 550px; height: 491px;"></span>
</p>

I want to replace all img tag with a tag i am using PHP DOMDocument.

$dom = new DOMDocument();
$dom->loadHTML($content);
foreach ($dom->getElementsByTagName('img') as $img) {
    $src = urldecode($img->getAttribute('src'));
    if (!empty($src)) {           
        $link = $dom->createElement('a', "Image");          
        $link->setAttribute('target', '_blank');
        $link->setAttribute('href', $src);
        $img->parentNode->replaceChild($link, $img);
    }
}
$dom->saveHTML();

This code will only replace only first img. How can i replace all img to a tag.

this is the output i am getting 

<p><b style="margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Lato, Arial, Helvetica,
 sans-serif; vertical-align: baseline; color: rgb(89, 89, 89);">'60 Degrees South Bar and Grill'</b><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">&nbsp;
is an imaginative and quirky space that allows diners to enjoy the sea breeze and spectacular views of the Indian Ocean from three terraces. The bar and Grill is ideally situated in&nbsp;</span>
<b style="margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Lato, Arial, Helvetica,
 sans-serif; vertical-align: baseline; color: rgb(89, 89, 89);">Stone Town</b><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">&nbsp;on
 the Shangani strip, perfect for a 'sundowner' while watching a breathtaking sunset. Choose from a glass of wine from their international selection or a&nbsp;</span>
<p><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">
<a target="_blank" href="https://green.com/files/images/Restaurants/60%20Degrees%20South-1.jpg">Image</a></span></p>
<p><span style="color: rgb(89, 89, 89); font-family: Lato, Arial, Helvetica, sans-serif;">
<img alt="" src="https://green.com/files/images/Restaurants/60%20Degrees%20South-2.jpg" style="width: 550px; height: 491px;"></span>
</p>

Solution

  • This is a case of when you alter the content of the document your iterating over a (your list of tags in $dom->getElementsByTagName('img')) then it will cause problems. The way to get round this is to use XPath which creates a new list of nodes (the XPath query //img means find any <img> tag), then iterate over this...

    $dom = new DOMDocument();
$dom->loadHTML($content);

$xp = new DOMXPath($dom);
foreach ($xp->query("//img") as $img) {