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.

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

报告相同问题?

悬赏问题

  • ¥115 用Java解决探地雷达dzt文件的解析过程
  • ¥20 有关神经网络这道(b)determine the parameters of neural network
  • ¥25 annaconda jvpyter
  • ¥20 来一个会抓包app支付接口的
  • ¥30 vivado2017.4的sdk打不开
  • ¥50 matlab,文献复现
  • ¥20 寻找Flink CDC指导,有偿咨询
  • ¥15 cruise如何仿真不同温度下车辆的经济性?
  • ¥20 扑克牌游戏的完整代码
  • ¥88 求帮安装Python架构的vnpy