如何用 <amp-img> 标签替换 HTML 中的 <img> 标签？

Question

我想将 HTML 页面变成 Google AMP 页面，但我遇到了这个问题，我有很多 <img> 我想变成 <amp-img> 标签。

比如我要转：

<img src='apa.png'><br>
hi bro <img src="c.png'>

变成这样的东西：

<amp-img src="apa.png" width="800" height="684" layout="responsive" alt="AMP"></amp-img><br/>
hi bro <amp-img src="c.png" width="800" height="684" layout="responsive" alt="AMP"></amp-img>

我曾尝试用 PHP 替换这些标签，但没用。

Answer 1

如果这个 HTML 出现在 HTML 文件中，那么您需要做的就是用 <amp-img width="800" height="684" layout="responsive" alt="AMP" src=

搜索替换 <img src=

如果您的编辑器能够使用正则表达式查找和替换，请在 FIND 上使用以下正则表达式：

 <img src=("|')(.*)'>

并在 REPLACE 之后：

<amp-img src="" width="800" height="684" layout="responsive" alt="AMP"</amp-img>

我用 Dreamwearver 试过了，它对我有用。

Answer 2

您可以使用 preg_replace 将模式替换为字符串 (http://php.net/manual/en/function.preg-replace.php)。

试试这个代码：

echo htmlentities(preg_replace(
    '/<img src="([^"]*)"\s*\/?>/', 
    '<amp-img src="" width="800" height="684" layout="responsive" alt="AMP"></amp-img>', 
    '<img src="apa.png"><br>hi bro <img src="c.png">'
));

Answer 3

我只是处于一种情况，我需要更改一个元字段（WordPress 自定义所见即所得字段）中的所有图像标签，我认为这可能对其他人有所帮助。这段代码基本上是这里发布的一些回复的组合，稍作修改，因为 <img> 标签在 src:

之前有额外的信息

   echo preg_replace(
        '/<img .*? src="([^"]*)" .*?>/', 
        '<amp-img src="" width="600" height="600" layout="intrinsic" alt="AMP"></amp-img>', 
        $meta_field_output
    );

Answer 4

经过一段时间的正则表达式测试，我找到了符合我需求的解决方案，

return preg_replace_callback('/<img[\s*]alt="([^"]*)"[\s*]src="([^"]*)"([\s*]?)((.*?)+?)>/',
function ($found) {
    $size = (getimagesize($found[2]));

    return '<amp-img src="' . $found[2] . '" width="'. $size[0] .'" height="' . $size[1] . '" layout="responsive" alt="' . $found[1] .'"></amp-img>';
}, $html);

如何用 <amp-img> 标签替换 HTML 中的 <img> 标签？

How can I replace <img> tags in HTML with <amp-img> tags?

php

google-amp