PHP DOMDocument not replacing all images in string - php

Question

I have a function, that should replace imgs:
$content = '<img width="500" height="500" src="hhhh.jpg" /> AWDEQWE ASdAa <p>sdasdasdas</p> <img width="500" height="500" src="hhhh.jpg" /> <p>awedaweq</p>';
$document = new DOMDocument;
$document->loadHTML($content);
$imgs= $document->getElementsByTagName('img');
foreach ($imgs as $img) {
$src= $img->getAttribute('src');
$width= $img->getAttribute('width');
$height= $img->getAttribute('height');
$link= $document->createElement('a');
$link->setAttribute('class', 'player');
$link->setAttribute('href', $src);
$link->setAttribute('style', "display: block; width: {$width}px; height: {$height}px;");
$img->parentNode->replaceChild($link, $img);
}
return $document->saveHTML();
It works fine, but only for the first image.
What is wrong with my code?

Answer 1

The replaceChild method call will affect the live nodeList you are iterating over, and actually removes the node from $imgs. After this mutation the loop (i.e. the iterator underlying it) loses track on where it was in the original nodeList, and so the loop exits.
The solution is to first create a copy of $imgs into a standard array, and the loop over that:
foreach ($imgs as $img) {
$images[] = $img;
}
// now proceed with the loop you really want:
foreach ($images as $img) {
// ...etc
}

Answer 2

Your problem is with the counter, accessing the DOMNode is dynamic. You should touch the dom element above the counter.
$content = '<img width="400" height="400" src="asdf.jpg" /> AWDEQWE ASdAa <p>sdasdasdas</p> <img width="500" height="500" src="hhhh.jpg" /> <p>awedaweq</p>';
$document = new DOMDocument;
$document->loadHTML($content);
$imgs= $document->getElementsByTagName('img');
$i = $imgs->length - 1;
while ($i > -1)
{
$node = $imgs->item($i);
$link= $document->createElement('a');
$link->setAttribute('class', 'player');
$link->setAttribute('href', $node->getAttribute('src'));
$link->setAttribute('style', "display: block; width: {$node->getAttribute('width')}px; height: {$node->getAttribute('height')}px;");
$imgs->item($i)->parentNode->replaceChild($link, $node);
$i--;
}
var_dump($document->saveHTML());

Answer 3

I solved it that way:
$document = new DOMDocument;
$document->loadHTML(mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8'));;
$imgs = $document->getElementsByTagName('img');
$i = $imgs->length - 1;
while ($i > -1) {
$image = $imgs->item($i);
$ignore = false;
$width = $image->attributes->getNamedItem('width')->value;
$height = $image->attributes->getNamedItem('height')->value;
$src = $image->attributes->getNamedItem('src')->value;
$alt = $image->attributes->getNamedItem('alt')->value;
$class = $image->attributes->getNamedItem('class')->value;
$class = str_replace( array( "alignleft", "alignright" ), array( "amp_alignleft", "amp_alignright" ), $class );
$new_img = $document->createElement('amp-img', '');
$new_img->setAttribute('src', $src);
$new_img->setAttribute('class', $class);
$new_img->setAttribute('width', $width);
$new_img->setAttribute('height', $height);
$new_img->setAttribute('alt', $alt);
$new_img->setAttribute('layout', 'responsive');
$image->parentNode->replaceChild( $new_img, $image );
$i--;
}
return $document->saveHTML()