JavaScript提取图片链接正则表达式

本文深入探讨了在JavaScript中高效、准确提取图片链接的多种正则表达式方案：从简洁可靠的基础模式（专精匹配HTTP(S)协议下的常见图片URL），到支持协议相对路径（//）和绝对路径（/）的增强版正则，再到生产环境强烈推荐的DOM解析优先策略；同时揭示了正则易误匹配HTML属性、引号包裹内容等陷阱，并给出去注释、URL校验、去重等实用防护技巧——无论你是快速处理纯文本还是严谨应对复杂HTML，都能找到兼顾准确性、兼容性与安全性的解决方案。

要从文本中提取所有图片链接，关键在于匹配常见的图片文件扩展名，并确保链接格式合理（如以 http、https 或相对路径开头）。下面提供实用、兼容性较好的正则模式及使用建议。

基础匹配模式（推荐）

适用于大多数 HTML 文本或纯文本中的图片 URL：

/https?:\/\/[^\s]+?\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff?)(?=\s|$)/gi

• 解释：匹配以 http:// 或 https:// 开头，后接非空白字符，以常见图片后缀结尾，且后跟空格或行尾的位置
• 优点：避免误匹配 CSS 背景 URL 或 JS 字符串中的干扰内容；(?=\s|$) 是正向先行断言，不消耗字符，保证截取完整链接
• 注意：不匹配 base64 图片或 data URL；也不处理相对路径（如 /images/logo.png），需额外补充

增强版（支持相对路径和常见协议）

若文本含相对路径、// 协议相对 URL 或 data: 图片，可扩展为：

/(https?:\/\/|\/\/|\/)[^\s]+?\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff?)(?=\s|$)/gi

• https?:\/\/：标准 HTTP(S) 链接
• \/\/：协议相对 URL（如 //cdn.example.com/img.png）
• \/：以斜杠开头的绝对路径（如 /assets/photo.jpg）
• 仍排除 query 参数过长导致截断的问题，实际中建议配合 URL 构造函数做二次校验

安全提取建议（避免误匹配）

正则易受上下文干扰（如 HTML 标签属性、引号包裹、注释等），生产环境建议：

• 对 HTML 字符串，优先用 DOM 解析（new DOMParser().parseFromString() + img.src 或 document.querySelectorAll('img')）
• 若必须用正则，先用 text.replace(//g, '') 去除 HTML 注释，再过滤掉引号内非 URL 内容（较难完美实现，慎用）
• 提取后可用 new URL(url, base) 尝试解析，捕获异常过滤非法链接

简单调用示例

直接提取并去重：

const text = "See https://a.com/1.png and /img/bg.svg. Also http://b.net/photo.jpeg?x=1";
const reg = /https?:\/\/[^\s]+?\.(jpg|jpeg|png|gif|webp|svg|bmp|tiff?)(?=\s|$)/gi;
const matches = [...text.matchAll(reg)].map(m => m[0]);
const uniqueUrls = [...new Set(matches)]; // 去重
console.log(uniqueUrls); // ['https://a.com/1.png', '/img/bg.svg', 'http://b.net/photo.jpeg']

注意：该示例中 /img/bg.svg 实际不会被基础正则匹配，需换用增强版正则才能捕获。

终于介绍完啦！小伙伴们，这篇关于《JavaScript提取图片链接正则表达式》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！