如何使用JavaScript正则表达式从字符串中提取图片URL？

实现思路 #

从混杂文本的字符串中提取图片URL，核心是用正则匹配http://开头、以常见图片后缀结尾的片段，同时通过非贪婪匹配避免多个URL被合并成一个结果。

具体代码实现 #

let str = 'any words abc sdf sdf http://test/files/1/1574322005738295297/2222681.jpeghttp://test/files/1/2040655876098/Image131607.png';
// 匹配指定格式的图片URL，全局提取
const imgRegex = /http:\/\/test\/files\/\d+\/\d+\/[^.]+\.(jpeg|png)/g;
const imgList = str.match(imgRegex) || [];

console.log(imgList);
// 输出结果：["http://test/files/1/1574322005738295297/2222681.jpeg", "http://test/files/1/2040655876098/Image131607.png"]

正则规则说明 #

• http:\/\/test\/files\/：匹配固定的URL前缀，斜杠需要转义处理
• \d+：匹配路径中的数字序列（对应示例里的ID部分）
• [^.]+：匹配文件名（除点号外的任意字符，避免提前匹配到后缀的点）
• \.(jpeg|png)：匹配指定的图片后缀，可根据需求添加jpg、gif等更多格式
• g：全局匹配标志，确保提取所有符合条件的URL

通用化调整 #

如果URL前缀不固定，或者需要支持更多图片格式，可以修改正则为：

// 适配任意http开头的图片URL，支持多种后缀
const generalImgRegex = /http:\/\/[^.]+\.(jpeg|png|jpg|gif|webp)/g;
const generalImgList = str.match(generalImgRegex) || [];

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