duanqinqiao4844 2018-08-28 14:31
浏览 87
已采纳

将data-mfp-src属性添加到图像标记PHP

his is the content:

<div class="image">
   <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
</div>

I want to use preg_replace to add data-mfp-src attribute (getting the value from the src attribute) to be the final code like this:

<div class="image">
   <img src="https://www.gravatar.com/avatar/" data-mfp-src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
</div>

This is my code and it's working without any issues but i want to use preg_replcae for some specific reasons:

function lazyload_images( $content ){
    $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");

    $dom = new DOMDocument;
    libxml_use_internal_errors(true);
    @$dom->loadHTML($content);
    libxml_use_internal_errors(false);

    $xpath = new DOMXPath($dom);
    foreach ($xpath->evaluate('//div[img]') as $paragraphWithImage) {
        //$paragraphWithImage->setAttribute('class', 'test');
        foreach ($paragraphWithImage->getElementsByTagName('img') as $image) {
            $image->setAttribute('data-mfp-src', $image->getAttribute('src'));
            $image->removeAttribute('src');
        }
    };

    return preg_replace('~<(?:!DOCTYPE|/?(?:html|head|body))[^>]*>\s*~i', '', $dom->saveHTML($dom->documentElement));
}
  • 写回答

1条回答 默认 最新

  • doutun9179 2018-09-06 01:10
    关注

    As a robust means of isolating the src value and setting the new attribute to this value, I'll urge you to avoid regex. Not that it can't be done, but that my snippet to follow won't break if more classes are added to the <div> nor if the <img> attributes are shifted around.

    Code: (Demo)

    $html = <<<HTML
    <div class="image">
       <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50">
    </div>
    HTML;
    
    $dom = new DOMDocument; 
    $dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
    $xpath = new DOMXPath($dom);
    // using a loop in case there are multiple occurrences
    foreach ($xpath->query("//div[contains(@class, 'image')]/img") as $node) {
        $node->setAttribute('data-mfp-src', $node->getAttribute('src'));
    }
    echo $dom->saveHTML();
    

    Output:

    <div class="image">
       <img src="https://www.gravatar.com/avatar/" alt="test" width="50" height="50" data-mfp-src="https://www.gravatar.com/avatar/">
    </div>
    

    Resources:


    Just to show you what the regex might look like...

    Find: ~<img src="([^"]*)"~

    Replace: <img src="$1" data-mfp-src="$1"

    Demo: https://regex101.com/r/lXIoFw/1 but again, I don't recommend it because it could silently let you down in the future.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?