home icon

点击这里编辑 JSX... 或者

在 JSX 中提取和替换文本

实验性：这可能无法很好地处理所有情况。

主要适用于提取包含静态文本的JSX组件中的文本。如果文本内容是动态的（使用大括号{}），可能无法正确处理。

该工具专注于提取 JSX 标签中的文本，生成一个由这些提取字符串组成的数组。之后，它使您能够用该数组中的字符串替换 JSX 中的当前文本。

您可以方便地将此功能用于多种应用，包括 UI/UX 测试、支持多语言和本地化、SEO 优化、进行可访问性评估，以及为您的代码创建文档或注释。

用例

  • UI / UX 测试
  • 多语言支持和本地化
  • 内容管理系统 (CMS)
  • SEO 优化
  • 可访问性检查
  • 文档 / 代码注释生成

使用说明

  1. 请在输入框中输入包含您要提取的字符串的 JSX 标签。
  2. 点击屏幕底部的提取按钮。
    • 您可以选择仅提取或使用提取按钮旁边的选项同时执行提取和替换。
    • 对于提取和替换选项，您可以在输入区域底部的输入框中指定将保存替换文本的数组名称。在代码中调用此数组时，使用相同的变量名，它将相应地被替换，包括大括号 {}。
  3. 检查输出字段以获取数组 / JSX，并使用复制按钮免费复制以供使用。

使用示例

Input JSX Tag:

<div>
  <Button onClick={onPlayMovie}>
  Play Movie
  </Button>
  <Button onClick={onUploadImage}>
  Upload Image
  </Button>
</div>

Output Array Name:

array

Output Array:

["Play Movie", "Upload Image"]

Output JSX:

<div>
  <Button onClick={onPlayMovie}>
  {array[0]}
  </Button>
  <Button onClick={onUploadImage}>
  {array[1]}
  </Button>
</div>