如何在VSCode中查找含i18n属性的HTML标签并包裹静态文本？

正则查找替换方案 #

直接在VSCode的查找替换面板中使用以下正则规则，即可批量完成需求：

1. 查找正则（支持单行/多行文本）

<(\w+)([^>]*)\si18n([^>]*)>([\s\S]+?)<\/\1>

2. 替换模板

<$1$2 i18n$3>{$4 | odd}</$1>

操作步骤 #

• 打开VSCode的查找替换面板：按下Ctrl+H（Windows/Linux）或Cmd+H（Mac）
• 勾选面板右侧的「正则表达式」按钮（图标为.*）
• 将上面的查找正则粘贴到「查找」输入框，替换模板粘贴到「替换」输入框
• 点击「替换全部」即可批量处理所有符合条件的标签

正则说明 #

• <(\w+)：捕获HTML标签名（如p、div、span），确保闭合标签与开始标签一致
• ([^>]*)\si18n([^>]*)：匹配标签内i18n属性前后的任意其他属性（支持带i18n的标签同时有class、id等属性）
• ([\s\S]+?)：非贪婪捕获标签内的所有文本（包括换行符，适配多行文本场景）
• <\/\1>：匹配与开始标签对应的闭合标签，避免错误匹配其他标签

示例验证 #

输入：

<p i18n>something</p>
<div class="content" i18n>hello multi-line
text</div>

替换后：

<p i18n>{something | odd}</p>
<div class="content" i18n>{hello multi-line
text | odd}</div>

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