本文详解在 TamperMonkey 用户脚本中通过异步 XHR 获取页面内容后，安全、准确地执行正则匹配并提取捕获组的关键要点，重点解决因忽略异步执行顺序导致的 match() 返回 null 或空值问题。
本文详解在 tampermonkey 用户脚本中通过异步 xhr 获取页面内容后，安全、准确地执行正则匹配并提取捕获组的关键要点，重点解决因忽略异步执行顺序导致的 `match()` 返回 `null` 或空值问题。
在 TamperMonkey 脚本中调用 XMLHttpRequest（XHR）获取远程 HTML 内容时，必须将正则匹配逻辑置于 xhr.onload 回调内部——这是最常见也最关键的误区。由于 XHR 是异步操作，xhr.send() 后续代码会立即执行，而此时响应尚未返回，evidence 仍为空字符串，因此 evidence.match(...) 必然失败（返回 null），进而导致 .toString() 报错或显示 "null"。
以下是修正后的核心逻辑结构（精简关键部分）：
// ✅ 正确：匹配逻辑严格放在 onload 回调内
xhr.onload = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
const html = xhr.responseText;
const match = html.match(/portfolio-item__text-input-wide"[^>]*value="([^"]+)"/);
if (match && match[1]) {
const extractedTitle = match[1].trim(); // 提取第一个捕获组，并清理空白
console.log('Extracted title:', extractedTitle);
// 更新对应链接文本（注意：需确保 urls[i] 在闭包中可访问）
urls[i].textContent = extractedTitle;
} else {
console.warn('Regex did not match on:', urls[i].href);
}
} else {
console.error('XHR failed for', urls[i].href, 'Status:', xhr.status);
}
};
xhr.send();⚠️ 重要注意事项：
- 闭包陷阱：原始代码中 for (i = 0; i
- 正则健壮性：原正则 /portfolio-item__text-input-wide\" .*value=\"(.+)\"/ 中 .* 是贪婪且易受干扰的。推荐改写为非贪婪、属性边界明确的形式：/portfolio-item__text-input-wide"[^>]*value="([^"]+)"/，避免跨标签误匹配。
- 错误处理不可省略：始终检查 match 是否存在及 match[1] 是否有效，防止 null 解构异常。
- 批量请求限制：直接循环发起多个 XHR 可能触发浏览器并发限制或目标站反爬策略。生产环境建议添加节流（如 setTimeout 队列）或改用 fetch + Promise.allSettled 进行可控并发。
总结：TamperMonkey 中的 DOM 操作与网络请求需严格遵循“异步响应驱动”原则——所有依赖响应数据的逻辑（正则提取、DOM 更新、日志记录等）必须位于 onload / then() 回调内；同时善用现代 JavaScript 特性（let、可选链、try/catch）提升脚本鲁棒性。
