How to remove all images from html with dom

Question

I am trying to remove all images from an HTML string. I can only remove the first one and I don't know why.

the code:

<?php
$str='<div>
  <a href=
  "https://www.google.com">
  <img src=
  "image1.jpg"
  alt="image-1.jpg" /></a>
</div>
<p>
  hobby\'s vs hobbies&nbsp;
</p>
<div>
  <a href=
  "https://www.google.com">
  <img src=
  "image2.jpg"
  alt="image-2.jpg" /></a>
</div>';
$dom=new domDocument;
$dom->loadHTML($str);
$images=$dom->getElementsByTagName('img');
foreach($images as $image)
{
    $image->parentNode->removeChild($image);
}
$result=$dom->saveHTML();
echo '<textarea>'.$result.'</textarea>';    
?>

Answer 1

Check Marco Gamba answer

 // ...loading the DOM
    $dom = new DOMDocument();
    @$dom->loadHTML($string);  // Using @ to hide any parse warning sometimes resulting from markup errors
    $dom->preserveWhiteSpace = false;
    // Here we strip all the img tags in the document
    $images = $dom->getElementsByTagName('img');
    $imgs = array();
    foreach($images as $img) {
        $imgs[] = $img;
    }
    foreach($imgs as $img) {
        $img->parentNode->removeChild($img);
    }


    $str = $dom->saveHTML();

Answer 2

You could also do this by opening an html file using file_get_contents('file.html'); and writing to file with file_put_contents('file.html'); I used the following example, with a custom function

//get HTML File
$html_File_With_Images = file_get_contents('file.html_html');
//strip images
$html_file_without_Images = stripImages($html_file_with_images);
//save html file
fopen('file.html', 'W');//open file with write permission
file_put_contents('file.html', $html_file_without_Images);//this writes the contents to file
fclose('file.html');//always close files that you have opened to prevent memory leaks

    function stripImages($string)//Recursiveley removes images from an html string
    {
        $imageStart = strpos($string, "<img");//find "<img" in the html string
        $imageSubString = substr($string,$imageStart);//you need to isolate the end of the image, because images do not have end tags
        $imageLength = strpos($imageSubString, ">");//find the image end tag, which will be the first > charachter from the start of the tag
        $imageEnd = $imageStart + $imageLength + 1;//this integer points to where the image ends (+1 because of 0-indexing)
        $returnStart = substr($string,0,$imageStart);//this is the retun string, before the image
        $returnEnd = substr($string,$imageEnd);//this is the return string, after the image
        $return = $returnStart . $returnEnd;//this appends the $returnStart and $returnEnd strings into one string
        $test = strpos($return, "<img");//tests if there are more images in the string
        if($test !== false)//must use !== because strpos can return 0 (which looks false) if the searched string is at the start of the string
        {
            $return = stripImages($return);//this recursiveley runs the function until there are no more images to display
        }
        return($return);//output
    }

Answer 3

Foreach on the nodeList does not act as expected (it only gets the first element), you should loop it with an index instead

Answer 4

You can do this very easily if you use JQuery's remove() function.

$("img").remove();

I hope this helps.