如何将多个<img>标签批量替换为符合规范的<amp-img>标签？

To convert all <img> tags in your PHP string to valid <amp-img> tags (while preserving layout styles like float and margin), you can use preg_replace_callback to dynamically process each image tag. Here's how to do it:

Step-by-Step Code Implementation #

<?php 
$content_description = '<p><strong><em>They have added their own unique spin to marketing technology and convinced us that their refreshing understanding of the whys and wherefores of this rapidly growing industry is just one of the several ways to look at business. In this feature, we bring you the views of key executives who discuss how their ‘being’ pours into their professional personas&nbsp; </em></strong></p> <p style="text-align: center;"><span style="color:#FF8C00;font-size:21px;"><strong>How does being a woman as a part of an exponentially explosive marketing tech space help you to be better equipped to understand this constantly evolving sector through your unique perspective?</strong></span></p> <p><span style="color:#000080;"><strong>Nikki Nixon, Director #FlipMyFunnel at Terminus</strong></span></p> <p><img alt="" class="lazy" src="https://images.martechadvisor.com/images/uploads/ckimages/images/nikki_nixon_terminus_58c049be4adc8.jpg" style="float: left; width: 125px; height: 107px; margin: 3px;" />“Being a woman in marketing tech, coupled with being an introvert, has given me tremendous advantages. I’ve had the opportunity to grow two software companies in the space and be uniquely empathetic along the way. My introversion allows me to think critically about the pros and cons of a given tool beyond the surface sales pitch. It allows me to dig deeper and ask questions to determine if the tool will really solve my needs.”</p> <p><span style="color:#000080;"><strong>Jen Spencer, Vice President of Sales and Marketing at Allbound</strong></span></p> <p><img alt="" class="lazy" src="https://images.martechadvisor.com/images/uploads/ckimages/images/jen_square_58c049dae10c2.jpg" style="float: right; width: 125px; height: 103px; margin: 3px;" />“Since I’m a woman, and I’ve always been a woman, I don’t know any other way of being. I can’t begin to assume I know what makes me as a woman better suited to lead a sales and marketing team at a SaaS company than a man – except maybe that having had twins, I know I have more stamina than most. Getting by on 4 hours of sleep a night? No problem! Getting those 4 hours of sleep in 1 hour increments over a 12-hour period? I. Will. Win.<br />';

// Replace all <img> tags with <amp-img>
$content_description = preg_replace_callback('/<img\s+(.*?)\/>/i', function($matches) {
    $img_attrs = $matches[1];
    
    // Extract core attributes from the img tag
    preg_match('/src="([^"]*)"/', $img_attrs, $src_match);
    $src = $src_match[1] ?? '';
    
    preg_match('/alt="([^"]*)"/', $img_attrs, $alt_match);
    $alt = $alt_match[1] ?? '';
    
    // Extract width and height from inline style
    preg_match('/width:\s*(\d+)px;/', $img_attrs, $width_match);
    $width = $width_match[1] ?? '';
    
    preg_match('/height:\s*(\d+)px;/', $img_attrs, $height_match);
    $height = $height_match[1] ?? '';
    
    // Clean up the style: remove width/height, keep float/margin etc.
    $clean_style = preg_replace('/(width:\s*\d+px;|height:\s*\d+px;)/i', '', $img_attrs);
    preg_match('/style="([^"]*)"/', $clean_style, $style_match);
    $style = trim($style_match[1] ?? '');
    $style_attr = !empty($style) ? ' style="' . $style . '"' : '';
    
    // Build the valid amp-img tag
    return "<amp-img src=\"$src\" width=\"$width\" height=\"$height\" layout=\"responsive\" alt=\"$alt\"$style_attr></amp-img>";
}, $content_description);

// Output the modified content
echo $content_description;
?>

What This Code Does: #

1. Captures Each Image Tag: Uses a regex to target every <img> tag in the content string.
2. Extracts Key Attributes: Pulls out src, alt, width, and height values from the original tag.
3. Cleans Up Inline Styles: Removes width/height declarations from the style attribute (since AMP requires these as separate attributes) but keeps layout styles like float and margin.
4. Builds Valid <amp-img> Tags: Constructs the AMP-compliant image tag with required attributes (layout="responsive" ensures proper scaling across devices) and preserved layout styles.

Resulting AMP-Compliant Images: #

After running the code, your images will look like this:

<amp-img src="https://images.martechadvisor.com/images/uploads/ckimages/images/nikki_nixon_terminus_58c049be4adc8.jpg" width="125" height="107" layout="responsive" alt="" style="float: left; margin: 3px;"></amp-img>

<amp-img src="https://images.martechadvisor.com/images/uploads/ckimages/images/jen_square_58c049dae10c2.jpg" width="125" height="103" layout="responsive" alt="" style="float: right; margin: 3px;"></amp-img>

Notes: #

• AMP Requirements: Make sure your page includes the AMP boilerplate code (including the <script async src="https://cdn.ampproject.org/v0.js"></script> tag) to render AMP images correctly.
• Lazy Loading: The original class="lazy" is removed because AMP automatically handles lazy loading for images.

内容的提问来源于stack exchange，提问作者Vinayak Mali