Как извлечь img src, title и alt из html с помощью php?

EDIT: теперь, когда я знаю лучше

Использование regexp для решения этой проблемы – плохая идея и, вероятно, приведет к недостижимому и ненадежному коду. Лучше использовать HTML-парсер .

Решение с регулярным выражением

В этом случае лучше разделить процесс на две части:

• получить все теги img
• извлекать метаданные

Я предполагаю, что ваш документ не является xHTML строгим, поэтому вы не можете использовать синтаксический анализатор XML. EG с этим исходным кодом на веб-странице:

 /* preg_match_all match the regexp in all the $html string and output everything as an array in $result. "i" option is used to make it case insensitive */ preg_match_all('/<img[^>]+>/i',$html, $result); print_r($result); Array ( [0] => Array ( [0] => <img src="/Content/Img/stackoverflow-logo-250.png" width="250" height="70" alt="logo link to homepage" /> [1] => <img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" /> [2] => <img class="vote-down" src="/content/img/vote-arrow-down.png" alt="vote down" title="This was not helpful (click again to undo)" /> [3] => <img src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" height=32 width=32 alt="gravatar image" /> [4] => <img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" /> [...] ) ) 

Затем мы получаем все атрибуты тега img с помощью цикла:

 $img = array(); foreach( $result as $img_tag) { preg_match_all('/(alt|title|src)=("[^"]*")/i',$img_tag, $img[$img_tag]); } print_r($img); Array ( [<img src="/Content/Img/stackoverflow-logo-250.png" width="250" height="70" alt="logo link to homepage" />] => Array ( [0] => Array ( [0] => src="/Content/Img/stackoverflow-logo-250.png" [1] => alt="logo link to homepage" ) [1] => Array ( [0] => src [1] => alt ) [2] => Array ( [0] => "/Content/Img/stackoverflow-logo-250.png" [1] => "logo link to homepage" ) ) [<img class="vote-up" src="/content/img/vote-arrow-up.png" alt="vote up" title="This was helpful (click again to undo)" />] => Array ( [0] => Array ( [0] => src="/content/img/vote-arrow-up.png" [1] => alt="vote up" [2] => title="This was helpful (click again to undo)" ) [1] => Array ( [0] => src [1] => alt [2] => title ) [2] => Array ( [0] => "/content/img/vote-arrow-up.png" [1] => "vote up" [2] => "This was helpful (click again to undo)" ) ) [<img class="vote-down" src="/content/img/vote-arrow-down.png" alt="vote down" title="This was not helpful (click again to undo)" />] => Array ( [0] => Array ( [0] => src="/content/img/vote-arrow-down.png" [1] => alt="vote down" [2] => title="This was not helpful (click again to undo)" ) [1] => Array ( [0] => src [1] => alt [2] => title ) [2] => Array ( [0] => "/content/img/vote-arrow-down.png" [1] => "vote down" [2] => "This was not helpful (click again to undo)" ) ) [<img src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" height=32 width=32 alt="gravatar image" />] => Array ( [0] => Array ( [0] => src="http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" [1] => alt="gravatar image" ) [1] => Array ( [0] => src [1] => alt ) [2] => Array ( [0] => "http://www.gravatar.com/avatar/df299babc56f0a79678e567e87a09c31?s=32&d=identicon&r=PG" [1] => "gravatar image" ) ) [..] ) ) 

Regexps имеют интенсивность процессора, поэтому вы можете захотеть кэшировать эту страницу. Если у вас нет системы кэширования, вы можете настроить свою собственную, используя ob_start и загрузку / сохранение из текстового файла.

Как это работает?

Во-первых, мы используем preg_ match_ all , функцию, которая получает каждую строку, соответствующую шаблону, и выдает ее в третьем параметре.

Регулярные выражения:

 <img[^>]+> 

Мы применяем его на всех веб-страницах html. Его можно прочитать, поскольку каждая строка, начинающаяся с « <img », содержит символ «>» и заканчивается символом «>» .

 (alt|title|src)=("[^"]*") 

Мы применяем его последовательно на каждом теге img. Он может быть прочитан как каждая строка, начинающаяся с «alt», «title» или «src», затем «=», затем «», «куча вещей, которые не являются» и заканчивается символом «», Изолируйте подстроки между () .

Наконец, каждый раз, когда вы хотите иметь дело с регулярными выражениями, полезно иметь хорошие инструменты для быстрого тестирования. Проверьте это онлайн-тестер регулярных выражений .

EDIT: ответьте на первый комментарий.

Это правда, что я не думал о людях (надеюсь, немногих), использующих одинарные кавычки.

Ну, если вы используете только «, просто замените все« на ».

Если вы смешиваете оба. Сначала вы должны пощекотать себя :-), затем попробуйте использовать («|») вместо «или [^ ø], чтобы заменить [^»].

 $url="http://example.com"; $html = file_get_contents($url); $doc = new DOMDocument(); @$doc->loadHTML($html); $tags = $doc->getElementsByTagName('img'); foreach ($tags as $tag) { echo $tag->getAttribute('src'); } 

Чтобы дать небольшой пример использования XML-функций PHP для задачи:

 $doc=new DOMDocument(); $doc->loadHTML("<html><body>Test<br><img src=\"myimage.jpg\" title=\"title\" alt=\"alt\"></body></html>"); $xml=simplexml_import_dom($doc); // just to make xpath more simple $images=$xml->xpath('//img'); foreach ($images as $img) { echo $img['src'] . ' ' . $img['alt'] . ' ' . $img['title']; } 

Я использовал метод DOMDocument::loadHTML() потому что этот метод может справиться с синтаксисом HTML и не заставляет входной документ быть XHTML. Строго говоря, преобразование в SimpleXMLElement необязательно – это просто упрощает использование xpath и xpath.

Используйте xpath.

Для php вы можете использовать simplexml или domxml

см. также этот вопрос

Если это XHTML, ваш пример, вам нужен только simpleXML.

 <?php $input = '<img src="/image/fluffybunny.jpg" title="Harvey the bunny" alt="a cute little fluffy bunny"/>'; $sx = simplexml_load_string($input); var_dump($sx); ?> 

Вывод:

 object(SimpleXMLElement)#1 (1) { ["@attributes"]=> array(3) { ["src"]=> string(22) "/image/fluffybunny.jpg" ["title"]=> string(16) "Harvey the bunny" ["alt"]=> string(26) "a cute little fluffy bunny" } } 

Сценарий должен быть отредактирован таким образом

foreach( $result[0] as $img_tag)

потому что preg_match_all возвращает массив массивов

RE это решение:

  $url="http://example.com"; $html = file_get_contents($url); $doc = new DOMDocument(); @$doc->loadHTML($html); $tags = $doc->getElementsByTagName('img'); foreach ($tags as $tag) { echo $tag->getAttribute('src'); } 

Как получить тег и атрибут из нескольких файлов / URL-адресов?

Для меня это не сработало:

  foreach (glob("path/to/files/*.html") as $html) { $doc = new DOMDocument(); $doc->loadHTML($html); $tags = $doc->getElementsByTagName('img'); foreach ($tags as $tag) { echo $tag->getAttribute('src'); } } 

Вы можете использовать simplehtmldom . Большинство селекторов jQuery поддерживаются в simplehtmldom. Пример приведен ниже

 // Create DOM from URL or file $html = file_get_html('http://www.google.com/'); // Find all images foreach($html->find('img') as $element) echo $element->src . '<br>'; // Find all links foreach($html->find('a') as $element) echo $element->href . '<br>'; 

Вот функция PHP, которую я скопировал вместе со всей вышеприведенной информацией для аналогичной цели, а именно, изменяя ширину и длину тегов изображения на лету … немного неуклюжий, возможно, но, похоже, работает надежно:

 function ReSizeImagesInHTML($HTMLContent,$MaximumWidth,$MaximumHeight) { // find image tags preg_match_all('/<img[^>]+>/i',$HTMLContent, $rawimagearray,PREG_SET_ORDER); // put image tags in a simpler array $imagearray = array(); for ($i = 0; $i < count($rawimagearray); $i++) { array_push($imagearray, $rawimagearray[$i][0]); } // put image attributes in another array $imageinfo = array(); foreach($imagearray as $img_tag) { preg_match_all('/(src|width|height)=("[^"]*")/i',$img_tag, $imageinfo[$img_tag]); } // combine everything into one array $AllImageInfo = array(); foreach($imagearray as $img_tag) { $ImageSource = str_replace('"', '', $imageinfo[$img_tag][2][0]); $OrignialWidth = str_replace('"', '', $imageinfo[$img_tag][2][1]); $OrignialHeight = str_replace('"', '', $imageinfo[$img_tag][2][2]); $NewWidth = $OrignialWidth; $NewHeight = $OrignialHeight; $AdjustDimensions = "F"; if($OrignialWidth > $MaximumWidth) { $diff = $OrignialWidth-$MaximumHeight; $percnt_reduced = (($diff/$OrignialWidth)*100); $NewHeight = floor($OrignialHeight-(($percnt_reduced*$OrignialHeight)/100)); $NewWidth = floor($OrignialWidth-$diff); $AdjustDimensions = "T"; } if($OrignialHeight > $MaximumHeight) { $diff = $OrignialHeight-$MaximumWidth; $percnt_reduced = (($diff/$OrignialHeight)*100); $NewWidth = floor($OrignialWidth-(($percnt_reduced*$OrignialWidth)/100)); $NewHeight= floor($OrignialHeight-$diff); $AdjustDimensions = "T"; } $thisImageInfo = array('OriginalImageTag' => $img_tag , 'ImageSource' => $ImageSource , 'OrignialWidth' => $OrignialWidth , 'OrignialHeight' => $OrignialHeight , 'NewWidth' => $NewWidth , 'NewHeight' => $NewHeight, 'AdjustDimensions' => $AdjustDimensions); array_push($AllImageInfo, $thisImageInfo); } // build array of before and after tags $ImageBeforeAndAfter = array(); for ($i = 0; $i < count($AllImageInfo); $i++) { if($AllImageInfo[$i]['AdjustDimensions'] == "T") { $NewImageTag = str_ireplace('width="' . $AllImageInfo[$i]['OrignialWidth'] . '"', 'width="' . $AllImageInfo[$i]['NewWidth'] . '"', $AllImageInfo[$i]['OriginalImageTag']); $NewImageTag = str_ireplace('height="' . $AllImageInfo[$i]['OrignialHeight'] . '"', 'height="' . $AllImageInfo[$i]['NewHeight'] . '"', $NewImageTag); $thisImageBeforeAndAfter = array('OriginalImageTag' => $AllImageInfo[$i]['OriginalImageTag'] , 'NewImageTag' => $NewImageTag); array_push($ImageBeforeAndAfter, $thisImageBeforeAndAfter); } } // execute search and replace for ($i = 0; $i < count($ImageBeforeAndAfter); $i++) { $HTMLContent = str_ireplace($ImageBeforeAndAfter[$i]['OriginalImageTag'],$ImageBeforeAndAfter[$i]['NewImageTag'], $HTMLContent); } return $HTMLContent; } 

Вы также можете попробовать SimpleXML, если HTML гарантированно будет XHTML – он проанализирует разметку для вас, и вы сможете получить доступ к атрибутам только по их имени. (Есть также библиотеки DOM, если это просто HTML, и вы не можете зависеть от синтаксиса XML.)

Вы можете написать регулярное выражение, чтобы получить все теги img ( <img[^>]*> ), а затем использовать простой взрыв: $res = explode("\"", $tags) , вывод будет примерно таким:

 $res[0] = "<img src="; $res[1] = "/image/fluffybunny.jpg"; $res[2] = "title="; $res[3] = "Harvey the bunny"; $res[4] = "alt="; $res[5] = "a cute little fluffy bunny"; $res[6] = "/>"; 

Если вы удалите тег <img перед взрывом, тогда вы получите массив в форме

 property= value 

поэтому порядок свойств не имеет значения, вы используете только то, что вам нравится.

Для этого я использовал preg_match.

В моем случае у меня была строка, содержащая ровно один <img> (и никакой другой разметки), который я получил из WordPress, и я пытался получить атрибут src чтобы я мог запустить его через timthumb.

 // get the featured image $image = get_the_post_thumbnail($photos[$i]->ID); // get the src for that image $pattern = '/src="([^"]*)"/'; preg_match($pattern, $image, $matches); $src = $matches[1]; unset($matches); 

В шаблоне, чтобы захватить название или alt, вы могли бы просто использовать $pattern = '/title="([^"]*)"/'; для захвата названия или $pattern = '/title="([^"]*)"/'; захватить альт. К сожалению, мое регулярное выражение недостаточно хорошо, чтобы захватить все три (alt / title / src) за один проход.

Вот решение, в PHP:

Просто скачайте QueryPath, а затем выполните следующие действия:

 $doc= qp($myHtmlDoc); foreach($doc->xpath('//img') as $img) { $src= $img->attr('src'); $title= $img->attr('title'); $alt= $img->attr('alt'); } 

Вот и все, все готово!

ниже код работал для меня в wordpress …

он извлекает все источники изображения из кода

 $search = "any html code with image tags"; preg_match_all( '/src="([^"]*)"/', $search, $matches); if ( isset( $matches ) ) { foreach ($matches as $match) { if(strpos($match[0], "src")!==false) { $res = explode("\"", $match[0]); $image = parse_url($res[1], PHP_URL_PATH); $xml .= " <image:image>\n"; $xml .= " <image:loc>".home_url().$image."</image:loc>\n"; $xml .= " <image:caption>".htmlentities($title)."</image:caption>\n"; $xml .= " <image:license>".home_url()."</image:license>\n"; $xml .= " </image:image>\n"; } } } 

ура!

 $content = "<img src='http://google.com/2af5e6ae749d523216f296193ab0b146.jpg' width='40' height='40'>"; $image = preg_match_all('~<img rel="imgbot" remote="(.*?)" width="(.*?)" height="(.*?)" linktext="(.*?)" linkhref="(.*?)" src="(.*?)" />~is', $content, $matches); 

Если вы хотите использовать regEx, почему бы не так просто:

 preg_match_all('% (.*)=\"(.*)\"%Uis', $code, $matches, PREG_SET_ORDER); 

Это вернет что-то вроде:

 array(2) { [0]=> array(3) { [0]=> string(10) " src="abc"" [1]=> string(3) "src" [2]=> string(3) "abc" } [1]=> array(3) { [0]=> string(10) " bla="123"" [1]=> string(3) "bla" [2]=> string(3) "123" } } 

Есть мое решение для извлечения только изображений из содержимого любой записи в wordpress или html-контенте. `

 $content = get_the_content(); $count = substr_count($content, '<img'); $start = 0; for ($i=0;$i<$count;$i++) { if ($i == 0){ $imgBeg = strpos($content, '<img', $start); $post = substr($content, $imgBeg); } else { $imgBeg = strpos($post, '<img', $start); $post = substr($post, $imgBeg-2); } $imgEnd = strpos($post, '>'); $postOutput = substr($post, 0, $imgEnd+1); $postOutput = preg_replace('/width="([0-9]*)" height="([0-9]*)"/', '',$postOutput); $image[$i] = $postOutput; $start= $imgEnd + 1; } print_r($image); 

`

  "] +>] +> /)?>" 

это приведет к извлечению тега привязки, вложенного тегом изображения

для одного элемента вы можете использовать это мини-решение с помощью DOMDocument. Обрабатывает кавычки как «и», так и проверяет html. Лучшая практика – использовать существующие библиотеки, а не собственное решение, используя регулярные выражения.

 $html = '<img src="/image/fluffybunny.jpg" title="Harvey the bunny" alt="a cute little fluffy bunny" />'; $attribute = 'src'; $doc = new DOMDocument(); @$doc->loadHTML($html); $attributeValue = @$doc->documentElement->firstChild->firstChild->attributes->getNamedItem($attribute)->value; echo $attributeValue; 

Как насчет использования регулярного выражения для поиска тегов img (что-то вроде "<img[^>]*>" ), а затем для каждого тега img вы можете использовать другое регулярное выражение для поиска каждого атрибута.

Может быть, что-то вроде " ([a-zA-Z]+)=\"([^"]*)\"" чтобы найти атрибуты, хотя вы можете позволить, чтобы кавычки не были там, если вы имеете дело с тегом суп … Если бы вы пошли с этим, вы могли бы получить имя и значение параметра из групп в каждом матче.

Возможно, это даст вам правильные ответы:

 <img.*?(?:(?:\s+(src)="([^"]+)")|(?:\s+(alt)="([^"]+)")|(?:\s+(title)="([^"]+)")|(?:\s+[^\s]+))+.*/>