编写正则提取HTML标签href/src属性遇匹配问题求助

原正则的问题分析 #

你写的正则里，^([http|https]:\/\/)这部分用了^行首锚定，但http/https开头的URL是在属性值的引号内部，并非行的起始位置，这直接导致协议部分无法被匹配到。另外整个正则的分组逻辑过于细碎，额外加了不少不必要的限制（比如([a-zA-Z]\w+)这类分组），反而打乱了匹配逻辑。

修正后的正则表达式 #

直接简化逻辑，聚焦于匹配属性值内符合后缀要求的URL：

(?:<script[^>]+src="|<a[^>]+href=")([^"]+\.(?:js|css|ts))"

正则说明 #

• (?:<script[^>]+src="|<a[^>]+href=")：非捕获组，用来匹配script标签的src属性或a标签的href属性的前缀部分，[^>]+匹配标签内除了闭合尖括号之外的所有内容，确保能定位到属性的引号开头。
• ([^"]+\.(?:js|css|ts))：捕获组，用来提取我们需要的URL。[^"]+匹配引号内除了引号之外的所有字符（不管是相对路径还是http/https开头的绝对路径都能覆盖），\.(?:js|css|ts)匹配指定的文件后缀，非捕获组用来避免多余的分组。
• "：匹配属性值的闭合引号，确保匹配的完整性。

测试验证 #

这个正则可以正确匹配你提到的所有场景：

1. 相对路径场景：

<script src="./script.js"/>
<script src="/script.js"/>
<script src="/my/custom/dir/script.js"/>
<a href="./style.css"/>

2. 绝对路径场景：

<script src="https://my.cdn.fav/script.js"/>
<script src="http://my.cdn.fav/script.js"/>
<a href="https://cdn.example.com/style.css"/>

额外提示 #

• 如果需要批量提取所有符合要求的URL，记得开启正则的全局匹配模式（g）。
• 如果HTML里属性值有用单引号的情况，可以把正则里的双引号换成['"]，同时结尾的引号也改成['"]，适配两种引号格式。

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