Php: Find first img or object tag in string

Question

  function get_first_image(){
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches) || preg_match_all('/<object[0-9 a-z_?*=\":\-\/\.#\,<>\\n\\r\\t]+<\/object>/smi', $post->post_content, $matches);
      $first_img = $matches [1] [0];

      if(empty($first_img)){ //Defines a default image
        $mediaSearch = preg_match_all('/<object[0-9 a-z_?*=\":\-\/\.#\,<>\\n\\r\\t]+<\/object>/smi', $post->post_content, $matches2);
        $first_media = $matches2 [1] [0];
        $first_img = "/images/default.jpg";
      }

      if(!empty($first_img)){
        $result = "<div class=\"alignleft\"><img src=\"$first_img\" style=\"max-width: 200px;\" /></div>";
      }

      if(!empty($first_media)){
        $result = "<p>" . $first_media . "</p>";
      }

      return $result;
    }

hi guys, i just wanted to ask what could be the mistake i am doing in this code. i am currently trying to find the first occurence of an image tag or an object tag then return a piece of html if it matches one. i can currently get the image tag done right. but unfortunately i cant seem to have any results on an object tag. i am thinking there maybe some mistake in my regex pattern or something. can you guys help me out? i hope i made it clear enough for you to understand thanks.

Answer 1

Try this: (You need to define what you want to get in the matches array)

function get_first_image(){
      global $post, $posts;
      $first_img = '';
      ob_start();
      ob_end_clean();
      $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches) || preg_match_all('(/<object[0-9 a-z_?*=\":\-\/\.#\,<>\\n\\r\\t]+<\/object>)/smi', $post->post_content, $matches);
      $first_img = $matches [1] [0];

      if(empty($first_img)){ //Defines a default image
        $mediaSearch = preg_match_all('/<object[0-9 a-z_?*=\":\-\/\.#\,<>\\n\\r\\t]+<\/object>/smi', $post->post_content, $matches2);
        $first_media = $matches2 [1] [0];
        $first_img = "/images/default.jpg";
      }

      if(!empty($first_img)){
        $result = "<div class=\"alignleft\"><img src=\"$first_img\" style=\"max-width: 200px;\" /></div>";
      }

      if(!empty($first_media)){
        $result = "<p>" . $first_media . "</p>";
      }

      return $result;
    }

Answer 2

While regular expressions can be good for a large variety of tasks, I find it usually falls short when parsing HTML DOM. The problem with HTML is that the structure of your document is so variable that it is hard to accurately (and by accurately I mean 100% success rate with no false positive) extract a tag.

What I recommend you do is use a DOM parser such as SimpleHTML and use it as such:

function get_first_image(){
    global $post, $posts;

    require_once('SimpleHTML.class.php')

    $post_dom = str_get_dom($post->post_content);

    $first_img = $post_dom->find('img', 0);

    if($first_img !== null) {
     $first_img->style = $first_img->style . ';max-width: 200px';
     return '<div class="alignleft">' . $first_img->outertext . '</div>';
    } else {
     $first_obj = $post_dom->find('object', 0);

     if($first_obj !== null) {
      return '<p>' . $first_obj->outertext . '</p>';
     }
    }

    return '<div class="alignleft"><img src="/images/default.jpg" style="max-width: 200px;" /></div>';
}

Some may think this is overkill, but in the end, it will be easier to maintain and also allows for more extensibility. For example, using the DOM parser, I can add to the styles of your current image.

A regular expression could be devised to achieve the same goal but would be limited in such way that it would force the style attribute to be after the src or the opposite, and to overcome this limitation would add more complexity to the regular expression.

Also, consider the following. To properly match an <img> tag using regular expressions and to get only the src attribute (captured in group 2), you need the following regular expression:

<\s*?img\s+?[^>]*?\s*?src\s*?=\s*?(["'])((\\?+.)*?)\1[^>]*?>

And then again, the above can fail if:

• The attribute or tag name is in capital and the i modifier is not used.
• Quotes are not used around the src attribute.
• Another attribute then src uses the > character somewhere in their value.
• Some other reason I have not foreseen.

So again, simply don't use regular expressions to parse a dom document.