使用Sublime正则表达式批量提取SVG矢量图代码

雨枫小哥_9399

雨枫小哥_9399

2026-08-30

194人浏览

原创

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

使用sublime正则表达式批量提取svg矢量图代码

为什么 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>

说明:

Change Style AI
Change Style AI

一款面向照片风格转换的AI图像处理工具,可以将人物照片转化为不同视觉风格,适合头像和创意图片制作。

下载
  •  防止匹配到 <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」字段不能为空——哪怕只填 . 表示当前文件夹。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

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

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

2023.06.20

4216

8

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

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

2023.07.05

2741

4

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

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

2023.07.05

7542

9

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

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

2023.08.11

792

5

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

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

2023.08.31

520

5

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

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

2023.11.13

673

12

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

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

2023.11.17

386

3

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

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

2023.12.06

719

7

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

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

2024.02.23

312

5

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程