将HTML5 img转换为AMP amp-img并完成属性转换的技术需求

嘿，我来给你捋捋怎么在不用任何库类工具的前提下，搞定多HTML标签环境里的<img>转<amp-img>需求，分两种场景给你说：

1. 手动批量转换（适合少量HTML内容） #

如果你的HTML内容不多，手动替换是最直接的办法，步骤超简单：

• 把所有 <img> 标签的标签名改成 <amp-img>
• 从原标签的style属性里提取height:XXXpx和width:XXXpx的数值，转换成单独的height="XXX"和width="XXX"属性（注意去掉px单位）
• 把原标签的自闭合写法（/>）改成闭合标签（></amp-img>）

举个实际转换例子：
原标签代码：

<img src="https://techcrunch.com/wp-content/uploads/2015/04/codecode.jpg" style="height:404px; width:602px" />

转换后的<amp-img>标签：

<amp-img src="https://techcrunch.com/wp-content/uploads/2015/04/codecode.jpg" height="404" width="602"></amp-img>

2. 原生JavaScript批量处理（适合大量HTML内容） #

如果要处理的HTML内容很多，用原生JS写个小工具就能批量搞定，分两种场景：

浏览器端直接处理DOM元素 #

如果是在网页里直接替换页面上的img标签，可以这么写：

// 抓取页面上所有的img元素
const allImgs = document.querySelectorAll('img');

allImgs.forEach(imgElement => {
  // 创建新的amp-img元素
  const ampImgElement = document.createElement('amp-img');
  
  // 复制原img的src属性
  ampImgElement.src = imgElement.src;
  
  // 从style中提取高度和宽度（转成整数）
  const computedStyle = getComputedStyle(imgElement);
  ampImgElement.height = parseInt(computedStyle.height);
  ampImgElement.width = parseInt(computedStyle.width);
  
  // 别忘了复制alt属性（对无障碍访问很重要）
  if (imgElement.alt) {
    ampImgElement.alt = imgElement.alt;
  }
  
  // 用新的amp-img替换原来的img
  imgElement.parentNode.replaceChild(ampImgElement, imgElement);
});

纯字符串处理（Node.js或静态HTML文本场景） #

如果是处理HTML字符串（比如在Node.js里批量处理文件内容），可以用正则表达式匹配替换：

function convertImgsToAmpImgs(htmlString) {
  // 正则匹配符合格式的img标签，捕获src、height数值、width数值
  const imgRegex = /<img\s+src="([^"]+)"\s+style="height:(\d+)px;\s*width:(\d+)px"\s*\/?>/gi;
  
  // 替换成标准的amp-img标签
  return htmlString.replace(imgRegex, '<amp-img src="$1" height="$2" width="$3"></amp-img>');
}

// 测试一下
const originalHtml = '<div class="content"><img src="https://techcrunch.com/wp-content/uploads/2015/04/codecode.jpg" style="height:404px; width:602px" /></div>';
const convertedHtml = convertImgsToAmpImgs(originalHtml);
console.log(convertedHtml);

小贴士：如果你的img标签还有其他属性（比如class、title），可以扩展正则表达式来捕获这些属性，或者在替换逻辑里保留它们，确保转换后的标签功能完整。

必须注意的关键点 #

• AMP的硬性要求：<amp-img>必须明确指定height和width的整数值，不能用百分比、em等单位，也不能省略
• 闭合标签规范：<amp-img>必须用完整的闭合标签，不能像<img>那样用自闭合写法
• 无障碍属性：记得保留原img的alt属性，这对网站的无障碍访问很重要

内容的提问来源于stack exchange，提问作者Christian López Carretero