如何将img标签重命名为amp-img且仅为amp-img设置自闭合不影响其他标签

你可以通过正则捕获组一次性完成替换，不会对其他标签产生影响，代码如下：

var content = '<div><img src="abcd" height="200" width="210"><img src="bcda" width="50" height="25"></div>';
// 单步完成替换，自动保留所有原有属性并添加自闭合标识
const result = content.replace(/<img([^>]+)>/g, '<amp-img$1/>');
console.log(result);

输出结果为：

<div><amp-img src="abcd" height="200" width="210"/><amp-img src="bcda" width="50" height="25"/></div>

如果你需要保留两步替换的写法，只需修改第二步的正则，仅匹配amp-img标签的闭合尖括号即可：

var content = '<div><img src="abcd" height="200" width="210"><img src="bcda" width="50" height="25"></div>';
let replace1 = content.replace(/<img/g, '<amp-img');
// 仅替换amp-img标签的结束尖括号
let replace2 = replace1.replace(/(<amp-img[^>]+)>/g, '$1/>');
console.log(replace2);

两种写法最终效果完全一致，所有非img标签的结构都不会被修改。

内容的提问来源于stack exchange，提问作者Riski Nurohman