Remove everything else from an image link but keep src

Question

I am trying to remove some atrtibutes from images but it removes only the name of atribute and keep the rest..

i have an image as shown bellow:

<img class="aligncenter size-full wp-image-sd174" src="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg" alt="alt title" srcset="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 700w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 241w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 624w" sizes="(max-width: 700px) 100vw, 700px" height="870" width="700">

I want to remove everything except <img src="image path">

i tried the code bellow but it removes only the name of atribute.. for e.g srcset.

$html = "<img class="aligncenter size-full wp-image-sd174" src="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg" alt="alt title" srcset="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 700w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 241w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 624w" sizes="(max-width: 700px) 100vw, 700px" height="870" width="700">";

$one = preg_replace('#(<img.+?)srcset=(["\']?)\d*\2(.*?/?>)#i', '$1$3', $html);
$two= preg_replace('#(<img.+?)sizes=(["\']?)\d*\2(.*?/?>)#i', '$1$3', $one);

I may be eisier to do it the other way around, and just take the src attribute and make a new `img`tag — Pevara, Jun 24 '16 at 22:42
If your string contains more then just a single image tag, you probably [shouldn't be using a regex](http://stackoverflow.com/questions/590747/using-regular-expressions-to-parse-html-why-not). HTML really needs to be parsed, have a look at the [DOMDocument](http://us.php.net/manual/en/class.domdocument.php) — Pevara, Jun 24 '16 at 23:03

score 3 · Accepted Answer · answered Jun 24 '16 at 23:09

Try this:

$html = preg_replace("/(<img\\s)[^>]*(src=\\S+)[^>]*(\\/?>)/i", "$1$2$3", $html);

It doesn't replace the unnecessary attributes, it extracts the src attribute with the opening and closing of the image tag.

It should work for any number of <img> tags in your html.

score 1 · Answer 2 · answered Jun 24 '16 at 23:10

I would suggest you the following approach.

Considering that every attribute have to be separated by space, you can split all attributes with a simple explode() function and then iterate to get the one you need and create you clean image tag.

function cleanImage($html) {
    $output = '';
    $image_components = explode(' ',$html);
    foreach($image_components as $component) {
        if(substr($component,0,4) == 'src=') {
            $output = '<img '.$component.">";
            break;
        }
    }
    return $output;
}


$html = '<img class="aligncenter size-full wp-image-sd174" src="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg" alt="alt title" srcset="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 700w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 241w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 624w" sizes="(max-width: 700px) 100vw, 700px" height="870" width="700">';

$image = cleanImage($html);

score 1 · Answer 3 · edited May 23 '17 at 12:32

You can use the DOM extension to properly manipulate a HTML structure.

It might be fine to use a regular expression for very simple cases but it won't be a complete solution regardless of how sophisticated it looks.

Stripping all <img> attributes with exception of src:

$html = '<img class="aligncenter size-full wp-image-sd174" src="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg" alt="alt title" srcset="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 700w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 241w, http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg 624w" sizes="(max-width: 700px) 100vw, 700px" height="870" width="700">';

echo stripImageAttributes($html);

Output:

<img src="http://www.blahblah.com/wp-content/uploads/2016/06/07d333r.jpg">

Definition of stripImageAttributes():

(It's designed to process HTML fragments, not complete documents.)

/** 
 * @param string $html
 * @return string 
 */ 
function stripImageAttributes($html)
{
    // init document
    $doc = new DOMDocument();
    $doc->loadHTML('<!doctype html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body>' . $html . '</body></html>');

    // init xpath
    $xpath = new DOMXPath($doc);

    // process images
    $body = $xpath->query('/html/body')->item(0);

    foreach ($xpath->query('//img', $body) as $image) {
        $toRemove = null;

        foreach ($image->attributes as $attr) {
            if ('src' !== $attr->name) {
                $toRemove[] = $attr;
            }
        }

        if ($toRemove) {
            foreach ($toRemove as $attr) {
                $image->removeAttribute($attr->name);
            }
        }
    }

    // convert the document back to a HTML string
    $html = '';
    foreach ($body->childNodes as $node) {
        $html .= $doc->saveHTML($node);
    }

    return $html;
}

Remove everything else from an image link but keep src

3 Answers3

Linked