一、问题描述

今天搜集整理图标的时候遇到这样一个问题：

如上图所示，我有一组图标，图层名称【Component 3/icons/Map Marker/Line】是这样的命名方式的，而我想做的只是：让这组图标变成线性和面性两种方式，命名方法就为 Filled/图标名称或者Line/图标名称 ，即【Line/Map Marker】这样的，那么应该怎么操作呢？
image.png

二、分析步骤

1.去除Component 3/icons/这个前缀（因为前面前缀相同且多余，所以去除）
2.剩下Map Marker/Line替换成Line/Map Marker （难点，正则表达式）

三、分析1中的具体操作步骤

分析1中的操作，怎么批量去除Figma相同前缀？

1.选中需要操作的多个图层

image.png

2.按Figma内置的快捷键 ctrl+r 重命名

image.png

3.因为有相同的前缀Component 3/icons/，只需在第一行输入这个相同的前缀然后rename即可

具体操作看下图
image.png

4.操作结果显示

操作完了之后图层的命名方式成了【图层含义名称/线性&面性】，也就是【Map Marker/Line】这样的
image.png

四、分析2中的失败操作

观察分析可以得出，此时只需要把/前面的内容和/后面的内容替换即可，此处要用到正则表达式，Figma官方文档中正好有这个一个类似的demo：

demo地址：https://help.figma.com/hc/en-us/articles/360039958934-Rename-Layers
(注意官方文档中的代码有一个问题，即下图中第二行zA中间有空格，敲一个英文空格，否则会报错)

image.png

1.看我截图，官方demo是吧Icon_003更改成003_icon，引伸一下就可以想到怎么把Map Marker/Line替换成Line/Map Marker

2.图中圈出的第二处第三处的下划线_变成斜杠/即可

  1. 继续 ctrl+r 批量重命名
  2. 输入 ([a-z A-Z]+)/(\d+) 在 第一行。
  3. 键入 $2/$1 在 第二行 领域。

具体操作看下图
image.png
如果是普通的多个替换，上面的方法引伸一下基本就能替换了，但是我失败了,我都心灰意冷的觉得官方文档有错，因为毕竟已经错了一次，少了个空格；

继续分析：我看到了我的图中左侧名称中有空格，然后看了一下([a-z A-Z]+) 这个正则似乎不包含空格？（我只懂普通的html+css，这个正则我是真的一点都不懂。。。。）

我开始了我的胡乱操作了，执行分析中第一步，把所有的空格转换成_
image.png
执行了一次之后我发现还有空格，再执行一次，最多可能有3个空格，我只执行3次，具体多少次自己分析一下了
然后我执行了分析2中的第一步([a-z A-Z]+)/(\d+) 加上$2/$1，仍旧有问题，我开始发现问题根本不在这里

上面删除线的地方是我错误分析，不用看，找到根本原因
image.png
/左侧的图层里面不仅有大写，小写，还有多个空格等，([a-z A-Z]+)/(\d+) 这样的表达式明显不正确，前一个([a-z A-Z]+)表示包含大小写，后一个(\d+)表示 数字，问题就出在这里了。所以正则表达式的书写主要看重命名内容

五、正确操作

第一行：

  1. ([a-z A-Z 0-9\\\s]+)/([a-z A-Z 0-9\\ ]+)

第二行：

  1. $2/$1

image.png