如何使用正则提取HTML标签src/href/data等属性中的链接

以下方案不需要引入任何HTML解析库，通过单个正则表达式即可一次性提取所有目标链接，性能远高于逐标签遍历的实现，完全覆盖列出的提取需求：

• 提取<a>标签的href属性链接
• 提取<img>标签的src、data-full-resolution两个属性的链接
• 提取<object>标签的data属性链接

正则表达式 #

使用时请开启**不区分大小写(i)、全局匹配(g)、单行模式(s)**三个匹配标志：

/(?:<!--[\s\S]*?-->|<(script|style)\b[^>]*>[\s\S]*?<\/\1>|<(?:a|img|object)\b[^>]*?(?:\b(href|src|data|data-full-resolution)=(["']?)(.*?)\3)[^>]*?(?:\b(href|src|data|data-full-resolution)=(["']?)(.*?)\6)?[^>]*?>)/gi

这个正则会自动跳过HTML注释、<script>、<style>标签内的内容，避免把这些区域里的相似文本误识别为链接。

结果提取规则 #

遍历所有全局匹配结果时，只需要提取非空的属性值即可：

• 第4个捕获组：匹配到的第一个目标属性的链接值
• 第7个捕获组：匹配到的第二个目标属性的链接值（仅img标签会出现该值，a、object标签该组为空）
  正则本身兼容属性值的三种常见写法：双引号包裹、单引号包裹、无引号直接书写，不会出现引号不配对的匹配错误。

效果验证 #

用提供的HTML结构做测试：

<a href="link1.html"></a>
<img src="img-preview.jpg" data-full-resolution="img-full.jpg" />
<object data="demo.swf"/>

最终提取到的链接列表为：

• link1.html（来自a标签href）
• img-preview.jpg（来自img标签src）
• img-full.jpg（来自img标签data-full-resolution）
• demo.swf（来自object标签data）
  即便是img标签的两个属性调换顺序，正则也能正常识别，不会漏匹配。

注意：该正则针对明确指定的提取场景做了性能优化，回溯成本极低，适合大体积HTML文档的快速提取；如果后续需要新增提取其他标签/属性，只需要在正则的标签名列表、属性名列表里追加对应值即可。

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