source

html에서 php를 사용하여 img src, title 및 alt를 추출하는 방법은 무엇입니까?

gigabyte 2023. 1. 22. 22:28
반응형

html에서 php를 사용하여 img src, title 및 alt를 추출하는 방법은 무엇입니까?

제 웹사이트에 있는 모든 이미지를 제목과 대체 표현으로 나열하는 페이지를 만들고 싶습니다.

HTML을 모두 을 이미 했지만, 은 HTML 파일을 해야 할지 .src,title ★★★★★★★★★★★★★★★★★」alt ada HTML에서:

<img src="/image/fluffybunny.jpg" title="Harvey the bunny" alt="a cute little fluffy bunny" />

어느 정도 정규식을 사용하는 것이 좋겠지만, 태그의 순서가 다를 수 있기 때문에, 모두 우아하게 해석하는 방법을 잘 모릅니다(어려운 것은 char로 할 수 있지만, 그것은 괴롭습니다).

$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');
}

편집: 이제 더 잘 알게 되었으니

이러한 문제를 해결하기 위해 regexp를 사용하는 것은 좋지 않은 생각이며 유지보수가 불가능하고 신뢰할 수 없는 코드가 될 수 있습니다.HTML 파서를 사용하는 것이 좋습니다.

regexp를 사용한 솔루션

이 경우 프로세스를 두 부분으로 나누는 것이 좋습니다.

  • 모든 것을 손에 넣다
  • 메타데이터를 추출하다

당신의 문서는 xHTML이 엄격하지 않기 때문에 XML 파서를 사용할 수 없다고 가정합니다.예: 이 웹 페이지 소스 코드:

/* 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는 CPU를 많이 사용하기 때문에 이 페이지를 캐시할 수 있습니다.캐시 시스템이 없는 경우 ob_start를 사용하여 텍스트 파일에서 로드/저장하여 자신의 시스템을 조정할 수 있습니다.

이 물건들은 어떻게 작동하나요?

먼저 preg_match_all을 사용합니다.이 함수는 패턴과 일치하는 모든 문자열을 가져와 세 번째 파라미터로 출력합니다.

regexps:

<img[^>]+>

모든 html 웹페이지에 적용하고 있습니다."로 시작하는 <img모든 문자열에 ">" 이외의 문자가 포함되어 있고 >로 끝나는 문자열로 읽을 수 있습니다.

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

각 img 태그에 순차적으로 적용합니다."alt", "src"로 시작하는 모든 문자열, "="로 시작하는 문자열, ""가 아닌 ""로 끝나는 문자열, 그리고 ""로 읽을 수 있습니다. 하위 문자열은 () 사이에서 구분하십시오.

마지막으로 regexps를 다룰 때마다 신속하게 테스트할 수 있는 좋은 도구를 갖추면 편리합니다.이 온라인 regexp 테스터를 확인합니다.

EDIT : 첫 번째 코멘트에 응답합니다.

작은 따옴표를 사용하는 (희망하는) 사람들에 대해서는 생각하지 않았던 것은 사실이다.

음, ' 만을 사용하는 경우 모든 ' '를 '로 바꿉니다.

둘 다 섞으면.먼저 :- 를 누른 후 ('|') 또는 [^ö]를 사용하여 [^]를 바꿉니다.

작업에 PHP의 XML 기능을 사용하는 간단한 예를 들어 보겠습니다.

$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-syntax에 대처할 수 있고 입력 문서를 XHTML로 강제하지 않기 때문에 메소드.SimpleXMLElement꼭 필요한 것은 아닙니다.xpath 를 사용하면, xpath 의 사용법과 xpath 의 결과가 보다 심플하게 됩니다.

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"
  }
}

preg_match를 사용하여 실행했습니다.

제 경우엔, 정확히 한 개가 들어 있는 끈이 있었어요<img>Wordpress에서 얻은 태그(다른 마크업 없음)를 취득하려고 했습니다.srctimthumb에서 실행할 수 있도록 속성을 지정합니다.

// 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);

제목이나 얼트를 잡기 위한 패턴에서는 간단히 사용할 수 있습니다.$pattern = '/title="([^"]*)"/';타이틀을 거머쥐다$pattern = '/title="([^"]*)"/';알트를 잡으려고요안타깝게도 제 정규식은 한 번의 패스로 세 개(alt/title/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>';

스크립트는 이렇게 편집해야 합니다.

foreach( $result[0] as $img_tag)

preg_match_all이 어레이 어레이를 반환하기 때문에

여기 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;

}

돔 파서를 사용하는 것은 불필요한 오버헤드라고 불평하는 코멘트를 이 페이지에서 많이 읽었습니다.단순한 regex 콜보다 비용이 많이 들 수 있지만 OP에서는 img 태그 속성의 순서를 제어할 수 없다고 합니다.이 사실로 인해 불필요한 정규식 패턴 변환이 발생합니다.또한 돔 파서를 사용하면 가독성, 유지보수성 및 돔 인식(regex는 돔 인식을 지원하지 않음)이라는 추가적인 이점을 얻을 수 있습니다.

저는 regex를 좋아하고 많은 regex 질문에 대답합니다만, 유효한 HTML을 취급할 때는 파서를 통해 regex를 작성할 충분한 이유가 거의 없습니다.

다음 데모에서는 DOMDocument가 img 태그 속성을 얼마나 쉽고 깔끔하게 처리하는지 보여 줍니다.따옴표는 전혀 사용하지 않습니다.또한 대상 속성이 없는 태그는 전혀 중단되지 않으며 빈 문자열이 값으로 제공됩니다.

코드: (데모)

$test = <<<HTML
<img src="/image/fluffybunny.jpg" title="Harvey the bunny" alt="a cute little fluffy bunny" />
<img src='/image/pricklycactus.jpg' title='Roger the cactus' alt='a big green prickly cactus' />
<p>This is irrelevant text.</p>
<img alt="an annoying white cockatoo" title="Polly the cockatoo" src="/image/noisycockatoo.jpg">
<img title=something src=somethingelse>
HTML;

libxml_use_internal_errors(true);  // silences/forgives complaints from the parser (remove to see what is generated)
$dom = new DOMDocument();
$dom->loadHTML($test);
foreach ($dom->getElementsByTagName('img') as $i => $img) {
    echo "IMG#{$i}:\n";
    echo "\tsrc = " , $img->getAttribute('src') , "\n";
    echo "\ttitle = " , $img->getAttribute('title') , "\n";
    echo "\talt = " , $img->getAttribute('alt') , "\n";
    echo "---\n";
}

출력:

IMG#0:
    src = /image/fluffybunny.jpg
    title = Harvey the bunny
    alt = a cute little fluffy bunny
---
IMG#1:
    src = /image/pricklycactus.jpg
    title = Roger the cactus
    alt = a big green prickly cactus
---
IMG#2:
    src = /image/noisycockatoo.jpg
    title = Polly the cockatoo
    alt = an annoying white cockatoo
---
IMG#3:
    src = somethingelse
    title = something
    alt = 
---

이 기술을 프로페셔널 코드로 사용하면, 스크립트를 깔끔하게 작성할 수 있게 되어, 트러블 슈팅이 적어집니다.또, 다른 곳에서 일하고 싶다고 생각하는 동료도 적어집니다.

PHP의 솔루션은 다음과 같습니다.

QueryPath를 다운로드한 후 다음을 수행합니다.

$doc= qp($myHtmlDoc);

foreach($doc->xpath('//img') as $img) {

   $src= $img->attr('src');
   $title= $img->attr('title');
   $alt= $img->attr('alt');

}

됐어, 넌 끝났어!

언급URL : https://stackoverflow.com/questions/138313/how-to-extract-img-src-title-and-alt-from-html-using-php

반응형

'source' 카테고리의 다른 글

django 관리자가 필드를 NULL로 설정할 수 있도록 하려면 어떻게 해야 합니까?  (0) 2023.01.22
PHP의 연결 풀링  (0) 2023.01.22
요소를 기준으로 마우스 위치 찾기  (0) 2023.01.22
mysql 데이터베이스의 사이즈는 어떻게 취득합니까?  (0) 2023.01.22
배열의 모든 값이 동일한지 확인합니다.  (0) 2023.01.12

'source'의 다른글

  • 현재글html에서 php를 사용하여 img src, title 및 alt를 추출하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바