JavaScript 实现提取富文本中图片的 src 属性值

👨🏻‍💻 热爱摄影的程序员
👨🏻‍🎨 喜欢编码的设计师
🧕🏻 擅长设计的剪辑师
🧑🏻‍🏫 一位高冷无情的编码爱好者
大家好，我是 DevOps 工程师
欢迎分享 / 收藏 / 赞 / 在看！

【需求】给定一段富文本字符串，使用 JavaScript 编写一个方法，传入该字符串，返回包含图片 src 属性值的字符数组
【解决】
使用正则表达式匹配 <img> 标签并提取其中的 src 属性值。函数会返回一个包含所有图片 src 的字符数组。

function extractImageSrc(htmlString) {
  var imgSrcArray = [];
  var imgTagRegex = /<img[^>]+src=['"]([^'"]+)['"][^>]*>/g;
  var match;
  
  while ((match = imgTagRegex.exec(htmlString)) !== null) {
    var src = match[1];
    imgSrcArray.push(src);
  }
  
  return imgSrcArray;
}

// 示例用法
var htmlString = '<p><img src="http://www.baidu.com/share_20230531071219A001.png"></p><h1>Hello</h1>';
var result = extractImageSrc(htmlString);
console.log(result);
输出结果为：['http://www.baidu.com/share_20230531071219A001.png']