sublime 的正则查找 svg 易漏错因默认不跨行且无递归支持;需勾选“dot matches newline”,用]*>[\s\s]*?|]*/>匹配多格式,并分步处理大文件或改用脚本。

为什么 Sublime 的 find 用正则提 SVG 经常漏掉或错位
因为 SVG 文件里常见嵌套标签(如 <g></g>、<defs></defs>)、换行缩进不规则、属性值含引号或转义,而 Sublime 默认的正则引擎不支持跨行匹配(. 不匹配换行符),也无递归语法。直接写 <svg.>.*?</svg.> 在多行 SVG 中基本失效。
实操建议:
- 先打开 Sublime 的「Find in Files」面板(
Ctrl+Shift+F/Cmd+Shift+F),勾选Regular Expression和Dot matches newline(关键!否则.不跨行) - 避免用
.*?匹配大段内容,改用否定字符集更稳,比如<svg>]*>[sS]*?</svg> - 如果 SVG 是内联在 HTML 或 JSX 中的,得先排除干扰——比如加负向先行断言:
(?)<svg>]*>[sS]*?</svg>(但 Sublime 不支持变长负向回溯,所以更可靠的是分步:先手动删掉<pre class="brush:php;toolbar:false;"></pre>块,再批量提取)
<svg></svg> 标签可能带命名空间或自闭合,怎么一并兼容
真实 SVG 源码中常见 <svg xmlns="http://www.w3.org/2000/svg"></svg>、<svg></svg>(XML 风格自闭合),甚至混用 <svg></svg>。单靠固定字符串无法覆盖。
推荐正则模式(已验证在 Sublime Text 4 可用):
<svg>]*>[sS]*?|<svg>]*/></svg></svg>
说明:
-
防止匹配到<svg-icon></svg-icon>这类伪标签 -
[^>]*安全捕获任意属性(包括空格、换行、等号前后空格),比.*?更少误吞闭合标签 - 用
|分支处理自闭合情况,Sublime 正则支持该语法 - 注意:此写法仍不处理
<svg></svg>大写变体,如需兼容,把开头改成,但会降低可读性,一般项目保持小写约定即可
提取后想保留原始缩进、去掉多余空行,怎么用替换功能净化
直接复制匹配结果常带前后空行、缩进混乱,影响后续粘贴到组件或 CSS 中使用。
替换建议(在 Find 面板中启用 Regular Expression):
- 去首尾空白行:
查找:^s*(<svg>)s*$</svg>
替换为:$1 - 合并连续空行(SVG 内部可能有空行,但前后不要):
查找:s*
替换为:(留一个空行分隔多个 SVG) - 如果想统一缩进为 2 空格(适合 React 组件内嵌):
先对每个匹配块单独操作:选中一个<svg></svg>块 →Ctrl+Shift+P→ 输入「Indentation: Reindent Lines」→ 回车
遇到 invalid regex 或匹配过长卡死怎么办
Sublime 对正则回溯深度有限制,尤其当文件超大(>5MB)或 SVG 嵌套极深时,[sS]*? 易触发回溯爆炸,导致无响应或报错。
应对方式:
- 拆分处理:用「Find in Files」限定目录 + 文件类型,例如
**/*.svg或**/icons/*.html,避免扫整个node_modules - 改用原子组(Sublime 支持
(?>...))减少回溯:<svg>]*>(?>[sS]*?)</svg>(但注意:原子组会让非贪婪失效,慎用;更稳妥是加边界提示,如<svg>]*>(?:(?!(?:svg|g|path)).)*</svg>) - 真正大批量处理(>100 个 SVG),别硬扛——导出匹配结果为文本,用 Python 脚本跑更稳:
re.findall(r'<svg>]*>[sS]*?</svg>', text, re.I | re.S)
最常被忽略的一点:Sublime 的「Find All」按钮(Alt+Enter)只作用于当前文件;批量提取必须用「Find in Files」,且「Where」字段不能为空——哪怕只填 . 表示当前文件夹。











