如何修改筛选代码匹配带/不带?t=timestamp参数的目标CSS文件

嘿，这个场景太常见了——缓存戳确实会搞乱资源匹配的逻辑。你不用纠结整个href的严格相等，换个思路，要么用浏览器原生的URL解析能力，要么用正则来忽略查询参数部分就行，给你两种靠谱的方案：

方案一：用URL API（推荐） #

这个方法最稳妥，因为它能帮你自动处理URL的各种结构，不用自己拼字符串或者写复杂正则：

const sheets = window.document.styleSheets;
// 这里写你要找的CSS文件的路径（不带查询参数）
const targetCssPath = '/css/my_wanted_file.css';

const mySheet = Array.from(sheets).filter(sheet => {
  // 先排除没有href的内嵌样式表，避免报错
  if (!sheet.href) return false;
  // 把样式表的href解析成结构化的URL对象
  const sheetUrl = new URL(sheet.href);
  // 只对比路径部分，自动忽略后面的查询参数（比如?t=xxx）
  return sheetUrl.pathname === targetCssPath;
});

原理很简单：URL对象的pathname属性只会保留文件的路径部分，不管后面跟了多少查询参数，都不会影响匹配结果，而且还能避免手动处理字符串时可能出现的各种边界问题。

方案二：用正则表达式 #

如果你的场景比较简单，也可以用正则来匹配结尾的文件名，忽略可选的查询参数：

const sheets = window.document.styleSheets;
// 正则匹配：结尾是目标CSS文件，后面可以带可选的查询参数
const targetCssRegex = /\/css\/my_wanted_file\.css(?:\?.*)?$/;

const mySheet = Array.from(sheets).filter(sheet => {
  return sheet.href && targetCssRegex.test(sheet.href);
});

这里的正则(?:\?.*)?表示“可选的问号开头的任意字符”，?:是不捕获分组，$确保匹配的是字符串的结尾，这样不管有没有?t=timestamp都能命中目标文件。

两种方法都能解决你的问题，个人更推荐URL API的方案，可读性和鲁棒性都更强～

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