Safari浏览器页内搜索正则表达式高级文本查找代码级精准定位怎么开_Safari浏览器匹配规则极客写法

酷浩同学_8891

酷浩同学_8891

2026-05-14

1050人浏览

原创

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

safari浏览器页内搜索正则表达式高级文本查找代码级精准定位怎么开_safari浏览器匹配规则极客写法

如果您在使用 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;
} });

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

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 数组,仅包含指定容器内的单位数值,无全局干扰项。

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

4696

8

正则表达式不包含
正则表达式不包含

正则表达式,又称规则表达式,,是一种文本模式,包括普通字符和特殊字符,是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串,通常被用来检索、替换那些符合某个模式的文本。php中文网给大家带来了有关正则表达式的相关教程以及文章,希望对大家能有所帮助。

2023.07.05

3181

4

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

2023.07.05

8842

9

java正则表达式匹配字符串
java正则表达式匹配字符串

在Java中,我们可以使用正则表达式来匹配字符串。本专题为大家带来java正则表达式匹配字符串的相关内容,帮助大家解决问题。

2023.08.11

812

5

正则表达式空格
正则表达式空格

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。本专题为大家提供正则表达式相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

520

5

Python爬虫获取数据的方法
Python爬虫获取数据的方法

Python爬虫可以通过请求库发送HTTP请求、解析库解析HTML、正则表达式提取数据,或使用数据抓取框架来获取数据。更多关于Python爬虫相关知识。详情阅读本专题下面的文章。php中文网欢迎大家前来学习。

2023.11.13

693

12

正则表达式空格如何表示
正则表达式空格如何表示

正则表达式空格可以用“\s”来表示,它是一个特殊的元字符,用于匹配任意空白字符,包括空格、制表符、换行符等。想了解更多正则表达式空格怎么表示的内容,可以访问下面的文章。

2023.11.17

406

3

正则表达式中如何匹配数字
正则表达式中如何匹配数字

正则表达式中可以通过匹配单个数字、匹配多个数字、匹配固定长度的数字、匹配整数和小数、匹配负数和匹配科学计数法表示的数字的方法匹配数字。更多关于正则表达式的相关知识详情请看本专题下面的文章。php中文网欢迎大家前来学习。

2023.12.06

739

7

php正则表达式有哪些
php正则表达式有哪些

php正则表达式有"/pattern/"、"^"、"$"、"."、"[]"、"[^]"、"[a-z]"、"[A-Z]"、"[0-9]"、"\d"、"\D"、"\w"、"\W"、&a

2024.02.23

312

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21.3万人学习

JavaScript正则表达式基础与实战
JavaScript正则表达式基础与实战

共11课时 | 1.7万人学习

布尔教育正则表达式视频教程
布尔教育正则表达式视频教程

共14课时 | 5.1万人学习