如何使用正则表达式匹配script标签与stylesheet类型的link标签

首先，你当前的link标签正则只匹配了**完全是<link rel="stylesheet">**这种极简形式的标签，但实际场景里stylesheet类型的link标签往往会附带href、media等其他属性，所以需要调整正则来兼容这种灵活的标签结构。

修正后的正则表达式 #

var re = /<(script\b[^>]*>([\s\S]*?)<\/script>|link\b[^>]*rel="stylesheet"[^>]*>)/gm;

调整逻辑说明 #

• script标签部分：保留了你原本的匹配逻辑，既能捕获外部引用的script标签，也能匹配内联脚本的script标签。
• link标签部分：
  • link\b：确保匹配的是link标签，避免和其他类似标签混淆
  • [^>]*：匹配rel属性之前的任意属性（比如href、media等）
  • rel="stylesheet"：精准锁定stylesheet类型的rel属性
  • [^>]*>：匹配rel属性之后的剩余属性，直到标签闭合

测试验证 #

用你提供的测试文本：

<link rel="preload" href="fonts/roboto-v27-latin/roboto-v27-latin-700.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="css/site.css" as="style"> <link rel="stylesheet" href="css/site.css" media="screen"> <script src="plugins/glider-js/glider.min.js"></script>

这个正则会成功匹配到两个目标标签：

1. 转义后的stylesheet link标签：<link rel="stylesheet" href="css/site.css" media="screen">
2. 转义后的script标签：<script src="plugins/glider-js/glider.min.js"></script>

额外优化提示 #

如果需要单独捕获stylesheet的href值，可以给对应部分添加捕获组，比如：

var re = /<(script\b[^>]*>([\s\S]*?)<\/script>|link\b[^>]*rel="stylesheet"[^>]*href="([^"]+)"[^>]*>)/gm;

这样第三个捕获组就能直接拿到stylesheet的URL路径了。

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