在React项目推进国际化的过程中，最繁琐的工作之一就是处理散落在各组件里的未翻译硬编码文本。这些文本可能是JSX里的纯字符串、模板字符串里的内容，手动逐个查找替换不仅耗时还容易遗漏，而借助VSCode的正则表达式搜索功能可以高效解决这个问题。
适用场景说明
本文的方案适用于使用react-i18next等主流国际化框架的React项目，目标是将项目中所有硬编码的中文文本替换为国际化函数的调用形式，比如将这是一段文本转换为{t('这是一段文本')}。
VSCode正则搜索基础配置
首先打开VSCode的搜索面板，快捷键是Ctrl+Shift+F（Windows/Linux）或者Cmd+Shift+F（Mac），然后点击搜索框右侧的正则表达式图标（.*），开启正则匹配模式。如果需要匹配整个项目的内容，搜索范围选择项目根目录即可。
不同场景的正则匹配规则
1. 匹配JSX中的纯字符串文本
JSX里最常见的未翻译文本是直接写在标签之间的中文内容，比如<div>用户信息</div>，对应的正则表达式为：
(?<=>)[^<>]*[u4e00-u9fa5]+[^<>]*(?=<)
这个正则的含义是匹配>和<之间的包含中文的内容，不会匹配到标签本身，也不会匹配到已经包含t(的内容。
2. 匹配JSX属性中的中文文本
部分文本会作为组件的属性值存在，比如<Button text="提交" />，对应的正则表达式为：
(?<=["'])[^"']*[u4e00-u9fa5]+[^"']*(?=["'])
这个正则会匹配双引号或单引号内包含中文的内容，适用于大部分属性值的场景。
3. 匹配JS中的模板字符串中文
如果是JS代码里的模板字符串，比如const msg = `当前数量为${count}`，对应的正则表达式为：
(?<=`)[^`]*[u4e00-u9fa5]+[^`]*(?=`)
批量替换实现步骤
找到对应的匹配规则后，在VSCode搜索面板的替换输入框里输入对应的替换格式即可。以JSX纯字符串的场景为例，替换内容为：
{t('$0')}
这里的$0表示正则匹配到的完整内容，替换后原来的用户信息就会变成{t('用户信息')}。
如果是属性值的场景，替换内容为：
{t('$0')}
替换后text="提交"会变成text={t('提交')}，注意如果属性原本是字符串形式，替换后需要去掉外层引号，加上大括号包裹。
替换后的校验工作
批量替换完成后，需要全局搜索t('确认所有替换的内容是否正确，同时检查有没有遗漏的未翻译文本。可以再运行一次正则搜索，确认没有匹配到新的未翻译内容，最后启动项目测试页面渲染是否正常，国际化文本是否能正确显示。
注意事项
- 替换前建议先提交当前代码到版本库，避免替换出错后无法回滚
- 如果项目里有注释里的中文，需要提前调整正则排除注释场景，避免误替换
- 部分特殊的中文符号可能需要调整正则的匹配范围，根据实际项目情况微调即可
示例代码演示
替换前的组件代码：
import React from 'react';
const UserCard = () => {
return (
<div className="user-card">
<h3>用户详情</h3>
<p>用户名：张三</p>
<Button text="编辑信息" />
</div>
);
};
export default UserCard;
替换后的组件代码：
import React from 'react';
import { useTranslation } from 'react-i18next';
const UserCard = () => {
const { t } = useTranslation();
return (
<div className="user-card">
<h3>{t('用户详情')}</h3>
<p>{t('用户名：张三')}</p>
<Button text={t('编辑信息')} />
</div>
);
};
export default UserCard;