在Visual Studio中批量创建带不同图片源和值的单选框选项

方法1：用Emmet直接生成带动态值的选项 #

这是最省心的方式，Emmet自带动态序号生成功能，一步就能生成所有带唯一id/value/src/alt的选项：

在VS Code的HTML文件中输入以下Emmet代码，按Tab键即可生成96个选项：

(label.radio-select>input:radio[id="option-$0@" value="opt-$0@"]+img[src="img/opt-$0@.png" alt="选项$0@"])*96

• $0@会生成两位数的序号（01、02…96），如果不需要补零，直接用$@即可（1、2…96）
• 你可以根据实际需求修改id、value、src的格式，比如把option-$0@改成项目需要的命名规则

方法2：多光标+批量粘贴（新手友好） #

如果需要自定义分组值（比如前两个用ABC、第三第四用DEF），可以用这个直观的方法：

1. 先用Emmet生成96个空框架：

(label.radio-select>input:radio[id="" value=""]+img[src="" alt=""])*96

2. 选中第一个id引号内的空白处，按Ctrl+Shift+L，自动选中所有id引号内的位置（进入多光标模式）
3. 提前准备好文本列表，每行对应一个选项的id值，比如：

ABC
ABC
DEF
DEF
GHI
GHI
...

（总共96行，每两个相同值为一组）
4. 复制这个列表，回到VS Code直接粘贴，每个光标位置会自动填入列表对应的行内容
5. 重复步骤2-4，依次处理value、src、alt的内容

方法3：正则分组替换 #

针对你提到的正则替换需求，操作步骤如下：

1. 打开VS Code的替换面板（Ctrl+H），勾选右上角的「正则表达式」按钮（图标是.*）
2. 在查找框输入你的占位符正则：id-placeholder-\d\d
3. 点击「全部选中」（Alt+Enter），所有匹配的占位符会被选中，每个位置出现一个光标
4. 批量修改分组：
   • 按住Ctrl，用鼠标选中前两个光标，输入ABC
   • 再选中接下来两个光标，输入DEF
   • 重复操作直到所有分组替换完成

内容的提问来源于stack exchange，提问作者PsychedelicSeal