JavaScript如何用正则提取img标签所有src URL，支持原生与转义尖括号

需求说明 #

• 从任意HTML字符串中提取所有img标签的src属性对应的图片URL
• 同时支持两种格式的img标签：使用原生</>包裹、使用转义字符</>包裹

可直接运行的实现代码 #

const filterImages = str => {
  // 兼容原生/转义尖括号、原生/转义双引号的正则
  const imgRegExp = /(?:<|&lt;)img.*?src=(?:&quot;|")(.*?)(?:&quot;|").*?(?:>|&gt;)/g;
  const images = [];
  let img;
  while ((img = imgRegExp.exec(str))) {
    images.push(img[1]);
  }
  return images;
}

正则逻辑说明 #

非捕获组(?:xxx)的作用是匹配内容但不占用分组索引，保证第一个捕获组返回的就是src地址：

• 开头(?:<|&lt;)img：同时匹配<img和<img两种标签起始格式
• 中间.*?src=(?:"|")：非贪婪匹配到src属性起始位置，同时支持原生双引号"和转义双引号"
• 捕获组(.*?)：非贪婪匹配src属性的URL内容，避免跨属性/跨标签匹配
• 结尾(?:"|").*?(?:>|>)：匹配src属性的结束引号，以及标签剩余内容直到标签结束，兼容两种尖括号格式

使用示例 #

// 测试混合格式的HTML字符串
const testHtml = `
  <p>普通文本</p>
  <img src="https://test.com/photo1.png" alt="原生标签">
  <div>分隔内容</div>
  &lt;img src="https://test.com/photo2.png" alt="转义标签"&gt;
`;

const result = filterImages(testHtml);
console.log(result); 
// 输出结果：['https://test.com/photo1.png', 'https://test.com/photo2.png']

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