本文介绍使用正则表达式在 VSCode 中精准搜索 React JSX 中未调用 t() 的硬编码文本（如 Save），并安全批量替换为国际化格式 {t('Save')}，兼顾多行、空格与嵌套结构。
本文介绍使用正则表达式在 vscode 中精准搜索 react jsx 中未调用 `t()` 的硬编码文本（如 ``），并安全批量替换为国际化格式 `{t('save')}`，兼顾多行、空格与嵌套结构。
在将 i18next 集成到已有 React 项目时，一个常见痛点是：大量按钮文案、标题、提示语等仍以纯字符串形式硬编码在 JSX 中（例如 或
✅ 推荐正则方案（支持多行与空白容错）
在 VSCode 的「替换面板」（Ctrl+H / Cmd+H）中，*启用「正则表达式」模式（. 按钮）**，输入以下内容：
-
查找（Find）：
(<Button[\s\S]*?>[\s\n]*)(\w+)([\s\n]*</Button>)
? 解析：
- (
- [\s\n]*：匹配紧随标签后的空白或换行；
- (\w+)：捕获纯英文/数字单词（如 Save, Add, Start），这是待国际化的关键文本；
- [\s\n]*：匹配闭合标签前的空白及 。
-
替换（Replace）：
$1{t('$2')}$3? 、、 分别对应三个捕获组，确保原有结构（属性、空白、闭合标签）完全保留，仅将中间文本替换为 {t('xxx')}。
⚠️ 注意事项与进阶建议
-
谨慎处理非 Button 场景：上述正则专为 设计。若需覆盖
Connection或 title="Connection" 等，需单独编写对应规则，例如：(title=")([^"]+?)(")替换为：$1{t('$2')}$3
避免误匹配已翻译内容：正则默认会跳过已含 t( 的行（如 {t('Save')}），但建议先「查找全部」预览结果，确认无误后再执行替换。
保留原始语义与大小写：$2 捕获原字符串（如 Start → {t('Start')}），无需手动调整大小写，后续由 i18n JSON 文件统一管理翻译。
扩展性提示：对于更复杂场景（如带插值的文本 Hello {name}），建议改用 ESLint 插件（如 eslint-plugin-i18next）进行静态检查，实现长期可维护性。
通过该方法，你可在数分钟内完成数百处静态文本的初步国际化改造，大幅提升迁移效率，同时保持代码结构整洁、语义清晰。
