Regex: IMG TAG

As i said before, i wanna share my Regex code, to catch the file name in HTML IMG TAG. Let me explain why i create this Regex code. I have IMG TAG that i need to catch only the file name. I don't care about other attribute (ex. border="0") all i want just the file name inside the src attribute (ex. src="file/path/i_want_this.jpg");

First i have this code

HTML:
  1. <img src="file/path/to/file_name.jpg" border="0" alt="Test" title="Test" hspace="7" width="100" height="68" align="left" />

And i want to capture the file_name.jpg, i use this

CODE:
  1. <img src\s*="file/path/to/\s*(?:\'|")?(?P<srcvalue>[^\'">]*?)(?:\'|"|\\s) ([^>]*)>

After i get the file_name.jpg, i want to use it on hyperlink and also i want to change the path to absolute. The result should be like this

HTML:
  1. <a href="absolute_path/file_name.jpg"><img src="absolute_path/file_name.jpg" border="0" alt="Test" title="Test" hspace="7" width="100" height="68" align="left" /></a>

See, in HTML IMG TAG i just change the src attribute, i leave other attribute value like before. So i made some function in PHP using preg_replace to change that with Regex. Heres the code

PHP:
  1. function get_image($content){
  2.     $content = preg_replace('/<img src\\s*="file\/path\/to\/\\s*(?:\'|")?(?P<srcvalue>[^\'">]*?)(?:\'|"|\\s) ([^>]*)>/', '<a href="absolute_path/$1" target="_blank"><img src="absolute_path/$1" $2></a>', $content);
  3.     return $content;
  4. }

Thats it. You can modify the Regex to fulfill your need. FYI to get all the src value in HTML IMG TAG just change the Regex like this

CODE:
  1. <img src\s*="\s*(?:\'|")?(?P<srcvalue>[^\'">]*?)(?:\'|"|\\s) ([^>]*)>

Happy Coding ;)

6 comments so far

  1. ferdhie March 7, 2007 1:03 pm

    ups, fix some typos:
    pattern =
    PLAIN TEXTCODE:
    '/<img.*?src=([\'"])([^\1]+)\1/i'

    example:
    PLAIN TEXTPHP:
    $text = '<img width=200 src="file/path/i_want_this.jpg" height=100>';
    preg_match('/<img.*?src=([\'"])([^\1]+)\1/i', $text, $match);
    echo "src: $match[2]\\nbasename: ", basename($match[2]));

  2. wmatyzhycz May 31, 2007 12:48 am

    Hello! Good Site! Thanks you! drbputxviesgo

  3. Del May 31, 2007 10:08 pm

    Is it possible to extract more then one image from a string containing many images?

    I have yet to find a script that can work with all img tag syntax's!

    Thanks

  4. JOKERz May 31, 2007 10:32 pm

    Try it first mate....

  5. Olov February 27, 2008 4:30 pm

    The src-submatch was greedy, so if there is more than one -tag use this instead:
    <img.+?src=([\'"])([^\1]+?)\1

  6. JOKERz February 27, 2008 4:46 pm

    Thanx for your suggestion.



Leave a comment

Please be polite and on topic. Your e-mail will never be published.

:) :( :d :"> :(( \:d/ :x 8-| /:) :o :-? :-" :-w ;) [-( :)>- more »