直接搜索<div>会漏掉带属性的<div class="container">，因为普通文本搜索仅匹配字面字符串，无法覆盖空格、换行、属性顺序、引号差异等HTML结构变体；必须启用正则模式（如<div[^>]*>）才能通配匹配。
为什么直接搜 <div> 会漏掉带属性的 <div class="container">
因为普通文本搜索只匹配字面字符串，而 HTML 标签结构多变：可能有空格、换行、属性顺序不同、自闭合写法等。比如 <div id="a"> 和 <div\n class="x"> 在纯文本搜索里根本不会被同时命中。必须启用正则模式，才能用通配逻辑覆盖这些变体。
在 VS Code / Sublime / Notepad++ 中启用正则搜索的实操要点
不同编辑器触发方式略有差异，但核心一致：
- VS Code：按
Cmd+Shift+F（Mac）或Ctrl+Shift+F（Win/Linux）→ 点击查找框左侧的.*图标（或按Alt+R） - Sublime Text：
Cmd+Shift+F→ 勾选右下角Regular expression复选框 - Notepad++：菜单栏“搜索”→“在文件中查找”→ 勾选
匹配正则表达式 -
关键提醒：不点开/勾选正则开关，你写的
<div[^>]*>就只是普通字符串，不会被解析为模式
常用正则模式与易错点对照
以下模式均需在正则模式下使用，注意大小写和边界处理：
- 找所有
<img>标签：<img[^>]*>—— 别漏[^>]*，否则会跨标签匹配到<img><script>中间部分 - 找含
class="header"的任意标签：<[^>]+class=["'][^"']*header[^"']*["'][^>]*>—— 单双引号都要兼容，["']比硬写"或'更鲁棒 - 提取所有
href值：href=["']([^"']+)["']—— 用括号捕获组，替换时可用$1引用内容 -
致命错误：写
<div>匹配<div class="x">→ 永远失败；写<div.*?>而不加g标志 → 只匹配第一个，且贪婪模式可能吞掉整个文档头
浏览器开发者工具里 Ctrl+F 为什么有时找不到动态插入的元素
Elements 面板的 Ctrl+F 搜索的是当前渲染后的 DOM 树，但它只搜索已展开的节点文本内容，不执行 JavaScript 解析。典型失效场景：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 渲染的组件未挂载完成时，对应 DOM 还不存在
- 元素被
display: none或visibility: hidden隐藏，虽在 DOM 中但不参与文本搜索 - 搜索
data-id="123"时，面板默认只索引标签名和属性名，不索引属性值（除非你手动输入完整属性字符串） - 更可靠的方式是切到 Console，运行
document.querySelectorAll('[data-id="123"]')—— 它走原生选择器引擎，不依赖界面状态
正则搜索不是万能的，它在 HTML 上本质是“字符串层面的近似匹配”。真正要精确操作结构（比如删掉所有 <script> 但保留注释），必须用 DOM API 如 createNodeIterator 或 querySelectorAll；正则只适合预览、定位、批量文本修正这类低风险动作。
