Safari原生查找不支持正则,需通过控制台执行JavaScript实现:一、用matchAll提取匹配项;二、注入脚本高亮文本;三、TreeWalker精准遍历可见文本节点;四、封装为书签脚本复用;五、结合CSS选择器限定区域匹配。

如果您在使用 Safari 浏览器进行页内搜索时,发现无法直接启用正则表达式匹配或执行高级文本模式定位,则可能是由于 Safari 原生查找框仅支持基础字符串匹配,不解析正则语法。以下是通过代码级手段实现 RegExp 精准匹配与 DOM 节点级高亮的多种技术路径:
一、开发者工具控制台执行正则匹配与结果提取
该方式绕过 UI 层限制,直接调用 JavaScript 的 matchAll() 与 textContent 接口遍历页面全部文本节点,返回结构化匹配数组,适用于调试与一次性精准提取。
1、按下 Command + Option + I 打开 Safari Web 检查器。
2、切换至“控制台”标签页,确保当前上下文为页面主框架(非 iframe 子帧)。
3、粘贴并执行以下通用匹配脚本(以提取所有十六进制颜色值为例):
Array.from(document.body.querySelectorAll("*")).flatMap(el => Array.from(el.textContent.matchAll(/#[0-9A-Fa-f]{6}|#[0-9A-Fa-f]{3}/g)) || []).map(m => m[0])
4、执行后控制台将输出去重后的完整匹配项数组,可复制用于后续分析。
二、注入正则高亮脚本实现页面内实时可视化标记
该方法在 DOM 中动态包裹匹配文本为 元素,并应用内联样式高亮,不依赖外部扩展,所有操作均在当前页面内存中完成,匹配精度达字符级。
1、在 Web 检查器控制台中粘贴以下高亮脚本(示例匹配 IPv4 地址):
const r = /\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\b/g;
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null);
let node;
while (node = walker.nextNode()) {
if (node.textContent.trim() && r.test(node.textContent)) {
const highlighted = node.textContent.replace(r, '$&');
const span = document.createElement('span');
span.innerHTML = highlighted;
node.replaceWith(span);
}
}
2、回车执行后,所有符合 IPv4 格式的文本将被黄色背景高亮标记。
3、如需清除高亮,刷新页面或执行 location.reload() 即可重置 DOM。
三、利用 TreeWalker 精确过滤文本节点避免 HTML 标签干扰
传统 innerText 或 textContent 在整页调用时易混入导航栏、脚本注释等非可视文本,而 TreeWalker 可严格限定遍历范围为用户实际可见的纯文本节点,排除 script、style、noscript 等无效区域。
1、在控制台中运行初始化语句:
const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, { acceptNode: node => {
if (node.parentElement && ['SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME'].includes(node.parentElement.tagName)) return NodeFilter.FILTER_REJECT;
if (node.textContent.trim().length === 0) return NodeFilter.FILTER_REJECT;
return NodeFilter.FILTER_ACCEPT;
} });
2、随后构建循环体:
let node, matches = [];
while (node = walker.nextNode()) {
const result = [...node.textContent.matchAll(/your-pattern-here/g)];
if (result.length) matches.push(...result.map(m => ({ text: m[0], offset: m.index, parent: node.parentElement?.tagName })));
}
3、执行后 matches 数组将包含每个匹配项的原始文本、在父节点中的起始偏移量及所属 HTML 标签名,可用于精确定位上下文。
四、构造可复用的正则查找函数封装为浏览器书签脚本
将正则匹配逻辑封装为单行 IIFE 函数,保存为书签 URL,点击即可在任意页面执行,无需每次打开控制台,适合高频使用的极客用户。
1、新建书签,URL 字段填入以下内容(已 URL 编码,适配 Safari):
javascript:(function(){const%20r=prompt(%22Enter%20regex%20pattern%20(e.g.%20%5Cb%5Cd%7B3%7D-%5Cd%7B2%7D-%5Cd%7B4%7D%5Cb)%22);if(!r)return;const%20matches=[...document.body.innerText.matchAll(new%20RegExp(r,%22g%22))];console.log(%22Found%20%22%2Bmatches.length%2B%22%20matches:%22,matches);})()
2、访问任意网页,点击该书签,弹出输入框输入正则表达式(如 \b\d{3}-\d{2}-\d{4}\b 匹配社保号格式)。
3、确认后匹配结果自动输出至控制台,含数量统计与原始匹配串。
五、结合 CSS 选择器预筛选目标区域再执行正则匹配
当目标文本集中于特定容器(如 .article-content 或 #main)时,先用 querySelectorAll 锁定 DOM 范围,可显著提升匹配效率并规避无关噪声。
1、在控制台中定义目标容器:
const container = document.querySelector('.article-content') || document.querySelector('#main') || document.body;
2、执行区域限定匹配(示例:提取容器内所有带单位的数字):
const text = container.textContent;
const values = [...text.matchAll(/[-+]?\d*\.?\d+\s*(?:px|em|rem|%|vh|vw|in|cm|mm|pt|pc)/g)].map(m => m[0]);
3、输出 values 数组,仅包含指定容器内的单位数值,无全局干扰项。











