在VS Code中利用正则表达式高效查找未翻译文本

本文旨在提供一套在VS Code中利用正则表达式查找React/JavaScript项目中未翻译文本的教程。特别针对i18next等国际化方案集成后，如何识别并定位遗留在HTML标签（如Button）内的硬编码字符串，以便进行批量翻译处理。教程将详细解析正则表达式模式、其应用方法及相关注意事项。

引言：i18n项目中的未翻译文本挑战

在将国际化（i18n）解决方案（如i18next）集成到现有项目中时，一个常见的挑战是识别和处理大量遗留的、未被国际化函数（如t()）包裹的硬编码字符串。这些字符串可能散布在各种组件和文件中，手动查找效率低下且容易遗漏。VS Code强大的正则表达式搜索功能为解决这一问题提供了高效的途径。本教程将以查找标签内未翻译文本为例，详细阐述如何构建和应用正则表达式来定位这些字符串。

VS Code正则表达式搜索基础

VS Code的全局搜索（Ctrl+Shift+F 或 Cmd+Shift+F）支持正则表达式。在搜索框中，点击“使用正则表达式”（通常是一个.*图标）按钮即可启用。正则表达式允许我们定义复杂的匹配模式，从而精确地定位目标字符串。

识别未翻译文本的核心正则表达式

为了查找标签内直接包含的未翻译文本（即纯文本，而非{t('...')}形式），我们可以使用以下正则表达式模式：

查找 (Find) 模式：

([\n\s]*)(\w+)([\n\s]*)

替换 (Replace) 模式：

$1{t('$2')}$3

模式解析

让我们详细分解“查找”模式的各个部分：

1. ( [\n\s]*) (第一个捕获组 ):

   

   Closers Copy

   营销专用文案机器人

   下载
   • [\s\S\n]*?: 这是一个非常重要的部分。
     • [\s\S\n]: 匹配任何空白字符 (\s)、非空白字符 (\S) 或换行符 (\n)。这确保了它能匹配包括换行在内的所有字符。
     • *: 匹配前面的字符零次或多次。
     • ?: 使匹配变为“非贪婪”模式。这意味着它会尽可能少地匹配字符，直到找到下一个模式（即>）。这对于处理多行属性的HTML标签至关重要，避免匹配到多个标签。
   • >: 匹配标签的结束尖括号。
   • [\n\s]*: 匹配零个或多个换行符或空白字符。这用于处理标签内部、文本之前的潜在空白区域。
   • 整个捕获组的目的是捕获并保留

2. (\w+) (第二个捕获组 $2):

   • \w+: 匹配一个或多个字母、数字或下划线字符。这正是我们想要识别的“未翻译文本”本身。
   • 这个捕获组将提取出像 "Save"、"Add"、"Start" 这样的单词。

3. *`([\n\s])** (第三个捕获组$3`):

   • [\n\s]*: 匹配零个或多个换行符或空白字符，处理文本之后、结束标签之前的潜在空白。
   • : 匹配字面字符串 ，即按钮的结束标签。
   • 这个捕获组捕获并保留了文本之后到结束标签的这部分内容。

替换模式与应用

“替换”模式利用了捕获组的引用：

• $1: 引用第一个捕获组的内容（即的开头部分）。
• {t('$2')}: 这是核心的替换逻辑。它将第二个捕获组（即未翻译的单词）用t('')函数包裹起来。
• $3: 引用第三个捕获组的内容（即的结束部分）。

通过这种方式，我们可以将：

  Save

转换为：

  {t('Save')}

实际操作步骤

1. 打开VS Code全局搜索： 按 Ctrl+Shift+F (Windows/Linux) 或 Cmd+Shift+F (macOS)。
2. 启用正则表达式： 在搜索框右侧，点击 .* 图标。
3. 输入查找模式： 将 ([\n\s]*)(\w+)([\n\s]*) 粘贴到“查找”输入框。
4. 输入替换模式： 展开替换输入框（点击查找框旁边的箭头），将 $1{t('$2')}$3 粘贴到“替换”输入框。
5. 预览和替换： VS Code会实时显示匹配结果。仔细审查匹配项，确认它们是您想要翻译的文本。您可以选择逐个替换，或点击“全部替换”按钮进行批量操作。

注意事项与高级应用

局限性与扩展

• 特定标签限制： 本教程提供的正则表达式是针对标签定制的。如果需要查找其他标签（如
  、

  、）内的未翻译文本，或者JavaScript字符串字面量（如title="Connection"，

  {Connection}

  ），则需要根据具体情况调整或编写新的正则表达式。例如，要查找

  标签内的文本，可以将
  替换为